Conspiracy Board

Overview

Creating a procedurally generated pixelated collage with Javascript and p5.js

Tools

p5.js

Case Study: Conspiracy Board

Conspiracy Board is a program written in about 400 lines of JavaScript using p5.js. It generates a pixelated pin-up board with documents, photos, sticky notes, and strings. It randomizes many aspects of the drawing each run, but they all share a similar overall look. Since the drawing is made from code, it is easily make changes and try different ideas.

Video Tutorial

Before you dive into reading the code, you can watch this video that walks you through the basics.

Pixelated p5.js

Working on this, I ran into a pretty big hitch: the p5.js noSmooth() function doesn’t actually work as documented! It does disable smoothing images, but shapes and lines are still drawn with anti-aliasing. You can even see this in the example on the documentation page.

After a little digging, I don’t think its possible to get non-anti-aliased shapes and lines in p5.js using the P2D renderer, because the underlying canvas API doesn’t support it.

You can get non-anti-aliased shapes and lines in p5.js using the WEBGL renderer though. Set it up like this:

function setup() {
// use WEBGL + noSmooth() to get non antialiased shapes and lines
pixelDensity(1);
noSmooth();
const mainCanvas = createCanvas(192, 108, WEBGL);

// optionally scale the canvas up so we can see the pixels
mainCanvas.elt.style =
"width: 960px; height: 540px; image-rendering: pixelated";
}

This leads to another hitch though. In WEBGL images are drawn with bilinear filtering (pixel smoothing), even if you call noSmooth() first. Fortunately you can turn this off as well:

function preload() {
myImage = loadImage("myImage.png");
}

function setup() {
p5.instance._curElement
.getTexture(myImage)
.setInterpolation(NEAREST, NEAREST);
}

Here is a demo showing aliased rendering. The critical lines are 17, 18, and 25.

Study the Source

Here is the entire, fully-commented program.