ZenTrim 4, SVG Edition
I almost forgot to include this early edition of the ZenTrim script. It's a dumbed down version with less features and visuals. It's worth mentioning because it uses an entirely different technology than the later scripts. This is the first script I made for this project, before any of the background gradients or clouds were considered. What you see here is basically all I originally intended to make. My original vision included a way to cut the hair and gravitate the clippings downward. I couldn't think of how to do that, so I stopped with the animated hair.
Instead of using HTML5 canvas, this earliest script animates SVG paths. With 777 paths, it runs smoothly on my phone, so it must not be too heavy. However, HTML5 canvas and Javascript are even easier on system resources. That's why I switched to using canvas a couple days ago.
The basic idea of this script is to simulate various colors of hair and grass. To make it slightly more alive and interesting I added subtle animation to the curves. It took many attempts to get the SVG points and bezier curves to animate correctly. Of course I leveraged AI as I have been on all my recent coding projects.
As far as SVG animations go, I'm fairly happy with the results of this one. Since each line is composed of only 2 nodes, animating many lines still performs well.
There are many configurable parameters in the code, but only the color theme can be controlled through the url. Here's a variation with faster and more extreme movement:
The animation is capable of smoother motion. I included a 20fps throttle to save on CPU cycles (or whatever). The lines move more smoothly on Chrome than Firefox.
I thought I was done with this script until a day or two ago. On a whim I asked AI to convert the whole thing from SVG to HTML5 canvas. That's when I went down the ridiculous rabbit hole of visual enhancements. More on that in the next post.
It was difficult to get AI to produce working code for this project. I spent many hours conversing with AI, telling it precisely how to write the code. SVG animation is more understandable than HTML canvas to me, since I can understand the DOM nature of SVG nodes (though the syntax of paths is lost on me). Prior to this project I have done a few SVG animations, mostly using basic CSS transitions. For more advanced motion, it's easier to have AI write the code.