Table of Contents
- The instagram period (aka, I've gone loopy)
- Worm Swimming
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.
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)
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
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
Thinner, more, alternating directions. I like this composition better than Rainbow Circle
Feels like Android bootscreen. Not sure if that is good or bad.
Rainbow Dots 2
Explored size and timing
This is a variation of Circle Rainbow Flag v0. Still didn't figure out how to make wobbly circle in p5js…
1000 "particles" moving in circles.
When things rotate a little too fast?
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.
Randomize connecting points in Google quickdraw cactus set
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.
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)
Mouse Color Worm
the color of the "worm" changes to your mouse location.
Creates a half-tone-ish version of the video.
Color Video Circles
Video Diff Loop
User presses and holds the `a` and `s` key to record two different loops. A diff is shown between the loops
Exploring filters on video
Exploring tinting of video
Video Grid Random Delay
Video RGB Circles
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.
Video WebGL Grid
Use your mouse to move a grid of video cubes
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