/p5js-perlin

A suite of looping animations made with p5js and perlin noise

Primary LanguageJavaScriptCreative Commons Attribution 4.0 InternationalCC-BY-4.0

Looping Perlin Noise in p5js

A collection of looping noisy gifs made with p5js

Try it here

What am I looking at?

Perlin noise is a "special function" created by Ken Perlin, an American computer scientist, in 1983.

It can be seen as a particular random function with the peculiarity of generating sequences of smooth pseudo-random values.

But what does it mean?

Well, compared to a more canonical random function, the Perlin noise creates a more organic and natural effect. By tying the noise value to some physical features of each "symbol" in the sketch (like position, rotation or transparency) and by giving them a slight offset over each other, we can create "breathing-like" animations and videos that behave almost like living creatures.

Understood! Is that all?

Well, no.

As a matter of fact, I used a variation of the Perlin noise called Simplex noise that features a 4-dimensional input. By adding time as 3rd and 4th variables, I managed to create looping videos with a set duration.

Well, where can I see it in action?

You can watch some rendered videos down below, on my Instagram page, inside the output/videos folder or by visiting my website to try it out in real time!

Example outputs

first video
second video
third video
fourth video

Rercording

I added a way to save each individual frame in order to make videos. Since I didn't want to put this feature in the final product (I don't think it will be used at all by the casual user), I hardcoded a variable (recording) inside the main.js script. If you want to record your own video, you have to:

  1. Clone the repo
  2. Set the recording variable to true
  3. (optional) change the seed for the random function inside the setNoiseSeed function
  4. Host the website on your machine
  5. Load the page in your browser
  6. Wait a while
  7. Open the .tar files that will be created, extract the frames and stitch them together using a software like FFMPEG

Notes

The JS script might run very slowly on your device. Not much I can do, since p5js isn't the fastest framework available. From now on I'll move to using vanilla JS on HTML5 canvas. It's waaaay faster and it doesn't completely lag out mobile devices

Credits

Open Simplex Noise provided by jwagner in his wonderful repo.

Videos created using ccapture.js by spite for saving frames and FFMPEG for rendering.

This project is distributed under Attribution 4.0 International (CC BY 4.0) license.