Drawing with Algorithms
Set up the guardrails and let the machine run. It doesn’t grow weary.
The Project
Patterns built by algorithm can be beautiful in print and make a natural fit for backgrounds, screen art, and information-rich display systems. Below are three recent sketches, made while I was searching for backgrounds for a wall-mounted display. Each runs live on the page.
Keep Moving
This visual grows slowly — an accretion of color-shifting threads. A wobbly line is drawn across the canvas as a circle moves steadily on the x axis and bounces 80 times a second on the y axis.
Monday
A message hides in the noise and scrolls past. What does it say? Two things get drawn to this canvas: red horizontal lines every 10 milliseconds, and a single letter every one second.
Sink
The simplest of the three: one line between two random points, 80 times a second. The p5.js random() function makes it easy to pull a color from a list of colors for each line drawn.
Tools and Role
I used the JavaScript visualization library p5.js to manage logic and to interact with the <canvas> element. The familiar setup() / draw() pattern makes it quick to get something interesting on screen.
Role. JavaScript Developer.