Falk Joensson's
Info Website

Misc topics:01. About the screensaver

Congratulations! You just found the easteregg of this website. If you do not want to wait for the screensaver (1 minute on this page, several minutes on all others), you can simply enter "Joensson" 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 main logo "FJ" is opaque for the screensaver but turns semi-transparent for the easteregg. Only the screensaver version carries the text "falkj.info screensaver". Both version are ended when you enter any key (except Tab) or hit the flying "FJ" with your mouse crosshairs. How it works The FJ logo 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: a red ball 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 FJ logo 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: opaque red ball50 % transparent red ball75 % transparent red ball 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 Vt:
Vt := T-Bold
Without inertia, B would simply jump directly to T, riding it piggyback:
Bnew := Bold+Vt
Bnew would become Bold+(T-Bold) =T. Thus, we need to introduce the actual movement vector Vm that will animate the ball after it has been influenced by Vt, with a an inertia factor F that can be set between 0 (no inertia, piggyback) and 1 (absolute inertia, immobile):
Vm, new := Vm, old*F + (1-F)*Vt
Bnew := Bold+Vm
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 F →falkj.info/PowerLeaf/?/SSE-Screensaver-Easteregg.
01. About the screensaver
C Contact + Support
Esc Search / Table of Contents