Moiré Plasma Effect

By Ruud Helderman <r.helderman@hccnet.nl>

Best viewed on a modern desktop browser.

Getting seasick? Read the plain-text version.

Loading...

~ ~ ~ ~ ~ ~ Moiré Plasma Effect ~ ~ ~ ~ ~ ~ by Ruud Helderman ~ ~ ~ ~ ~ ~ Welcome to this demonstration of the Moiré Plasma Effect. The background animation on this page is pure CSS; there is no JavaScript involved (except for the logic to preload the font and images, and calculate the correct image size). ~ ~ ~ ~ ~ ~ Looks great on all web browsers with cutting-edge CSS support. Tested on the latest versions of Google Chrome, Firefox, Opera, Internet Explorer and Edge. I did notice a slight flicker on some displays; might be a video driver issue. On IE and Edge, make sure zoom is 100% or the effect will be ruined. I tried it on some mobile browsers but that was a disaster. ~ ~ ~ ~ ~ ~ The idea behind the effect is simple: take two layers of slightly wavy parallel black lines, and slide them across each other. The colors come from a third layer of red and green lines in the background. ~ ~ ~ ~ ~ ~ This animation started out as a Scratch project in 2015. I wanted to produce an old-school plasma effect, but the Scratch player was too slow for brute-force pixel manipulation. My approach wasn't very scientific, but effective nevertheless: I just started experimenting with GIMP and Scratch until I finally got something I liked. I was surprised to find you could even use multiple colors; most moiré animations I have seen so far are monochrome. I wonder if anyone else ever tried playing with colors; please drop me a line if you know of any such efforts. ~ ~ ~ ~ ~ ~ Plasma effects are really the domain of the 1980s/1990s demoscene. Considering my age, you might assume I was involved, but to be honest, I wasn't. Still, I wanted to keep this demo in style, hence this simple scroller. So here come the obligatory greetings.......... Thanks for your attention, love you all, be good, play nice, don't drink and drive, and so loooooooong. ~ ~ ~ ~ ~ ~
moire1.png moire2.png