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.
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
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
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 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:
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
Without inertia, B would simply
jump directly to T, riding it piggyback:
would become Bold
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