p5.js demos

by @mattdesl

Some examples using p5.js for generative art, motion graphics, and interactive design.

Idea & layout heavily inspired by Mark Webster's Designing Programs.

A simple circle!

Shape and stroke operations.

transform + blend

Using transforms and blend modes.

Creating a seamless loop with a fixed duration.

Rotating shapes around their centre.

Using linear interpolation (lerp) for animation.

Repeating shapes with a for loop and linearly spacing them.

Using trigonometry to create radial motion.

Spring interpolation with mouse movement.

Creating a pattern with randomly placed rectangles.

line ⟷ circle

Animating from a line to a circle using a polygon function.

Repeating shapes to make a looping hexagonal design.

Using the arc() function to build concentric rings.

Animating grid of line segments with sin().

Using simplex noise to create undulating lines, and handling mouse input.

Recreating Sol LeWitt's "Wall Drawing #130" from 1972.

An advanced example, implementing Jared Tarbell's "Substrate" algorithm in p5.

remix your own