ZenTrim 5, Finale
Let's get this show on the road. Or rather, let's pack up and "Move along folks, nothing to see here." This script was finished a few days ago. I'm just finally getting around to writing about it. This will be the actual last post in this series.
I had pretty much given up on my original vision to offer a way to trim the hair (or grass). With the former animated SVG version it would have been especially difficult to simulate a cutting action.
I had pretty much moved on from this script to other things when I decided to see if AI could convert the script from SVG to canvas. When I realized it was succeeding at that, I began to add more visuals. First a sunset gradient, then a sun. I couldn't resist the scrolling cloud idea, and that's when all the other cloud-related projects in this blog series spawned.
This final version of the script combines everything I've worked on thus far, while adding a ton of new stuff. First of all, the grass or hair is rendered with HTML canvas, which is a lot smoother than SVG animation. Then comes the trimming action.
I didn't think AI would be smart enough to figure out how to animate the clipping mask and falling clippings. In fact, all my efforts to get it to work weren't going well, but I stubbornly persisted. It took a super long conversation full of AI prompts to get anything even remotely similar to what I hoped for. Then suddenly AI seemed to catch on to what I was trying to accomplish, and it achieved near perfection! The mask cuts the height of the grass by a specified percentage while growing across the screen. The clippings fall down with a gravity force and rotate a bit as they fall.
Even the tops of the grass are somehow natural looking after the cut. I have no clue how AI did that because formerly I was instructing it to use a rectangle clipping mask which produced a perfectly straight edge on the top (not as natural looking). Apparently AI figured out another way, seemingly shrinking the hair as it is cut. I thought of this originally, but I thought it would be too hard to achieve without causing a break in the animation. The only thing that isn't perfect is where the clippings spawn. Ideally they would be above the cut line and fall from there. I decided to quit while I was ahead and not worry about such details. It's good enough, and I've spent too much time on this project already.
To cut the hair or grass, simply click or tap on the screen. After the cutting pass is complete, the script waits 5 seconds and regenerates the hair or grass to its original length, ready to be trimmed again.
Here are all the themes available for clipping:
This whole project is rather silly, but I might use it on a website I'm currently working on. If nothing else, it was a fun exercise of using AI to create some interesting visuals.