This really awesome, I just coded along with your video but It didn't worked. Also its has no error. Initially dot's like line (" \" ) appeared in TOP to BOTTOM(Y axis to X) after Image appeared with not action. And then nothing happened. Can I get a github link for learning.
i have a really good computer but still for some reason this code you wrote here lags a lot when hovering over the picture + moving the particles around, but when its on the frontend expert site there is no lag
Yeah IIRC there were issues with that when they first made the FrontendExpert one and it's since been optimized a bit. The simplest optimization that comes to mind would be to just make the individual circles bigger and/or lower the frame rate so there's less calculations to make. You could also try to be smarter about which ones need to be updated, when they need to be updated, etc.
Ofc it will lag. Making optimization mentioned above, about resting pixels, a good way to spend a time to nowhere. Any rasterization algos in JS, per pixel jobs, a very bad idea. Like smashing thausands stones with one hummer. They should be placed in special instrument like pressing mechanism. I mean GPU. You HAVE TO use shaders or don't do it at all. And even more, you MAY NOT teach to hit every stone by hammer, it's a kind of crime in development.
We have a free CSS animation video on FrontendExpert (linked in the description) that can be a good starting place just to learn the basics of how animations work. Beyond that, I'm sure there's some great tutorials on RU-vid and whatnot, but it mostly comes down to practice. There's nothing all that unique about animation code compared to other DOM manipulation code. I think the difficulty is more about deciding what to code to make the design look good, which beyond some design principles is mostly a skill learned through practice.
@@kusalghosh7848best way to study this magic is shadertoy (google it). Also I can recommend "The Art of Code" youtube channel and work of Inigo Quilez. He has a lot of publications and hints over the web. And forget about CSS/JS tricks. They are specialized for layout, coloring and compositional purposes. Maybe some basic color/size/transform transitions. Using CSS/JS tools for pixelwork, it's huge shame in the eyes of real experts, but huge respect from stupid (sorry) people. Last one will give a lot of lies like "you're smart" and some and these lies can bury you alive in illusions. Silent degradation with proud face.
Frontend devs may like it (me included) but the average user doesn’t care about this stuff at all. I have seen sites with all bangs and whistles being replaced with plain sites because of this.
