Ask coding questions

← Back to all posts
Not Good at Particle Effects xD
h
RayhanADev (344)

Good Day People!

I Need Help With On-Click Particle Effects

Well I spent this morning trying to make a particle/explosion effect in HTML Canvas, but not to my surprise I can’t xD. If anyone has any clue as to how to make one, then feel free to reply. If it successfully integrate with my project I’ll drop your attribution in the footer and on the post. Thanks
~ Ray

Commentshotnewtop
RayhanADev (344)

@Coder100 I only ever go to CSS-tricks in desperation xD.

DynamicSquid (3609)

Okay, so have a Particle class with the particles position and direction.

Then have a method to move the particle.

// sorry I haven't done js in a while so this may be wrong

class Particle
{
  Constructor(x, y, xdir, ydir)
  {
    this.x = x;
    this.y = y;
    this.xdir = xdir;
    this.ydir = ydir;
  }

  move()
  {
    this.x += this.xdir;
    this.y += this.ydir;
  }
}

Then just create them in a for loop with random values:

for (let i = 0; i < number_of_particles; ++i)
  new Particle(random, random, random, random)
Coder100 (8709)

ew ++i, btw make the constructor lowercase ;) @DynamicSquid

DynamicSquid (3609)

@Coder100 Constructor(x, y, xdir, ydir).toLowerCase()

DynamicSquid (3609)

@Coder100 There should be a language where you can modify the source code using the source code. So this Constructor(x, y, xdir, ydir).toLowerCase() would actually be valid code lol

RayhanADev (344)

@DynamicSquid A language where you write code to edit code. Hmm good thonk xD. Also, how would I then generate the particles. I’m using Canvas and HTML?

DynamicSquid (3609)

@RayhanADev Oh yeah, to generate just do:

@Coder100 your turn to help
firefish (556)

@DynamicSquid álso has dusk moved to v3.2? if so, when is that scheduled to realase

firefish (556)

@Coder100 ++i PREINCREMENT BETTER

firefish (556)

@DynamicSquid It's been ready for yonks

DynamicSquid (3609)

@Coder100 oh, it's the pkg manager for Night

RayhanADev (344)

@Coder100 I believe Dusk is a time of evening, when the sun is setting xD.
JK i really don’t know lol.

firefish (556)

@Coder100 you uncultured walnut, or should I say cookie
https://github.com/firefish111/dusk

DynamicSquid (3609)

@firefish okay I'll yonk it as hard as I can now. I'll let you know what happened

DynamicSquid (3609)

@firefish what are the current pkgs?

firefish (556)

@DynamicSquid example which is the fibonacci code in the readme (nothing else)

DynamicSquid (3609)

@firefish okay where's the CDN at? I need to put the sqdlib in there

firefish (556)

@DynamicSquid hold up a moment; please help moi

firefish (556)

@DynamicSquid repl.it/@firefish/duskcdn

RayhanADev (344)

@firefish @DynamicSquid Yo, go to Discord xD! I’m trying to make a leaderboard and I’m getting ya’ll’s pings xD.

firefish (556)

@RayhanADev neither of us have discord

RayhanADev (344)

ƪ(˘⌣˘)ʃ In that case oke.

DynamicSquid (3609)

@Coder100 POOOOOOOJIHIDLufh awivalukghilsuetkhnlgaegsthejtyg

firefish (556)

@Coder100 my mum needs no nerfing, GRILLED COOKIE

RayhanADev (344)

Gah, you guys type too fast. I have to reload every second xD!

firefish (556)

@RayhanADev lol, (can you please grill the cookie some more)

firefish (556)

@DynamicSquid use or include or import or include?
import sounds weird if you ask me i'm in a hurry

firefish (556)

@DynamicSquid you know I can't answer at 1am my time, maybe squids aren't that smart after all

firefish (556)

@DynamicSquid Hi there, SQUOD. come on codename squod

RayhanADev (344)

@Coder100 What exactly do you mean...?

Coder100 (8709)

like just an orange particle or like the images themselves get split apart @RayhanADev

Coder100 (8709)

and then we also have to account: do we need gravity? @RayhanADev

RayhanADev (344)

@Coder100 Okay, so orange particles are fine, and they need to explode outward from the source and fade, so no gravity.

Coder100 (8709)

ok so how was my solution @RayhanADev