JavaScript Beginner Project Tutorial: The Ebbinghaus Illusion

[@Frankslaboratory]

I like when you make projects like this. Always fun to follow along

[@All-about-te]

❤

[@Radu]

Glad to hear :-) Looks like we switched content recently: you do more elaborate projects and I do simpler ones. I will have to catch up on your content after the holiday.

[@alwysrite]

love how you walk though everything from scratch- great stuff as always - thankyou

[@Radu]

Glad you enjoyed it :-)

[@DanielJoseAutodesk]

What crazier thing 😵😵Clearly one has the impression that the central circle changes. But it does NOT change .. How crazy. 😵🤪I liked the tip to put the name of the variables in the body of the call of a function. This makes it much easier to understand the code.😁👍

[@Radu]

Glad you liked the effect and the coding tips :-) Thanks for watching!

[@enjoysharingcaring]

This is the best way, I have ever seen.

[@Radu]

Thanks :-)

[@yusuf.isyaku]

I laughed out loudly when the animation started, it was like magic. Thank you Radu

[@Radu]

Cool :-) Thanks for watching!

[@2difficult2do]

Excellent explanation, clear demonstration and flawless execution I love your videos filled with useful information. Thank you!

[@Radu]

Thank you :-)

[@ahmad-murery]

Using line dashes is a clever idea, Why complicating things when it can done by a couple lines of code. That was a fun little project and I hope you do more stuff like this. Thanks Radu!

[@Radu]

Yeah, it's something more people should know about. Sometimes dashes can be used in creative ways (like I show in my most recent video about the train).

[@paulehrig6414]

Terrific project and design! Your explanation is first rate! Keep making these cool projects!!!

[@Radu]

Thanks, will do! :-)

[@omeralishin]

WOW! Amazing

[@Radu]

Thanks!

[@ur4me0]

Nice title song 😊

[@Radu]

Haha, thanks :-)

[@tebunia]

Thanks!

[@Radu]

Thank you! :-)

[@artby3606]

Thank you 💜💜💜

[@Radu]

You're welcome :-)

[@vladyslav-py-js-cs]

Wonderful lesson😁

[@Radu]

Glad you liked it :-)

[@Abbatyya]

Thank you sir 🫡

[@Radu]

No problem :-)

[@r-i-ch]

Great stuff. I’m now going to be saying the word “lerp “ all the time.😂 Is there an easy way to animate the flowers rotating?

[@dan-florinchereches4892]

I would say that you can try to replace the start and endpoints of the outer circle from 0 to 2PI instead to have a starting point dependant on the t variable. Say you want to have a rotation period T of 20 sec then you can add (t modulo T)/T * 2 * math.pi to both start and endpoints to the arc that has circle dashes on it. Not sure how you do modular arithmetic in Java and too lazy to check.

[@Radu]

Good Idea! @r-i-ch, you can also try using the lineDashOffset property of the context.

[@adilsonbuset738]

Merci beaucoup, professeur Radu. Visual Studio Code ne reconnaît pas le type de canvas HTML. Savez-vous comment résoudre cela ?

[@Radu]

If you want it to do that, you can try doing as instructed here: inspirnathan.com/posts/6-get-intellisense-for-html-canvas

[@adilsonbuset738]

@@Radu Ça a marché. Merci

[@MadaraAzukar]

❤🎉

[@Radu]

:-)

[@FartherOfShaytan]

Wow! Build this themes if you can! ( Vanilla JS with OOP)! 1. Video Player like KZbin (All functionality) (Responsive), (Preview), (Quality change) etc....; 2. Image Editor (Cropper); 3. Video Editor 4. Custom range slider |=============O===============| don't use

[@Radu]

Thanks, but I'm not interested in doing things that are already done (quite well).

[@tithos]

I would call the "pedals" satellites

[@Radu]

Satellites works too :-) But I was referring to 'petals' like those in flowers.

[@scottonanski4173]

HEY! Where's the coding with Radu theme song!?!?!?

[@Radu]

At the start, after I talk for a bit!

[@georgecrisan9499]

why not make this also with html and css only :D ? Great video by the way

[@Radu]

I guess you can, including the animation. Could you even set the number of 'petals' as a parameter? Not sure how to do that (I'm not great at CSS).

[@georgecrisan9499]

@@Radu I understand the context of this project is to learn maths and canvas api. For the sake of discussion, can be done with hardcoded html for that or some lightweight JS script to handle the petals, amending the DOM with some click events. I like this pattern with the animation, I will make it as a Loader for my next personal UI project

[@Radu]

Ah, alright :-)

[@tithos]

looks like the orange circle is raising in the air

[@Radu]

Yeah! Like if you look from above.

[@nishthascoding2889]

You are great

[@Radu]

Thanks :-)

[@All-about-te]

🤍

[@Radu]

👍