Making 2D art in Javascript !

With p5.js and Joy Division

Keno Leon
8 min readJul 18, 2023

--

The other day I was in need of a simple javascript library to programmatically make lines and grids, halfway through that project I realized maybe I had enough know how to make a digital art project I’ve had in mind for a while, one that is 100% inspired by Joy Divisions Unknown pleasures album cover ( This one 👇 ) :

My” unoriginal idea was to simply feed an algorithm images and convert them to the above style somehow ( with magic ? ), and yes there’s other projects out there that do this, in fact the style of graphic is called “Joy Plots” or Ridge Line plots and you can find examples here, here, and more accurately here the issue though is that these examples are mostly made by statistical libraries and might not be great case studies if you want to make 2D art and have some web/javascript experience, which will be the focus here, so let’s get started.

— — — — — — — — — — — ⭐️ SUBSCRIBE TO MEDIUM ! ⭐️ — — — — — — — — — — —

In the beginning there were lines

I original started experimenting with a library called paper.js but quickly hit a wall with the API as it didn’t play well with the raster images needed, so I switched to p5.js which solved my issues and its aimed at artists and hobbyists alike, here’s one example of how to make some lines :

// main.js (see dev notes)

import p5 from 'p5';

let sketch = (p) => {
const NUM_LINES = 40; // Number of lines to draw
let LINE_HEIGHT = p.windowHeight / NUM_LINES; // Height of each line
// const LINE_HEIGHT = 6; // Height of each line

let canvas;

p.setup = () => {
canvas = p.createCanvas(p.windowWidth, p.windowHeight);
canvas.parent('myCanvas');
// Set the parent element of the canvas to the div with ID 'myCanvas'
};

p.draw = () => {
p.background(0);
for (let i = 0; i < NUM_LINES; i++) {
const y = i * LINE_HEIGHT;
p.stroke(255, 255, 255);
p.line(0, y, p.width, y);
}
};

p.windowResized = () => {
p.resizeCanvas(p.windowWidth, p.windowHeight);
LINE_HEIGHT = p.windowHeight / NUM_LINES;

}…

--

--