Algorithmic Art Tutorial

Algorithmic Art is a creative coding technique that uses code, simple maths and logic to create engaging static or dynamic images. p5.js, the language it was originally designed for, is the best suited. As a JavaScript library, it can be used in the browser without downloading software. Processing.org has created a brilliant web editor that lets you code in your browser and see the results instantly. Simply type your code and it’s translated into a canvas within the web editor. Click the link or image to download the PDF.

Programme of Study

Module A shapes and loops

Module B colour and movement

Module C 3D shapes and light

Module D classes and arrays

Module E particles and perlin

Module F sound and vision (work in progress)

Module A

Module A introduces you to various shapes at your disposal and also to keep concepts that are key to coding in general.

Module A Unit #1 exploring the p5.js web editor

In this first unit, we’ll quickly go over the web editor’s features, which is where you’ll be writing all your code. Getting to know the buttons and tabs now will save you a lot of time later on!

Module A Unit #2 your first circle

It might not seem like much, but using the circle() function can really open up your creative possibilities as you dive into algorithmic art. Let’s keep things easy to begin with.

Module A Unit #3 adding RGB

This unit is all about RGB colour mode. It stands for red (R), green (G) and blue (B), which are the three primary colours. By mixing these values, you can create a whopping 16 million different colours!

Module A Unit #4 lots of lines

Now that we’ve got a bunch of circles, let’s get creative with lines! We’ll use the line() function, which is pretty straightforward. It takes four arguments: each pair represents the coordinates of the line’s two ends.

Module A Unit #5 squares and rectangles

This unit has a lot to cover! We’ll start by introducing the square and rectangle shapes, and then explore how we can use other helpful functions like rotation and translation to work with them.

Module A Unit #6 ellipses and circles

In addition to showing you these new shapes, we’ll also look at how to use the mouse to move and stretch them.

Module A Unit #7 pixels

Each image on the canvas is composed of tiny pixels. Even though they are so small, we can use the point() function to create or tweak images on the canvas.

Module A Unit #8 10Print

This reminds me of the 1980s, when you could make simple, randomised patterns on basic machines. One such pattern was made with just a single line of code that kept repeating, known as 10PRINT.

Module B

Module B adding to the previous module we will now explore movement and further explore colour

Module B Unit #1 bounce and rotate

In this unit, we’ll explore how shapes move, focusing on their position, speed and how quickly they change speed, whether that’s in a straight line or spinning around.

Module B Unit #2 orbit and oscillate

Let’s explore how to move objects in a circular path using sine and cosine. We’ll also look into simple harmonic motion, which can lead to some fascinating patterns.

Module B Unit #3 text

Besides shapes, you can also use text, either as a string or a number. This opens up lots of ways to play with text whether words, letters or numbers.

Module B Unit #4 RGB slider

Even though we’ve already seen the RGB colour mode, we can also create a slider to make the colour we want.

Module B Unit #5 HSB colours

HSB is simply another way to represent colours. It stands for Hue, Saturation and Brightness. You can get to this format using the colourMode() function.

Module B Unit #6 colour chart and picker

We also have two more colour formats to choose from: HEX and colour names. Plus, we can interpolate between two colours and use a colour picker that is already included. Here is a complete list of the colour names we have.

Module B Unit #7 arrays

Arrays are a fundamental and essential component of coding. They allow us to store data in a structured way, making it easy to access and modify.

Module B Unit #8 irregular shapes

With the vertex() and bezier() functions, you can design shapes and patterns that go beyond the basic shapes.

Module B Unit #9 arcs and mapping

This unit will show you how to use the arc() function and introduce you to the idea of mapping.

Module B Unit #10 phyllotaxis

Let’s explore how maths, especially the golden ratio, can help us create a sunflower pattern!

Module C

Module C now we move from 2D shapes to the wonderful world of 3D shapes

Module C Unit #1 3D shapes

Let’s explore some of the basic shapes in p5.js and see how to bring them to life!

Module C Unit #2 orbit and smooth

We could make the shapes smoother and even walk around them to see them from all sorts of angles.

Module C Unit #3 lights and material part 1

Let’s give our 3D shapes some personality by adding materials and lighting—it will really make them stand out!

Module C Unit #4 lights and material part 2

We can do even more with lights and materials in this unit to make these 3D shapes even more interesting.

Module C Unit #5 graphics texture

This is a rather interesting feature of 3D that is quite fun — you can even draw on the faces of a shape as it moves!

Module C Unit #6 cube wave

Generating a moving image of the cube wave and then creating a GIF.

Module D

Module D introduction to using classes in your coding and more on arrays

Module D Unit #1 functions and classes

Functions and classes are the building blocks of coding. They are like the magic wands that can bring your code to life!

Module D Unit #2 another class

Here’s another instance of using a class-based approach to coding, specifically for creating particles.

Module D Unit #3 an array of objects

In this unit, we’ll be combining arrays and classes, and adding a bit of mouse function magic to the mix.

Module D Unit #4 push and splice

Looking at adding elements to an array, deleting them, new functions in classes, and the like.

Module D Unit #5 the overlap

Checking if two bubbles overlap in an array can be a bit tricky, and it might not be as straightforward as it seems.

Module D Unit #6 pixel arrays

This tool is quite helpful for getting to the pixels in an image on the canvas, and this short unit will give you a good start on that.

Module D Unit #7 arrays part 1

Putting together arrays for 3D objects, making sure they have all the important information.

Module D Unit #8 arrays part 2

With what we learned in the last unit, let’s build a cube made of smaller cubes and a spiral of bubbles!

Module E

Module E This module covers two important concepts for art, they are particles and perlin noise

Module E Unit #1 creating and uploading files

This unit is all about getting ready for the rest of this module. One of p5.js’s great features is the file system, which helps you organise your code nicely.

Module E Unit #2 perlin noise

You’ve already seen random, and this is a different kind that connects to the previous random value. It makes the change flow more smoothly.

Module E Unit #3 2D perlin noise

This takes Perlin noise to a whole new level! In the last unit, we explored one-dimensional noise, and now we’re diving into the fascinating world of two-dimensional noise.

Module E Unit #4 smoke and fire

Imagine bringing a smoke or fire simulation to life using a particle system!

Module E Unit #5 firework display

Using a particle system to create a vibrant firework display.

Module E Unit #6 perlin flowfield

When we use Perlin noise on a flowfield, it can create some rather interesting patterns.

Module F

Module F This module mostly explores using videos, images and sound files. Currently a work in PROGRESS!

Module F Unit #1 the keyboard and mouse

There are a number of useful functions available for the keyboard and mouse that you could make use of in your interactive creative coding.

Module F Unit #2 HTML

Making use of the DOM elements (HTML tags) in p5.js.

Module F Unit #3 video capture (in progress)

Some interesting effects using the webcam.

Module F Unit #4 image files (in progress)

Looking at saving (and loading) images and videos

Module F Unit #5 the sound of music (in progress)

Looking at sound music files.

mp3 music