Making cursor stick to circle path
Hey guys!
Does anyone know how to make a cursor stick to a circle path. I'm working on this fun side thing : https://round-slider.webflow.io/
It was inspired by: https://www.brybry.co/
When you hover over the timeline, a cursor shows up but it's glued to the circle path, does anyone know how that's being done?
Also, what do you think is the best way to update the states of the dots? The way I have it set up now is an interval function that update 10 times/second. That function updates the progress of the timeline as well as the dots. My problem is that it checks for which dots should be active 10 times a second, I'd rather have it sort of dispatch an event when it reaches the percentage which updates the dot. How do I do that?
Thanks!
BryBry 🐝 – A small, independent... man.
The interactive portfolio of creative and designer Bryan James
5 Replies
this is pretty wild
I think about it in a few steps
first change cursor when user cursor is within range of the circle. Something like an event listener for mousemove event then get x and y with event.clientX and evet.clientY
use the good old pythag theorem to calc distance from center point
you could normalize that (unit vector length equal to 1) and then use that to set the "active dot" location
the active dot would have a fixed radius based on the size of the circle which changes based on screen width
did you check the site on mobile? I wonder how it does on a phone
for the dot state I would probably have a variable like ActiveDot which equals the active dot number
I would also have a function like updateUI() that would style the ring based on the value of activeDot.
call updateUI() based on the automatic timeline and based on where the user clicks mouse.
your basically programming a little game lol. Might be good to look into how game devs to game loops and stuff
Hi @Web Bae!
Thanks so much for getting back to me!
I'm gonna try your suggestion about using pythag theorem, initially I was thinking of using this method I came across while I was studying threejs. (Creating a function called "animate" then using window.requestAnimationFrame to call that function within itself, keeping track of the elapsed time since the animation first started, then multiplying those value with Math.cos() and Math.sin() for the X and Y Coordinates respectively to make it go in a circle)
Then somehow figuring out how to tie that to Mouse position.
And thanks for the tip on updating UI. I actually hadn't realized it was like coding a game haha.
^^^ yea I think cos and sin might be a good way to work with polar coordinates? You might look into that too but I would need to do a math refreshers lol.
I did this tutorial a while back and it was really instructive: https://www.youtube.com/watch?v=eI9idPTT0c4
Chris Courses
YouTube
HTML5 Canvas and JavaScript Game Tutorial
Start the full game course at: https://chriscourses.com/game-course
When I first started learning web development, I was able to get text and images displaying in a browser, but when it came to developing interactive games, I was frustrated, baffled, and felt like I really wasn't made out to be a web developer. It seemed like game developers co...
Thanks Keegan!
I actually came across this video by Chris Courses last year too but I decided to watch his ThreeJS courses instead haha! Everything just comes full circle😂