odell Posted July 4, 2020 Share Posted July 4, 2020 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. See the Pen gOPoGyO by trendstar (@trendstar) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted July 6, 2020 Share Posted July 6, 2020 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 ae04f1f23935e7d7a13c823d6141dec2 by osublake (@osublake) on CodePen I didn't account for the delta, but here's how to do that. 4 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now