Art with p5.js

Painting non-orientable surfaces // Part 1

A funky intro to topology and Processing.

Dany Majard
7 min readMay 16, 2022


This is the second article in the “Painting unorientable surfaces” series. Each article is meant to be self-contained but if you want to start with part 0, on basic topology, head this way !

Processing and p5.js

If you have never heard of Processing, you’re in for a treat!! I hope you didn’t plan much this week because you will be drawing, my friend.

Processing / p5.js is a programming language designed at MIT Media lab in 2001 by Ben Fry and Casey Reas in order to help bridge the gap between arts and sciences. Are these big fishes you ask? You’ll find Casey’s name in the genesis of the Arduino, which is no small feat.

Processing allows stunning visuals with very limited coding required. A quick browse of will convince you of its artistic potential. It is amazing for generative art or generative design. Here’s a painting I produced in a minute using a design by Ivan Rudnicky.

Painting produced with Processing, image by Author.

The language is accessible to the very young, due to its simplicity. It is structured around two methods: setup and draw.

When I started using Processing it was in 2004 and you had to download the Processing software to write and run the code in the Processing language. But since then they have started the Processing foundation and with the help of other open source lovers, many working with children, worked on generalizing the work.

The framework is now available in javascript and python !!!

Today we’ll make our first drawing, and the code should work in either platform with minimal modifications.

You can open a tab with the free online editor and you’ll get a brand new project, note that this new project is not blank, it is the minimal template. It contains a few lines of code, the barebone structure of a Processing project. In this post, we’ll dissect it, discuss what you can do in each part and how you can move on from there.

function setup() {
createCanvas(400, 400);
function draw() {…