Generative Art

Small effects made with Processing.

Generative art is the common term to define artwork that was created by an autonomous system, like an algorithm implemented on a computer program.

All of these simple examples were created in Processing and are running within a HTML5 canvas credits to Processing.js.

Click an effect to activate it.

Fractal Polygons

Central polygon with a similar one centered on each of its corners. Repeated until a depth limit is reached. Color and polygon size controlled by Perlin noise.


Q/W -> Decrease/Increase number of sides of each polygon.
A/S -> Decrease/Increase depth limit.

Dotted Image

Image drawn recurring to a grid of dots. Dot base size depends on pixel intensity and varies with Perlin noise. Mouse controls a “Lantern” that shows fully sized and colored dots.


Mouse movement -> Move lantern.
Right click -> Change image.

Squared Image

Image drawn recurring to a set of randomly placed and rotated squares. Square color based on the pixel on its center. Square rotation controlled by Perlin noise. Rotation speed and square size can be adjusted with the mouse.


Mouse X -> Change square size.
Mouse Y-> Change rotation speed.
Right click -> Change image.

Fading Grid

Squares disposed on a grid, colored with a base hue. Color saturation varying based on Perlin noise. The squares rotate towards the mouse.


Mouse movement -> Move squares.
Right click -> Change color scheme.

Sphere of Spheres

A group of spheres connected by a string forming a larger sphere. Mouse controls the number of smaller spheres. Color distribution and animations based on Perlin noise.


Mouse X and Y -> Change number of spheres.

3D Lissajous Curve

Lissajous curve rendered with a set of triangles with on edge on the center an the other two following the curve. Perlin noise controls coloring and curve frequency variations on the 3 axis.


Right click and drag mouse -> Rotate object.