Tutorial 1: Coding Basics

This is a basic coding tutorial which is for anyone learning how to code, or wanting to be creative in their coding. It will give you the key concepts you will need to code for whatever purpose. From these concepts, you will develop key skills which you can apply in nearly any area you wish, from algorithmic art to games to artificial intelligence. 

This tutorial will take you step by step through the stages of learning. You can work at your own pace; just download the PDFs and use them through printing them off or having them on your desktop as you work through the units. 

The topic is divided into modules, which are in turn divided into units. The best way to learn is by doing and then by playing. As you try out new skills, they become embedded, and so I would encourage you to be creative in your coding and see what you can make. All you can do is succeed in trying. 

Module A: shapes & concepts

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

This first unit is a quick read through the features of the web editor which is where you will be doing all your coding. It will save you time in the long run to familiarise yourself with the buttons and tabs.

Module A Unit #2 your first circle

This may not seem very challenging but using the circle() function means I can introduce you to many coding concepts that you will use in your journey into algorithmic art.

Module A Unit #3 adding RGB

This unit looks at RGB colour, by that we mean red, green and blue. This is how you can create a wide range of colours by mixing these primary colours, in fact you can create over 16 million colours.

Module A Unit #4 lots of lines

We have drawn circles now to introduce lines. To draw a line we need four arguments, these are two sets of coordinates. A set for each end of the line, it is that simple. 

Module A Unit #5 squares and rectangles

There is a lot to pack into this unit. Here we introduce the square and rectangle and show how we can manipulate these shapes, rotating and translating them.

Module A Unit #6 ellipses and triangles

As well as introducing two new shapes we will also explore how to interact with shapes with the mouse, moving and stretching these shapes.

Module A Unit #7 pixels

Every image on your screen or on the canvas is made up of pixels. They are too tiny to be seen individually, even so we can draw pixels (point()) on the canvas.

Module A Unit #8  10PRINT

It comes from an abbreviation of a single line algorithm written in BASIC in the early 1980s: 10 PRINT CHR$(205.5+RND(1)); : GOTO 10. This single line of code produces a random pattern. 

Module B movement and colour

Module B Unit #1 bounce and rotate

In this unit we will get shapes moving and create patterns with some simple algorithms. We will start with moving a circle across a canvas and rotate a baton

Module B Unit #2 orbit and oscillate

Using sine and cosine we will move in a circular motion followed by an introduction to simple harmonic motion (SHM). With these simple algorithms we can create some interesting patterns

Module B Unit #3 text

As well as shapes you can use text, either directly as a string or as a variable value. This gives you many opportunities to manipulate text (words, letters or numbers) or values (numbers)

Module B Unit #4 RGB slider

Although we have already been introduced to RGB colours we can build a slider to generate the colour that we want

Module B Unit #5 HSB colours

HSB is another colour format, where HSB is Hue, Saturation and Brightness. We can only access this format using the colorMode() function

Module B Unit #6 colour chart and picker

Look at two more colour systems, HEX and colour names, also interpolate between two colours and use a colour picker. Finally a list of all the colour names and their colours

Module B Unit #7 arrays

An array is a key and vital part of coding. It is a way of storing data so that it can be accessed, added to or altered at a later date

Module B Unit #8 irregular shapes

Using the vertex() and bezier() functions you can create shapes and patterns that aren’t limited to the primitives shapes

Module B Unit #9 arcs and mapping

This unit explores using the arc() function and introduces mapping

Module B Unit #10 phyllotaxis

Creating a sunflower pattern using maths around the golden ratio

Module C 3D graphics

Module C Unit #1 3D shapes

In p5.js, WEBGL is one of the two available rendering modes, allowing you to create 3D graphics

Module C Unit #2 orbit and smooth

We can improve the smoothness of the shapes and also walk around the shape with the orbit control function

Module C Unit #3 lights and material Part 1

Introducing some different material and lights used in WEBGL for 3D shapes

Module C Unit #4 lights and material Part 2

Offering more materials and lights used in WEBGL for 3D shapes

Module C Unit #5 graphics texture

This is a powerful function that is also extremely fun, you can draw on the faces of a shape while it is moving

Module C Unit #6 cube wave

Creating a moving image of the cube wave and then generating a gif

Module D classes and arrays

Module D Unit #1 functions and classes

Foundational to coding are functions and classes. They are powerful tools which make the code and programming in general come alive.

Module D Unit #2 another class

Another example of using a class approach to coding, creating 200 balls emitting from centre of canvas

Module D Unit #3 an array of objects

In this unit we will mash together arrays and classes with a dash of mouse functions

Module D Unit #4 push and splice

Looking at adding elements to an array and deleting elements, creating bubbles and new functions in classes

Module D Unit #5 the overlap

The tricky task of checking through an array to see if two bubbles are overlapping, not as easy as you might think

Module D Unit #6 pixel arrays

This is a powerful tool when accessing the pixels in an image, this short unit lays the foundation

Module D Unit #7 3D arrays part 1

We can create 3D arrays for objects such as 3D shapes and their position

Module D Unit #8 3D arrays part 2

Developing the theme of 3D arrays a cube of cubes and a spiral of bubbles

Module E important bits and pieces

Module E Unit #1 creating & uploading files

We can upload files such as images and videos, also we can create files to keep our code tidy and readable. You will need this for the other tutorials.