ZenTrim 3, Parallax Sunset
At this point it might become apparent why I called this group of projects ZenTrim (though the trim aspect doesn't make sense yet). I don't support or promote Buddhism or any religion that strays from Biblical Christianity. So when I use the word "zen" it is in a figurative, cultural sense only. I don't practice any kind of Eastern meditation. I don't believe people can become one with the universe. For me, zen has become a way to describe anything detached from stress and busyness while pursuing peace and relaxation. Images like this script can promote that kind of relaxed mindset.
The recent and seemingly random pursuit of graphical scripts like these reminds me of the old days when I made what I called QBasic screensavers. When I tinkered with programming decades ago I often couldn't think of anything useful to make, so I made colorful, animated lines and shapes similar to the old Window's screensaver Mystify. This is back in the days of MS DOS and Windows 3.1, maybe 95. Back then I actually enjoyed writing code. Not as much these anymore. Asking a machine write the code for me and shaping the results is more my pace these days. I imagine it will be a phase I go through before returning to my more old-fashioned hobbies.Without the help of AI, there is little chance I could write all this code from scratch. These animations involve a considerable amount of fairly complex math that my brain isn't keen at anymore. It's insane that I can write several significant scripts in one or two days with the help of AI. These scripts would probably take me at least some weeks to figure out on my own. Some of them might be beyond my capability entirely, even given an infinite amount of time to work on them.
The next and final (maybe) blog post in this ZenTrim series will show the final purpose for these intermediate scripts. If I continue writing blog posts, I'll try to capture more iterative script snapshots. Each step along the way tells an interesting story, though I don't expect to find interested readers. I might throw some of the scripts on Github as well in case anyone finds them useful or informative in some obscure way.
This sunset with parallax scrolling clouds was an afterthought, an unnecessary addition to the hair and grass trimming script that comes next. I got fixated on making a semi-realistic natural environment as the background. What started as a basic sunset-colored CSS linear-gradient ended up gaining a sun layer, parallax-scrolling cloud layers, and a vignette radial gradient to tie everything together. I tweaked the colors and cloud layer parameters until a semi-realistic illusion appeared. I'm relatively happy with the result, and hopefully I can set it aside rather than adding more pointless features.
I could write a very detailed description about the process I went through to create this script, but I think it would completely bore anyone who might read my blog. I doubt anyone reads my blog anymore, as I basically abandoned it years ago. Writing is therapeutic and a good exercise for my brain, and I no longer care if anyone reads what I write. I got rid of any feedback system like blog comments years ago, so there's no way for people to tell me if they are reading anyway.
Most of these scripts I have written (with AI assistance) have quite a few parameters. For example, each of the parallax scrolling cloud layers has the following configurations:- Speed - How fast the clouds scroll. By varying the speed of each layer, the illusion of perspective is achieved.
- Scale - Similar to the speed, by making the clouds smaller for the lowest layers, those clouds appear more distant.
- Height Percentage - I made the cloud layer height a percentage of the viewport (canvas in this case) so the animation can cover any screen resolution or aspect ratio.
- Overlap - Each cloud layer is a row, and each cloud within the row is a column. Overlap is like applying negative margin in CSS such that the rows and columns overlap to conceal any obvious tiling gaps between them.
- Y Position - The larger, "closer" clouds are near the top, and the smaller, more "distant" clouds are closer to the sun.
I had to fiddle with those parameters a lot before a convincing illusion of depth was achieved. Someone else could use this script to create a different sky effect. I might try to make star maps, for example, so I can recreate the magic of the Starlight Zone in Sonic the Hedgehog.
As already mentioned, I originally intended to generate Perlin noise on the fly so all the imagery would be procedurally generated. The gradients are generated with CSS, and I thought it would be cool to make the clouds with code too. I'm sure there's a way to achieve that, but rendering PNG clouds was a good compromise for performance. I used my Cloud Generator to make 33 unique cloud images that are randomly loaded outside the canvas, much like how side-scrolling video games work. Because there are a good number of images to randomize, it's unlikely any obvious tiling patterns will emerge in the clouds. I could make hundreds of cloud images, but that would be excessive. Jesus lived about 33 years on earth before giving His life for us on the cross (and later rising from the dead). He said "It is finished" around the age of 33... so I sometimes use the number to represent finality. If a smaller number is needed, I sometimes use 7 or 12 - numbers with enormous Biblical meaning as well.
While this animation should look ok on just about any screen, in my opinion it looks best in a landscape 16x9 aspect ratio, like on a computer monitor or big TV. Since it is mostly procedural, and the PNGs are high enough resolution, it looks pretty decent on a big screen.