Molaskes: Paving and Leading the Way

This website has its own screensaver. If you do not want to wait for the screensaver (1 minute on this page, several minutes on all others), you can simply enter "Molaskes" speedily on your keyboard to launch the easteregg version of the screensaver. What you see then is entirely my own work, the graphics, the programming and in particular the mathematics behind it. Description‌ The regular screensaver has 6 balls in 3 colors, the easteregg version has 18 balls in 3 colors plus a special black one with my face. The 3 colors are selected randomly out of a set of 6 (red, green, blue, orange, cyan, purple). Likewise, there are 3 versions of the easteregg extra ball. The screensaver is terminated when you enter any key (except Tab) or hit the flying cartoon image with your mouse crosshairs. How it works‌ The cartoon image and the balls are PNG images‌ (PNG offers a transparency channel and does not reduce the picture quality) which are moved across the screen through CSS positioning, animated by a JavaScript timer. Here is the red ball image as an example: ‌ And here it is animated: ‌ The threedimensional impression‌ is created by manipulating the size (stretch or shrink) of the balls and altering their CSS z-index value. The same red ball image, scaled to different sizes by your webbrowser via CSS: ‌ The size being animated: ‌ And this combined with movement: ‌ The z-index CSS property defines in which order elements are drawn over each other, which creates the third dimension. The cartoon image serves as a reference point here:‌ The motion blur is achieved by simply following the ball with two transparent versions of itself. Here are the three red ball versions: ‌ Their transparency is 0 vs 50 vs 75 %. Here is movement again without motion blur: ‌ And now with motion blur: ‌ Finally, the smooth organic movement: The balls actually follow invisible virtual points that move in a simple, non-organic, linear fashion, zigzagging slowly over the screen in a randomized pattern. But the visible balls follow them with a kind of mass inertia, implemented as an infinite-reponse low-pass filter (IRLPF). Let T be the virtual target point position and B will represent its following ball, then the first thing we need to do in each animation step is to determine where B is drawn to, its target vector V_t: ‌ Without inertia, B would simply jump directly to T, riding it piggyback: B_new would become B_old+(T-B_old) =T. Thus, we need to introduce the actual movement vector V_m‌ that will animate the ball after it has been influenced by V_t, with a an inertia factor F that can be set between 0 (no inertia, piggyback) and 1 (absolute inertia, immobile): In scientific terms, this constitues an IRLPF (infinite-reponse low-pass filter), as mentioned above. Here is how that looks like, with our red ball following T represented by a green ball, first with F=0.95 (95 % inertia): ‌ As the animation is high-frequency, even such a high inertia is still almost piggyback riding. Let's increase F to 99 % inertia: ‌ That looks a little more interesting, but we could increase it further, let's take 99.8 %: ‌ Now that is smooth and organic. If we overdo it, even just a little bit, the animation goes crazy, by the way. An inertia factor of just 0.1 % more, F=0.999 (instead of the good 0.998 above) results here in the following: ‌ The screensaver/easteregg combines - 3-dimensional CSS animation (x = left, y = top, z = z-index and ball size) - well-balanced IRLPF inertia physics - motion blur animation For more information about the screensaver, and to play with it, check out M‌ →Molaskes.info/PowerLeaf/?/SSE-Screensaver-Easteregg.

Esc Search / Table of Contents

 

Enter ›