Remember the Windows 98 Mystify screensaver? I used to stair at when I was young, the colorful outlines bouncing around a black screen, stretching into different shapes and leaving trails behind them. Such a simple thing, but surprisingly fun to watch.

I wanted to see if I could recreate that feeling in JavaScript using PixiJS. Here’s my version:

See the Pen Windows 98 Screensaver by Andy Sciro (@spssciro) on CodePen.

I built this before I was using AI to help write code, so figuring it out was more challenging. Working through it myself was very fun though, and seeing the effect finally come together was especially satisfying.

The idea behind the animation is pretty small: give five points their own directions, move them each frame, and reverse their horizontal or vertical direction when they cross an edge. Connect the points with lines and close the shape.

The trails are the interesting part. Each point keeps a short history of its positions. On every tick, the drawing is cleared and the shapes are redrawn from that history, so you see earlier outlines following the newest one. The colors gradually shift using sine waves.

There are controls in the Pen for speed, the number of outlines, and line thickness. Try changing them and see how different the same little animation can feel.

This reminds me of why I enjoy small JavaScript experiments. You start with something familiar, figure out the pieces that make it work, and suddenly you’ve got a little bit of nostalgia running in the browser.

As always, feel free to open the source on CodePen and fork it! If you like this kind of thing, I also made a bouncing DVD logo in Pixi.js.

See the Pen Bouncing DVD JS logo by Andy Sciro (@spssciro) on CodePen.

Hopefully you know about this bouncing DVD logo screensaver, my mind goes right to watching it in class or seeing it on a bus. Either way over the years its almost become a meme, there’s something just so satisfying about when it hits the corner lol.

Watch it here: Happiness comes from the simple things

(Yes I know the video above is fake, but still thought it really captures the feeling)

With that said, I tried to make it in pixi.js in an afternoon. It surprisingly wasn’t too hard when we utilize pixi.js’s tint api. Essentially though all we need to do is when the logo hits the “wall” just randomly generate a new tint.

If you want to learn more about the tint api you can read more about it here in the docs:

https://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=tinting.js&title=Tinting

As always because its on codepen.io so feel free to fork it! You can view the source here, if you want you can replace the logo (it’s a base64 encoded string), because I’m too cheap for codepen premium!!

When I was a kid I received a basic hobby microscope as a birthday present. I think I spent a whole summer where I would look at anything I could get my hands on. Pond water? Sure let’s check it out. A splinter? Yes. How about sand? Yes I did that too, and while it sounds boring sand is actually pretty interesting under the microscope.

Watch: A Grain of Sand - By Dr. Gary Greenberg - Sandgrains.com

With that said the movement of pond water really left an impression on me. Everything was kinda moving around, alive, a whole world that I never knew was so active (especially because I thought of ponds as stinky and stagnant). It turns out what I was so intrigued with as a child was something called Brownian motion. Here’s a vid about it:

Watch: Random Force & Brownian Motion - Sixty Symbols

A bit more about it (taken from Wikipedia). This motion is named after the botanist Robert Brown, who first described the phenomenon in 1827, while looking through a microscope at pollen of the plant Clarkia pulchella immersed in water.

A quick and dirty recreation of Browian movement in Javascript

Long story short I had some fun playing with the incredible PixiJs and trying to recreate Brownian motion. I consider this a “bar napkin doodle” but the effect is pretty convincing.

Check out the live demo on CodePen: Brownian motion (PixiJS) by Andy Sciro (@spssciro)

The key take away here is just randomizing the x and y values for each tick. The line to really watch is simply this:

X = (Math.random() > 0.5 ? 1 : -1) * Math.random() * amp;

And voila, we get the right wiggle!