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 image to download the PDF.
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 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.
