CODEWITHSUNDEEP
javascriptcanvaseventemitterparticles
Feeney
Feeney

Reputation: 357

How would you create a particle SURFACE emitter based on a created canvas shape? HTMLS CANVAS JS

I have a shape (a quarter circle) that I've created using the html canvas function:

How do I go about exploding the shape into particles and then return them to form a circle?

Upvotes: 2

Views: 398

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63862

I'm not going to write the code for you because it will take some time, and I'm sure you can find examples on the web, but I'll tell you the theory you need to know in order to make such a thing.

  1. Create an in-memory canvas (using document.createElement('canvas')) that will never be seen on the page. This canvas must be at least as large as your object. I'm going to assume it is exactly as large as your object. We'll call this tempCanvas and it has tempCtx
  2. Draw your object to tempCtx.
  3. There will be some event that you didn't mention exactly but I'm sure you have in mind. Either you press a button or click on the object and it "explodes". For the sake of picking something I'll assume you want it to explode on click.

So to do the explosion:

  1. Draw the object onto your normal context: ctx.drawImage(tempCanvas, x, y) so the user sees something
  2. You're going to want to have an array of pixels for the location of each pixel in tempCanvas. So if tempCanvas is 20x30 you'll want an array of [20][30] to correspond.
  3. You have to keep data for each of those pixels. Specifically, their starting point, which is easy, because pixel [2][4]'s starting point is (2,4)! And also their current location, which is identical to starting point at first but will change on each frame.
  4. When the explosion event occurs keep track of the original mouse x and y position.
  5. At this point for every single pixel you have a vector which means you have a direction. If you clicked in the middle of the object you'll want to save the mouse coordinates of (10,15) (see note 1). So now all of the pixels of the to-be-exploded image have their trajectory. There's a bit of math here that I'm taking for granted, but if you search separate topics either on SO or on the internet you'll find out how to find the slope/etc of these lines and continue them.
  6. For every frame hereafter you must take each pixel [x][y] and use ctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1) where x and y are the same as the pixel's [x][y] and the newX and newY are calculated using the vector and finding what the next point would be along its line.

The result will be each pixel of the image being drawn in a location that is slightly more away from the original click point. If you continue to do this frame after frame it will look as if the object has exploded.

That's the general idea, anyway. Let me know if any of it is unclear.

note 1: Most likely your normal canvas won't be the same size as the to-explode object. Maybe the object is placed at 100,100 so you really clicked on 110, 115 instead of 10,15. I'm omitting that offset just for the sake of simplicity.

Upvotes: 1

Related Questions