.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Canvas Interaction Sticky Cursor
Ive been working on this canvas animation and I cant seem to get get the parallax / magnetic cursor that snaps to a canvas element when its within a certain radius. Not quite what to try next. I created the most minimal version that i could on codepen as my config may be the problem. Id really appreciate some help and direction on what im doing wrong and how to implement the correct solution. Im trying to have the outer cursor snap and scale up to the moving bubbles.
I'm not sure about your math. Like why are you calculating angles? To see if a point is inside a circle...
// assumes x and y coords are the center
const dx = Math.abs(cursor.x - bubble.x);
const dy = Math.abs(cursor.y - bubble.y);
if (dx > attractRadius || dy > attractRadius) {
// not inside
}
Here's how I'd do it. The bubbles aren't animating, but it makes no difference. It will work the same.
See the Pen ae04f1f23935e7d7a13c823d614
