Search code examples
javascriptcanvasparticles

Is it possible to make my particles clickable?


I have the following Particle script (as found and edit from teh webs!): http://jsfiddle.net/neuroflux/hSkFX/1/

I was wondering what the easiest way to make each particle "clickable" is?

I understand that these are not elements, rather x/y/radius points.

What would be the easiest way do you think?

Cheers!

[edit] This question is about click areas not click events....


Solution

  • I found this tutorial particularly helpful! http://simonsarris.com/blog/510-making-html5-canvas-useful This is the relevant part you need:

    // Determine if a point is inside the shape's bounds
        Shape.prototype.contains = function(mx, my) {
    // All we have to do is make sure the Mouse X,Y fall in the area between
    // the shape's X and (X + Height) and its Y and (Y + Height)
        return  (this.x <= mx) && (this.x + this.w >= mx) &&
              (this.y <= my) && (this.y + this.h >= my);
        }
    

    You need to implement the .contains function to your Circle() objects, however you will have to change the the method by comparing the distance of the cursor's position from the centre of the circle with the circle radius and return one if smaller.