Table of Contents

The instagram period (aka, I've gone loopy)

For these sketches I started using both the live p5.js editor and instagram for publishing. I wasn't as good about keeping the source organized, so I'm still trying to gather things again…


This is an evolution of lines and circles.

I like it, but didn't (yet) know how to make it loop seamlessly.

Seamless Loops

Using this tutorial in processing, and Golan Levin's sketch in processing, started to understand how to make seamlessly looping animations. I took Golan's awesome demo and ported it to p5.js (live demo). This gif made the technique click for me.

The basic idea is think of the random values as locations on a clock face. This gives 1D noise over time (shown in the image above). For 2D you can use 3D noise space and think about a line sweeping through.

There are lots of details, such as how big is the path you are sweeping (changing the smoothness of noise), higher-dimensions, non-circular paths… Math is fun!

Cow Hide Blob

My first code using noise to build a seamless repeating animation successfully!

While it is seamless, the rate of change on the left vs right side feels dramatically different. That is because I increased the size of the radius of the circular path (see Seamless Loops). To have a more uniform feel I would explore changing the size/shape of the paths I'm moving through to generate the random values.

Psychedelic Phyllotactic Spirals

Who doesn't love the golden ratio.

When developing this I built on the looping with noise work yesterday, but was able to spend time on aesthetics.

It was fun developing it as after staring at it for a while it would make my code do interesting optical illusion.

p5js code (change noiseSeed to see more variations)

Phyllotatactic Spirals 2

Added seamless noise to the angle I rotate by. As well as use alpha between each frame to give blur (instead of clearing each frame)

It is interesing how different these look on the phone instead of my computer screen. On my computer I loved how sometimes the dots created a blurred line, other times it was almost a halftone pattern.

Phyllotatactic Spirals 3

A calmer creation


Staying with calmness but adding a rainbow as my daughters love rainbows :)

Circle Rainbow Flag v0

I wasn't able to figure out how to get p5.js to join the first and last point in the circle (hence the lines in the bottom)

I gave up (for now)

Color Worms

This is an evolution of Wind and rainbow series. This piece pushed my understanding of using noise.


My five year old said that. So I guess it is time to publish.

I messed up seamlessness … ugh

Rainbow Circle

Figured out the "not being seamless bug" in Wow (the period of components were divisors of 360 ~ the number of frames in my animations)

Instead of color being fixed (edge to edge being the entire hue spectrum), i mapped it to the circle. Gives more variation in the colors in any given frame

Rainbow Thinner

Thinner, more, alternating directions. I like this composition better than Rainbow Circle

Rainbow Dots

Feels like Android bootscreen. Not sure if that is good or bad.

Rainbow Dots 2

Explored size and timing

Blue Rose

This is a variation of Circle Rainbow Flag v0. Still didn't figure out how to make wobbly circle in p5js…

Blue Blur

1000 "particles" moving in circles.

Blue Drugs

When things rotate a little too fast?

Electric 🌵

Looping highlighting the each stroke

Using Google's quick draw dataset (of cactuses)

Most of the time was spent exploring how to download and use it. Nothing too interesting yet for the actual viz.

Random 🌵

Randomize connecting points in Google quickdraw cactus set

Torus Worm

Starting to exploring using WEBGL backend for p5js (used 3d materials example at p5js site as my tutorial)

live version

Worm Swimming

Umi Worm

Sand Worm

First attempt at "grains of sand" from @inconvergent writings in #p5js

I used webgl backend for p5 and so each line is composed of lots of boxes

Red Sand Worms

Switched to non webgl where I know more about how to ensure colors act the way I want.

Still iterating on Sand Worm

Black Sand Worm

After a couple days I re-read "grains of sand" and tried again.

I like individual frames, but I'm not happy with the flow between frames of the animation. I'm glad I was able to maintain the seamlessness.

Phyllotatactic Zoomer

Back to ideas from Psychedelic Phyllotactic Spirals… The worm series was getting too slow.

Perhaps these are too fast.

Phyllotatactic Zoomer 2

Ahh, that feels better.


This is a collection of smaller projects. The source is usually called sketch.js and is in the same folder as the url for the project

lines and circles

My first real sketch in p5.js. I was inspired by some album art (although I forget exactly which)

live version

Mouse Color Worm

the color of the "worm" changes to your mouse location.

live version

Video Circles

Creates a half-tone-ish version of the video.

live version

Color Video Circles

Builds upload the Video Circles setting a color of circle to the color of the video pixel.

live version

Video Diff Loop

User presses and holds the `a` and `s` key to record two different loops. A diff is shown between the loops

live version

Video Filters

Exploring filters on video

live version

Video Tinting

Exploring tinting of video

live version

Video Loops

Building upon Video Grid Delay concepts, we keep track of multiple diffent loops.

live version

Video Grid Delay

This code is based on a tutorial by The Coding Train.

live version

Video Grid Random Delay

Like Video Grid Delay but shuffles the delay throughout the grid

live version

Video RGB Circles

Expanding on Video Circles but colors the circle red, green or blue based on which color channel has the largest value for each pixel of video.

live version

Video RGB Loops

Hold R/G/B keys to record 3 different loops. A fourth looping video is created: the R loop provides the R channel. G loop provides G channel, B loop, B channel.

live version

Video WebGL Grid

Use your mouse to move a grid of video cubes

live version

Video WebGL Grid Boxes

Builds a grid of colored cubes based on the video value. The brightness of the color affects the Z-axis location

live version