@@MysteriousInternetPerson Guys. The thing that was cringe, is the joke. Radians, "That's rad!", you know, "rad" being the unit of radians? Like, "10rad"? And I was just kidding anyway, you silly goobers. Relax. Jeez.
I think the original design angled the circle relative to the angle between the mouse and the circle, not based on the mouse movement direction... That's why it can feel a bit weird with your demo at the end. Still, great video, very digest, straight to the point, I like it !
it would also be much more easy to code. Also movement speed depending of distance between the circle and the mouse instead of the current mouse speed would much more easy to do with just a bit of trigo.
Instead of using the mouse delta to calculate the speed and angle, you should use the circle's own delta, that way the squish always feels like it's in line with the direction the circle is moving, instead of it doing some odd drifting-esque movement very prominent at the end.
@@ampmunkey Another one of the thoughts I had. But I am not practical with JS and I don't know if he had to add like a (low) base moving speed to avoid a situation where the elastic gets so slow when it gets closer that it never reaches the cursor. This dude might be good at aesthetics bus he is crap at coding
I agree with another commenter that said "Short, concise, to the point, and easy to follow". The only thing I would change in the actual code is to calculate the delta position (that's used for the scaling and rotation) from the actual circle position change and not the mouse position change. Because the circle circle and mouse are moving a bit differently it makes more sense for the circle to be transformed according to its movement and not the one of the mouse.
Yes. My initial idea would be to calc the circle to mouse delta. The cirlce would "want" to move towards that, and then based on it's speed sqiush and rotate towards the movement vector.
I noticed that when changing mouse direction the circle rotates to the new mouse direction instead of pointing towards the mouse, meaning that sudden movements like making zig zags would kinda break the rotation of the circle, since it's looking where the the mouse is moving but applying the rotation locally, making that weird rotation offset. Instead I think it should rotate towards the current mouse position instead of following the mouse direction.
This is great tutorial, personally hate doing UX design but this breaks down so well that I enjoyed watching, almost got me to open up the dread IDE again, maybe in a few videos time
You can apply smoothing algorithm to fix jittery stuff when mouse is slow. Set a mouse velocity variable, then when you update it, add together 80% old velocity and 20% new velocity. Play around with the ratio. The angle is a bit weird when you make a curve with your mouse. You should set the angle the exact same as the velocity direction. You set it to the latest mouse change direction instead
was grinding codewars before going onto youtube to unload, watching this while thinking to myself how it'd take me 3-5 business days to do this makes me feel uneasy... back to codewars we go i suppose
The circle knows where it is at all times. It knows this because it knows where it isn't. By subtracting where it is from where it isn't, or where it isn't from where it is - whichever is greater - it obtains a difference or deviation. The JavaScript guidance subsystem uses deviations to generate corrective commands to drive the circle from a position where it is to a position where it isn't, and arriving at a position that it wasn't, it now is. Consequently, the position where it is is now the position that it wasn't, and if follows that the position that it was is now the position that it isn't. In the event that the position that it is in is not the position that it wasn't, the system has acquired a variation. The variation being the difference between where the circle is and where it wasn't. If variation is considered to be a significant factor, it too may be corrected by the GEA. However, the circle must also know where it was. The circle guidance computer scenario works as follows: Because a variation has modified some of the information that the circle has obtained, it is not sure just where it is. However, it is sure where it isn't, within reason, and it knows where it was. It now subtracts where it should be from where it wasn't, or vice versa. And by differentiating this from the algebraic sum of where it shouldn't be and where it was, it is able to obtain the deviation and its variation, which is called error.
Has been commented, but the speed value should be based on how fast the circle is moving, not the mouse. The circle has a delayed movement effect, but you're shaping it over the momentary mouse speed, which is wrong
I feel like instead of keeping track of your mouse velocity, the effect would look more consistent if you used the difference between the current circle position and the current mouse position in your calculations for warping the circle.
I think you're approach was more complicated than it needs to be. Scale could just be a factor of how far the cursor is from the circle, and the direction of the rotation transform should be pointing from the current circle location to the cursor. The way it is coded right now is based on immediate mouse state whereas the circle movement should only just be related to how it needs to move to correct for the difference. If you cap the circle movement speed as you have, then the rest of the UI effect should just fall out from trying to resolve the differences. The only addition I might make at that point would be to build a small buffer zone within the circle, maybe only a pixel or so, so that small mouse movements don't cause circle movements and that will also smooth how it approaches the cursor for fine movement.
Just a thought, not sure how this all works behind the scenes my java suck; however, I do a lot of game dev and my first thought would be linear algebra Convert the mouse movement direction into a vector. Using the normalized direction vector as the basis you can rotate the circle relative to the movement direction. Then using the magnitude of the mouse movement we can scale the i and j inversely (Basically the same thing you did with Pythagorean squishing the circle relative to mouse speed). Then for the transform part of the matrix just interpolate between it's current position and it's target position using the normalized vector times a delta over the course of a few frames. All three of these transformations can be done at once by creating a basis matrix from a few constants and then multiplying a vector. I know it's prolly not very intensive calling a trig function for this one case; however, it could help you avoid a tan in more intensive application. I don't work in java, so I dunno if matrix operations are well optimized or not. So it may not be very practical
I don't want to be "that person" but like... you are currently calculating the mouse speed per frame, however, framerate is not always constant so you could get weird behavior when say the computer drops a frame, or of the target device is running at a lower frame rate, to calculate mouse position change per millisecond you might want to track how long the previous update took, and divide deltaMouseX and deltaMouseY by that time.
wel... that escalated quickly. But its a nice concept and video I give yout hat. But boy did it go from "I''ll just need 1 div" to using formulas with pythagorian theorem and using square corner tangent formulas. But I liked it.!
There's a small bug in the code: Instead of using the cursor's xy position for the ball's rotation, you should use the angle from the ball to the cursor. You can see the issue if you quickly move the cursor in large circles and watch the ball spin in the middle.
1:52 I feel that it could've been a bit better is you used opposite numbers for it. Not 1.5 and 0.5, but for example 0.5 and 2 or 1/√2 and √2. This way the area of oval is conserved which might look nice.
Hello. I really enjoyed the clip, but wanted to ask you how can you do a few more circles behind the original that also follow the mouse, but with a little delay?
The only problem with your code is that the scaling and rotation is based on the change in mouse position. It should be based on the delta between the mouse and the circles position. Your method makes the circle move to your mouse, but will rotate and scale depending on your latest mouse movment instead of the current direction and speed of the circle. So with rapid movments the circle will look like its rotating the wrong way. I have added my version in the first reply.
Why wouldn't you make a normalized 2D vector to get in which direction mouse is headed? It would've simplified the entire thing such as finding angle. Also you could've used some kind of interpolation to make your circle coursor move smoothly wherever it moves.
I don't think you need to calculate the speed of the mouse movement. I think the stretching should be dependant on the circles distance to the mouse (or the velocity of the circle).
This resembles wobbly windows for Linux with Compiz. I can't abide desktop environments without them. This "real object with physical properties" metaphor makes everything feel more intuitive. Hope this becomes the norm in the future. Boxy design is just sooo wrong.
Wouldn't it be best to base the circle's rotation on the direction of a vector pointing from the circle to the mouse cursor (so it aligns with the circle's actual direction of movement), rather than the direction of the mouse movement alone? Maybe it could even eliminate the jitter issue from 4:14 as well?
Thanks Bro, I saw this effect on a unseen studio's website and wanted to really implement it but couldn't find it correct name for this cursor effect. Then i found your code in code pen you really helped me bro thank you. But i have a question i i don't know how can i handle the scroll using custom cursor so can you help me with that?
Thanks! I was obsessed with it too once I saw it on the Unseen website :D I'm glad I could help! Now, regarding your question, what exactly do you mean by 'handling the scroll' with a custom cursor?
Whenever I try stuff like this I get very poor performance, its laggy and buggy and the transitions/animations are not smooth. Will try this in the next days, curious if it will be different this time
Hi! Thank you! 😊 Would you like this custom cursor to completely replace your standard mouse cursor? If so, in this part of the code: circle.x += (mouse.x - circle.x) * speed; circle.y += (mouse.y - circle.y) * speed; Replace the speed variable with a number close to 1 (e.g., 0.8) for more instant movement: circle.x += (mouse.x - circle.x) * 0.8; circle.y += (mouse.y - circle.y) * 0.8; (Make sure to leave original "speed" variable as it is, because it's used for the scale smoothing) Then, in CSS, add the following rule for the body tag to hide the default cursor: body { cursor: none; }
Instead of tracking the mouse angle, why not to calculate the angle between current circle center and the cursor? also the velocity could be based on that.
![[Part 1] รักมาไม่ทันตั้งตัว❤ หนุ่มสาวโสดถูกจับมาแต่งงานกันกะทันหัน แถมเธอยังเป็นหัวหน้าของเขา?!](http://i.ytimg.com/vi/y2pOOMkuFI0/mqdefault.jpg)
You don't need to convert to degrees. CSS has the `rad` unit for radians that'll work in the `rotate()` function.
That's rad!
@@Blast-Forwardcringe
Edit: wtf guys relax I was just joking lmao take a chill pill you're killing the vibe
@@ItalianRetroGuy'Cringe'? Seriously? Are you a 9 y/o or something?
@@MysteriousInternetPersonhe probably doesnt even know any trigonometry and loves calling people cringe for no reason
@@MysteriousInternetPerson Guys. The thing that was cringe, is the joke. Radians, "That's rad!", you know, "rad" being the unit of radians? Like, "10rad"?
And I was just kidding anyway, you silly goobers. Relax. Jeez.
I think the original design angled the circle relative to the angle between the mouse and the circle, not based on the mouse movement direction... That's why it can feel a bit weird with your demo at the end.
Still, great video, very digest, straight to the point, I like it !
it would also be much more easy to code. Also movement speed depending of distance between the circle and the mouse instead of the current mouse speed would much more easy to do with just a bit of trigo.
@@ledevin34 did u just shorten trigonometry into "trigo" instead of "trig"
@@frqstbite1001 depends of your native language i presume. Here its trigo aswell.
Here it's rigono
@@lazyboio.Bro living on mars
Short, concise, to the point, and easy to follow! Love channels like this.
Instead of using the mouse delta to calculate the speed and angle, you should use the circle's own delta, that way the squish always feels like it's in line with the direction the circle is moving, instead of it doing some odd drifting-esque movement very prominent at the end.
yeah thats what im sayin!!!!!!
I don't even code in JavaScript and It was the first thing that came to my mind.
It's so obviousss
@@lorenzosotroppofigo1641hahah may look obvious for everyone once coded, but may not to the person programming it in the moment
Couldn’t the circle also calculate its own speed based on distance from the cursor, instead of taking mouse speed and smoothing?
@@ampmunkey Another one of the thoughts I had.
But I am not practical with JS and I don't know if he had to add like a (low) base moving speed to avoid a situation where the elastic gets so slow when it gets closer that it never reaches the cursor.
This dude might be good at aesthetics bus he is crap at coding
i couldnt catch what you said in the beginning .. "i often find inspiration by exploring the ______ website " ... what website again ?
"awards"? i think?
Awwwards
The website's name is "Awwwards"
Rude
Awwwards
This production quality deserves so much more subscribers
it's literally the same editing style as hyperplexed
I agree with another commenter that said "Short, concise, to the point, and easy to follow".
The only thing I would change in the actual code is to calculate the delta position (that's used for the scaling and rotation) from the actual circle position change and not the mouse position change.
Because the circle circle and mouse are moving a bit differently it makes more sense for the circle to be transformed according to its movement and not the one of the mouse.
Yes.
My initial idea would be to calc the circle to mouse delta. The cirlce would "want" to move towards that, and then based on it's speed sqiush and rotate towards the movement vector.
@@MrMeszarosPretty much, he's already calculating the circle's speed by doing "(mousePos - circlePos) * constant". Should've used that one instead.
Wow, just stumbled on this account and this is Hyperplexed level content! Great explanation!
This is some quality content. Don't stop uploading them. You really did a great job here and made this a piece of cake. Thank you, Sir.
I noticed that when changing mouse direction the circle rotates to the new mouse direction instead of pointing towards the mouse, meaning that sudden movements like making zig zags would kinda break the rotation of the circle, since it's looking where the the mouse is moving but applying the rotation locally, making that weird rotation offset. Instead I think it should rotate towards the current mouse position instead of following the mouse direction.
I was surprised when I saw you only have 590 subscribers. I just made it go one up!
Let's increase the subscribe count
We're at 1.12k now, boys!
I love these types of content.. improves ones thinking process and problem solving
This is great tutorial, personally hate doing UX design but this breaks down so well that I enjoyed watching, almost got me to open up the dread IDE again, maybe in a few videos time
Love your tutorials and video editing. I want more!
Subbed. Love to see more content like this. Keep up the good work!
i thought that this channel had 100.000 subs 😮,
underrated, keep going!!
elypsoid with two center spaced correctly and that's it
Great video! Keep up the good work 🎉
Amazing !!
Great video! You did an excellent job taking us with you through your coding process. Keep it up! 🤝
I implemented this for my game for the touch indicator after seeing it done in one of my most favourite games poinpy.
You can apply smoothing algorithm to fix jittery stuff when mouse is slow. Set a mouse velocity variable, then when you update it, add together 80% old velocity and 20% new velocity. Play around with the ratio.
The angle is a bit weird when you make a curve with your mouse. You should set the angle the exact same as the velocity direction. You set it to the latest mouse change direction instead
Now we need this cursor working on the normal desktop
TBH the first one feels much more smooth
FIrst every real life use case i saw for the legendary Pythagoras theorem
I was waiting to hear "Lerp" once smooth scaling was said.
was grinding codewars before going onto youtube to unload, watching this while thinking to myself how it'd take me 3-5 business days to do this makes me feel uneasy... back to codewars we go i suppose
I've coded something exactly like this in turbowarp! Awesome effect!
You mister, are a legend
This was amazing, and very well explained. I just randomly found you on YT. Liked and subbed and please, more of these bytesized things.
hearing you pronounce π as 'pee' cracks me up
It doesn’t make sense. No one learns it as “pee.”
@@ophello ok pal no need to get feisty
Very fun to watch!
You've just made me subscribe and like the video without realising :D that's how good it is. Keep it up
The circle knows where it is at all times. It knows this because it knows where it isn't. By subtracting where it is from where it isn't, or where it isn't from where it is - whichever is greater - it obtains a difference or deviation. The JavaScript guidance subsystem uses deviations to generate corrective commands to drive the circle from a position where it is to a position where it isn't, and arriving at a position that it wasn't, it now is. Consequently, the position where it is is now the position that it wasn't, and if follows that the position that it was is now the position that it isn't. In the event that the position that it is in is not the position that it wasn't, the system has acquired a variation. The variation being the difference between where the circle is and where it wasn't. If variation is considered to be a significant factor, it too may be corrected by the GEA. However, the circle must also know where it was. The circle guidance computer scenario works as follows: Because a variation has modified some of the information that the circle has obtained, it is not sure just where it is. However, it is sure where it isn't, within reason, and it knows where it was. It now subtracts where it should be from where it wasn't, or vice versa. And by differentiating this from the algebraic sum of where it shouldn't be and where it was, it is able to obtain the deviation and its variation, which is called error.
Wow, this is your first video! And thats amazing. Keep going)
1:57 AHAAHAHAHAHAH
Excuse me, but I really love the gif appearing on words "depending on the mouse speed"
U made me
Following mouse cursors or replacement cursors are the worst UX a website can have. It’s just plain horrible.
As a game dev: not impressed as this is a common thing when working on vfx and animations
As a web dev: this is pretty cool
Even though I don't know anything about Java, I still kind of like it and try to understand it with my Python Knowledge 😂😂
Has been commented, but the speed value should be based on how fast the circle is moving, not the mouse. The circle has a delayed movement effect, but you're shaping it over the momentary mouse speed, which is wrong
Great vid! Nice level of detail while keeping the pace moving
Subbed. Keep doing this and you'll rise to the top
I feel like instead of keeping track of your mouse velocity, the effect would look more consistent if you used the difference between the current circle position and the current mouse position in your calculations for warping the circle.
This is a great video! Love the content!
Thank you for this good animation
wow! I might try to put in the same amount of effort in editing as you do. It's great!
I think you're approach was more complicated than it needs to be. Scale could just be a factor of how far the cursor is from the circle, and the direction of the rotation transform should be pointing from the current circle location to the cursor. The way it is coded right now is based on immediate mouse state whereas the circle movement should only just be related to how it needs to move to correct for the difference. If you cap the circle movement speed as you have, then the rest of the UI effect should just fall out from trying to resolve the differences. The only addition I might make at that point would be to build a small buffer zone within the circle, maybe only a pixel or so, so that small mouse movements don't cause circle movements and that will also smooth how it approaches the cursor for fine movement.
Can you make a balloon that ties onto the cursor? lol
Amazing work
They already invented this software, it was a cat that chases the mouse .
Great video. Learned a lot 👍
Amazing, love the video.
tuggable elements are the most fun
Just a thought, not sure how this all works behind the scenes my java suck; however, I do a lot of game dev and my first thought would be linear algebra
Convert the mouse movement direction into a vector. Using the normalized direction vector as the basis you can rotate the circle relative to the movement direction. Then using the magnitude of the mouse movement we can scale the i and j inversely (Basically the same thing you did with Pythagorean squishing the circle relative to mouse speed). Then for the transform part of the matrix just interpolate between it's current position and it's target position using the normalized vector times a delta over the course of a few frames. All three of these transformations can be done at once by creating a basis matrix from a few constants and then multiplying a vector.
I know it's prolly not very intensive calling a trig function for this one case; however, it could help you avoid a tan in more intensive application. I don't work in java, so I dunno if matrix operations are well optimized or not. So it may not be very practical
I don't want to be "that person" but like... you are currently calculating the mouse speed per frame, however, framerate is not always constant so you could get weird behavior when say the computer drops a frame, or of the target device is running at a lower frame rate, to calculate mouse position change per millisecond you might want to track how long the previous update took, and divide deltaMouseX and deltaMouseY by that time.
Nice tutorial.. would love to see more
wel... that escalated quickly. But its a nice concept and video I give yout hat. But boy did it go from "I''ll just need 1 div" to using formulas with pythagorian theorem and using square corner tangent formulas. But I liked it.!
There's a small bug in the code: Instead of using the cursor's xy position for the ball's rotation, you should use the angle from the ball to the cursor. You can see the issue if you quickly move the cursor in large circles and watch the ball spin in the middle.
This is so fun to find these "yup gonna be big" accounts when only have 619 subs. Can you add the awards website?
bro is NOT hyperplexed. Great video though
adding "cursor: none;" to the body section in the CSS makes it 10000x better. it makes the cursor invisible which is pretty neat.
How nice🥰
Now make it again in pure CSS3 without JS😈
1:52 I feel that it could've been a bit better is you used opposite numbers for it. Not 1.5 and 0.5, but for example 0.5 and 2 or 1/√2 and √2. This way the area of oval is conserved which might look nice.
this is buatiful and amazing desing, it is so sad that using internet is such a terrible experience because everything is slow and doesn't work...
i just realized you could just coppy the code and paste it in to the correct coding language and boom done!!!
Hello. I really enjoyed the clip, but wanted to ask you how can you do a few more circles behind the original that also follow the mouse, but with a little delay?
This is just the first video but I see 1.38k already?? Nice. I will keep in mind of this creator's growth.
красава мужик
ждем больше видосов
The only problem with your code is that the scaling and rotation is based on the change in mouse position. It should be based on the delta between the mouse and the circles position. Your method makes the circle move to your mouse, but will rotate and scale depending on your latest mouse movment instead of the current direction and speed of the circle. So with rapid movments the circle will look like its rotating the wrong way.
I have added my version in the first reply.
Why wouldn't you make a normalized 2D vector to get in which direction mouse is headed? It would've simplified the entire thing such as finding angle. Also you could've used some kind of interpolation to make your circle coursor move smoothly wherever it moves.
I don't think you need to calculate the speed of the mouse movement. I think the stretching should be dependant on the circles distance to the mouse (or the velocity of the circle).
Underrated
Lovely video, nicely done
Keep it up your amazing 🔥
Is there any way to use this as the default windows cursor? Great work!
This resembles wobbly windows for Linux with Compiz. I can't abide desktop environments without them. This "real object with physical properties" metaphor makes everything feel more intuitive. Hope this becomes the norm in the future. Boxy design is just sooo wrong.
Awesome video 👍
Wouldn't it be best to base the circle's rotation on the direction of a vector pointing from the circle to the mouse cursor (so it aligns with the circle's actual direction of movement), rather than the direction of the mouse movement alone? Maybe it could even eliminate the jitter issue from 4:14 as well?
Hello from frontpage algorithm!
Thanks Bro, I saw this effect on a unseen studio's website and wanted to really implement it but couldn't find it correct name for this cursor effect. Then i found your code in code pen you really helped me bro thank you.
But i have a question i i don't know how can i handle the scroll using custom cursor so can you help me with that?
Thanks! I was obsessed with it too once I saw it on the Unseen website :D I'm glad I could help! Now, regarding your question, what exactly do you mean by 'handling the scroll' with a custom cursor?
Whenever I try stuff like this I get very poor performance, its laggy and buggy and the transitions/animations are not smooth. Will try this in the next days, curious if it will be different this time
what website was it that you got inspiration from?
very nice video
Cool video
Awesome :)
Hi, is it possible to save it to my desktop and add it as a default cursor, and how? thank you
What is the website you look at for inspiration?
hey, is there any option to contact you like discord or somthing?
Also good video!
Is there any way to remove the delay so I can use it as an cursor?
Hi! Thank you! 😊 Would you like this custom cursor to completely replace your standard mouse cursor? If so, in this part of the code:
circle.x += (mouse.x - circle.x) * speed;
circle.y += (mouse.y - circle.y) * speed;
Replace the speed variable with a number close to 1 (e.g., 0.8) for more instant movement:
circle.x += (mouse.x - circle.x) * 0.8;
circle.y += (mouse.y - circle.y) * 0.8;
(Make sure to leave original "speed" variable as it is, because it's used for the scale smoothing)
Then, in CSS, add the following rule for the body tag to hide the default cursor:
body {
cursor: none;
}
@@GusevDigital tysm!
What award did this animation win?
Why are you basing the circle's scale & angle on the mouse speed and not the circle's speed?
yeah but can you make it so thats my mouse pointer?
440th sub, love it!
me 4 years ago messing around with clickteam fusion 2.5 at the age of 11 doing this exact same thing:
me: Teacher, I will never use Pythagorean theorem in real life application.
Gusev in 2024: 2:20
is there an app for it to work universally in my my windows ?
hmm yes I totally understand what you're saying
But why?
I made this kind of stuff in flash when I was like 14 man
Instead of tracking the mouse angle, why not to calculate the angle between current circle center and the cursor? also the velocity could be based on that.
Great video
buuuut you prounounced 'Pi' as 'Pee' instead of 'Pai"