Realistic Spinning Wheels with JavaScript (SEISURE WARNING!)

[@___d3p1]

You're so creative! I'm amazed at how you came up with this technique to achieve and perfect the desired effect. Your videos always inspire me!

[@Radu]

Thanks :-) I can actually think of many different ways to get this same or similar effect. This one can be useful for other shapes as well (not just pie slices), so, decided to teach this one for now.

[@isaacfink123]

I was sure you were gonna play around with manual interpolation of the colors and creating smaller slices, adding transparency, and not clearing the canvas is creative

[@Radu]

Yeah, I thought there are several nice techniques worth sharing.

[@karolisr]

I love Radu’s videos because of this kind of thing and I am often rewarded for watching even the ones where I think I know how to get something done. There’s so often another way to do it, sometimes much less involved.

[@Radu]

Glad to hear you learn something from me :-)

[@Colaholiker]

This is absolutely cool. Edit: The text below was written before the "Seizure warning" part was added to the video title. It doesn't apoly anymore but is left here for completeness. /Edit However, unless I missed it, I think this video should have a photosensitivity warning. Some people may have issues watching this flashy-spinny thingy. It may not affect you, it doesn't affect me, but I think this is the kind of image that can trigger anything from discomfort to a seizure in people who are affected...

[@Radu]

Oh... normally, I remember to mention things like that. But it looks like this time I forgot... I added the warning in all caps in the title. Hope it is enough... thank you for pointing this out!

[@Colaholiker]

@@Radu thank you for the quick reaction! I know that adding it to the video after it has been published isn't really possible, so I guess that's the best you can do now. 👍

[@Radu]

@@Colaholiker indeed...

[@ahmad-murery]

That's a realistic spinning wheel indeed, Thanks Radu!

[@Radu]

Happy to hear :-)

[@yusuf.isyaku]

Yea, creative as always. Thank you Radu.

[@Radu]

Thanks for watching :-)

[@MajidFouladpour]

Very interesting! Having two spinning wheels next to each other, one with, and one without alpha, could make the difference clearer.

[@Radu]

Yeah, should have done that in the video. I think I was planning to, while editing, but forgot :-/

[@bwimtg]

really cool effect, creative approach and well explained!

[@Radu]

Glad you think so! :-)

[@pizdaxyu]

sweet, I stroked out 5 times watching this video.. best day ever.

[@Radu]

Really hope you're joking...

[@danser_theplayer01]

I can barely understand canvas, frontend is tough for me. This is very clever.

[@Radu]

If frontend is something you want to learn, I'm sure you'll eventually get it :-) just try to stay motivated!

[@justdoeverything8883]

This was awesome! The weird camera effect has to do with shutter speeds. I'm not sure if you're using a webcam or not, but if you have access to shutter speed, you can adjust it to see exactly what your eye is seeing.

[@Radu]

Thanks! Indeed, using a webcam and the settings are quite limited.

[@mr.fabian8471]

thank you so much !!!

[@Radu]

You're welcome! :-)

[@LePhenixGD]

Amazing !

[@Radu]

Glad you think so! :-)

hey can you may a full tutorial on this? like creating wheel with needle, stop and start method and option for snipping effect (wheel stops such focus segments always stays at center of needle), start method can take params (rotation & stopAt (index of segment) so it stops exactly at the index and rotates only the given count) else if not provided stop it when calling stop function. I tried hard to make this effect but there are lot of mathmatical thing involved so i could. I was able to make stop and start with basic linear effect but we cannot choose where to stop or the snip effect. can you please do that? 🙏🙏

[@Radu]

Hey, it wouldn't be very hard, but I wouldn't do it. I don't like apps that control the wheel to stop in a certain way, because it shifts the probabilities from those expressed by the wheel's pie slices. I constantly see these kinds of wheels that for me always land at a 'good luck next time' :-)) even though they're filled with a bunch of other stuff as well. But if I were to implement such a thing... maybe I would consider spinning the wheel in reverse, starting at the desired location and speeding up until some random 'starting point'. The angles would be preprocessed offscreen (in memory) and then the animation would go in reverse. Hope it helps.

@@Radu thanks for the reply at least 😭😭 my boss told me to implement these features I spent some days but could not do it, so in current implementation I provided properties for maxSpeed, initialAngle, initialNeedleAngle, options, rotationDirection, rotationVelocity, (segments)… (not sure if these terms are correct) The much I was able to implement ease-in-out animation starts and ends when button clicked, I tried to implement snipping effect so wheel always stops where needle point at mid of segment (but could do it)… I thought about few approach…keep the wheel spinning at min velocity until it reaches at the destination, another is precaculate stop angle and stops at the position so that it always fall to destination angle (if there were no animation or velocity to would be too easy) but because velocity keep increasing it’s very hard to do exact calculation. It would be easy with html, css but the design I already created in canvas and on canvas it’s so much configurable. angle += velocity velocity += rotationVelocity And off course it would be easy for you but I agree with the point “good luck next time” 😂😂

[@Radu]

Well in that approach, it sounds to me like you would need to use integrals... Did you consider the 'reverse approach' I proposed earlier? It's much simpler to do, I think.

@@Radu so when starts “do the ease on reverse same while stopping going forward with ease and coming back to destination? Yeah it sound easy. Will try to do it. Thank you so much radu

[@Radu]

Yeah, there are often many ways to get to the same result. Some are more complex than others... some are more clever than others :-) you can always try different things.

[@ColdStoneBoy]

Cool！！！👍

[@Radu]

Thanks :-)

[@havefun5519]

Cool video.

[@Radu]

Thanks! :-)

[@MadaraAzukar]

😮

[@Radu]

:-)

[@ChandrashekarCN]

💖💖💖💖

[@Radu]

🙏

[@TrainaFelipe]

🥰

[@Radu]

:-)

[@Deditzy.]

“Get your editor ready for a spin” => return like;

[@Radu]

:-D

[@FreeTrial0315]

Can you create a full stack project ,online IDE that I install any dependencies like react,vite node js express and all. Please not ignore the project I know it take time months to create something like that but it really learn the corce concepts of programming.

[@Radu]

My live series where we build the advanced drawing app is the closest to what you describe. I don't want to start another project as ambitious as that.