UAL CCI: Introduction to Creative Computing 2025: ⚙️ & ✍🏿: Lecture 3: Functions and Drawing.
Back to slide index.

By the end of this lecture, we'll have learnt about:

• Drawing on paper - with me being a drawing robot
• Going from 0 dimensions to 1 dimension to 2 dimensions
• Drawing shapes in p5.js
• Our first interactive p5.js code

The two main things we are going to think about today are various different functions and thinking in different numbers of dimensions - both feed into how to draw on computers.

Functions are things in JavaScript (and most programming languages) that take an input, do some work and then give an output - or things that you can ask a question of and you'll get an answer. This is the way that you create a function in JavaScript:

function addTwoNumbers(firstValue, secondValue) {
  let answer = firstValue + secondValue;
  return answer;
}
let myAnswer = addTwoNumbers(3, 5);
//myAnswer is now 8

We have a function called addTwoNumbers (camelCase!), which takes two numbers as parameters, adds them together inside the function and then returns the answer. Some functions don't have any inputs and some don't have any outputs, but they all do something in the middle, otherwise there would be no point in calling them. The values you put into parameters are called arguments.

Dimensions could also be thought of as independent variables - like when you are drawing you might think about how far left and right you need to be on a page and (independently) how far up and down you need to be to draw the picture you want to.

I'm going to start by talking about drawing on paper, before looking at how we can draw on a computer using p5.js.

Drawing in black and white (or greyscale) using p5.js needs two things: data types (either variables or constants) and commands (or functions or subroutines).

Let's start with drawing on paper. How many numbers do you need to describe where you are on a piece of paper?

To think about drawing on paper, let's try an exercise. One person is going to be the model, one person is going to be the blind drawing robot and one person is going to be the sighted drawing instruction robot - because this lecture is remote, I'm going to have to play all the roles for you!

• Model - you have to make sure the blind drawing robot doesn't cheat, and pose your hand using a secret number of fingers.
• Blind drawing robot - listen for commands.
• Sighted drawing instruction robot - which command are you going to give first? You aren't allowed to say how many fingers the hand model is holding up, you can only say commands like "take off pen lid" or "move your hand down until I say stop".
• Let's pick the number 8 to draw.

What was hard (or funny) about that?

I had to be really precise with myself, right? I had to break up something simple like "Draw the number 8" into lots of smaller commands AND I had to have a way of saying where on the page the robot should draw. That's exactly what we are going to have do when we write drawing code in p5.js - a way of saying where we are on the screen and a way of drawing simple shapes that we can build up into more complicated ones.

• Starting with zero spatial (or physical space) dimensions - a point.
• Moving from zero spatial dimensions to one and on to two or going from a point to line to a square.
• Artwork: Flatland by Edwin Abbott Abbott.

• How do we describe points on a square or a flat piece of paper so that other people know where we are describing?
• Formally: (x,y) pairs are used to describe Cartesian co-ordinates in Euclidean space.
• X is for measuring how much left or right on the piece of paper, and Y is for measuring how much up or down on the piece of paper.
• Y on computers is the opposite way to the way you learnt in school - because old computers scanned from the top down using Cathode Ray Tubes.
• Area - if you double the width and the height of a rectangle, area scales x4 NOT x2. Why?
• Pythagoras' theorem is used to work out how big the longest side of a triangle with a right angle in it is - see proofs on Wikipedia page and Better Explained. P.S. Better Explained is AWESOME!

Let's go through the p5.js shape primitives example together. You can use and edit any of the p5.js examples directly on their web pages, but I'm going to copy and paste them into the p5.js editor so you see how to use it.

Let's go through the p5.js data variables example together.

Let's go through this tutorial on Coordinate System and Shapes together. Remember, a Co-ordinate system is a system for describing position.

As well as commands that specify exact positions, you can use transformations to move your digital drawing tool around like I commanded myself earlier. See this Translate example for how to use translate() to do that. You can also rotate() and scale(). N.B. you can use push() and pop() to remember different drawing states.

Now let's go through the p5.js Get Started tutorial together, using the p5.js editor. The most important thing is when we start using variables instead of constant (or fixed) values to draw with. This is the most important thing you are going to learn today and maybe for the whole course - that computers can have values that change over time, and that they'll do the work of changing them for you - allowing you to make INTERACTIVE animations or music or art or anything!

Thanks! Time for a short break!
Back to slide index.