Creative Programming: Fundamentals

Lecture 2 (3 Feb)

Table of contents

• (Re)visiting slides?
• Handing in exercises
• Reference, System Variables, and Recap
  • Do programmers know everything???
  • p5js Reference
  • Slides reference
  • mouseX and mouseY
  • System Variables
  • Recap: Shapes
  • Mathing out
  • Mondrian
  • System Variables + Shapes
  • Your own Mondrian
• Storing and Retrieving Data
  • Exercise 1: Routine
  • Imperative programming
  • Overlapping
  • Drawing multiple lines of text
  • Memorizing
  • Variables
  • Reassigning variables
  • Reassigning variables
  • Data Types: String
  • Data Types: Integer
  • Data Types: Float
  • Data Types: Boolean
  • Using a variable for y position
  • Building the example: variable ball
• Logic
  • Conditional Statements
  • Conditions
  • If statement
  • If statement
  • If-else statement
  • Example: mouse circle
  • Example: two shapes
  • Nesting
  • Conditional operators
  • If else if
  • Storing conditions
  • Building the example: resetting ball
  • Building the example: bouncing ball
• Looping
  • Repeating lines of code
  • For loop
  • Lines example
  • Looping with different update
  • Scope
  • Looping and scope
  • Nesting loops
• Arrays
  • Storing multiple values
  • Accessing array elements
  • Arrays of text
  • Using arrays
  • For loop + array
  • Nesting arrays
  • Building the example: bouncing ball
  • Put arrays and loops to the test!
  • Summary

The first slide of every lecture introduces what we can make with the things we learn this week! This slideshow we will iteratively build up to a bouncing ball sketch that uses variables, conditions, loops, and arrays.

(Re)visiting slides?

This is where you can find the narration notes. Some slides don’t have any notes (especially this first week) as notes are typically reserved for slides that explain technical concepts.

You can jump to any slide with the menu to the (bottom) left.

Did you miss a slide or want to revisit? Open the narration tab while studying to get an explanation of difficult slides.

Handing in exercises

• Programming is all about practice, so that is what the exercises are all about
• You submit on LearnIT the things you want feedback on
• There is a hand-in instruction document available on LearnIT

Reference, System Variables, and Recap

Do programmers know everything???

• Programming is about knowing how to express yourself in a programming language …
• … but you do not need to remember all functions!

p5js Reference

On this slide we actively go to these two reference pages to show how to use the p5js reference. We visit the circle page (https://p5js.org/reference/p5/circle/) and the general page (https://p5js.org/reference/) and just kind of click through. Feel free to explore the reference! This page is super useful.

• Want to draw a circle, but unsure about the arguments? -> Check the p5js reference
• Don’t know how to change the background colour? -> Check the p5js reference

Slides reference

• The slides also contain code examples for many p5js functions
• This week will be very code-heavy, so please refer to the slides and code examples often!
• All code examples are available on GitHub as well. There are over 20 for just this week!

mouseX and mouseY

• Last week we briefly introduced mouseX and mouseY, but what are they exactly?
• According to the p5js reference:
  • A Number system variable that tracks the mouse’s horizontal position.

System Variables

• Named containers that the system manages for us
• Created and managed automatically by p5js

• Examples:
  • mouseX: horizontal position of the mouse
  • mouseY: vertical position of the mouse
  • width: horizontal size of the canvas
  • height: vertical size of the canvas
  • frameCount: amount of times draw() has been called since start

Recap: Shapes

This slide is a quick recap of the shape functions we have seen so far; I recommend going through the previous slides if you want a more in-depth explanation of these functions.

• text(), ellipse(), and rect()
• You need to specify the coordinates (x, y) and the size / contents

Mathing out

Be careful with parentheses here, as they can be confusing. They are required for a lot of mathematical operations to ensure the correct order of operations.

• We can use operators such as +, -, *, and /.
• This allows you to e.g. add an offset to the mouse position
• + can also add strings together

Mondrian

Piet Mondrian was a Dutch painter known for his abstract geometric paintings. He used simple shapes and primary colours to create visually striking compositions. This slide introduces him and his work, as we will be making our own.

System Variables + Shapes

This slide introduces an assignment where we make our own.

• With a bit of creativity we can make an interactive ‘Mondrian’ painting!

Your own Mondrian

This slide introduces an assignment where we make our own.

Class Assignment

Create your own interactive Mondrian painting! In groups of 1-3, make a p5js sketch that draws rectangles (or other shapes) based on the mouse position. Be creative with colours and shapes!

Storing and Retrieving Data

Exercise 1: Routine

• Going back to the first step of exercise 1:
  • Write down a daily routine, step by step
  • You go through these steps every day, in the same order
• How can we apply this to programming?

Imperative programming

• Programming is like a routine
• You tell the computer what to do, step by step
• The computer evaluates the code line by line, top to bottom

Overlapping

Try swapping what shape you draw on which line to see how the order matters.

• When drawing, new shapes go over old shapes
• The order of shapes matter

Drawing multiple lines of text

This slide introduces a sketch that we will keep iterating on throughout the rest of the lecture.

• Per line we can use a text() call
• We need to manually space these 50 pixels vertically apart

Memorizing

• What if we want to draw more lines?
• We would need to write more text() calls and calculate the y position each time
• This is tedious and error-prone

Variables

Variables are named containers for data; so we basically give a name to a value so we can refer to it later. On this slide we define the interestingNumber to be 42. Now we can use interestingNumber in our code instead of having to write 42 every time. Variables can also be updated (next slide) which is where their real power comes from. You may find var and const in other code examples, but these are not so relevant right now. Just focus on let for now.

• A variable is a named container for data

let interestingNumber = 42;

• Here we have used let to create a variable named interestingNumber that contains the number 42
• We can now use interestingNumber in our code instead of having to write 42 every time
• You can store anything in a variable: numbers, text, etc.

Reassigning variables

As someone mentioned during the lecture, javascript allows you to re-declare variables that have not been declared (with let).

This can lead to confusing code, though, and unexpected behaviour. Always use let once when you first create the variable.

• We can change the contents of a variable at any time
• This is called reassigning the variable
• We only use let once, when we first create the variable

Reassigning variables

• interestingNumber = 100; reassigns the variable to now contain 100
• There are also shorthand operators to update number variables:
  • interestingNumber++; increases the variable by 1
  • interestingNumber--; decreases the variable by 1
  • interestingNumber += 5; increases the variable by 5
  • interestingNumber -= 2; decreases the variable by 2
  • interestingNumber *= 3; multiplies the variable by 3
  • interestingNumber /= 4; divides the variable by 4

Data Types: String

These data types come as a bit of an intermezzo here, but they are important to understand before we continue with variables and later arrays.

• We have seen the string data type before
• Strings are sequences of characters, enclosed in quotes '' or ""

let greeting = "Hello, world!";

Data Types: Integer

These data types come as a bit of an intermezzo here, but they are important to understand before we continue with variables and later arrays.

• An integer is a whole number (no decimal point)
• They can be positive, negative, or 0
• You can convert other types to integers using int()

let wholeNumber = 42;
let convertedNumber = int("123"); // converts string to integer

Data Types: Float

These data types come as a bit of an intermezzo here, but they are important to understand before we continue with variables and later arrays. Floats can be a bit tricky because of how computers store them, but for now just understand that they are numbers with decimal points.

• A float (floating-point number) is a number with a decimal point
• They can also be positive, negative, or 0
• You can convert other types to floats using float()
• round(), floor(), and ceil() can round, round down, and round up floats to integers, respectively

let decimalNumber = 3.14;
let convertedFloat = float("3.14"); // converts string to float
let roundedNumber = round(3.7); // rounds to 4

Data Types: Boolean

These data types come as a bit of an intermezzo here, but they are important to understand before we continue with variables and later arrays. Booleans are especially important for the next section on logic.

• A boolean represents a logical value: true or false
• true and false are system keywords, similar to e.g. mouseX and width
• Booleans are often used in conditional statements to control the flow of a program

let isRaining = true;
let isSunny = false;

Using a variable for y position

• We set verticalPosition to 100 at the start
• Each time we draw a line of text, we increase verticalPosition by 50
• If we want more lines we can copy-paste the two lines

Building the example: variable ball

This code example runs for a while already and the ball goes offscreen. If you cannot see the ball make sure to refresh the example by editing the code (for example adding a space).

• Often we want to track the position of something
• Variables allow us to store and update this position over time

Logic

Conditional Statements

• Sometimes we want to only do something if a certain condition is met
  • E.g. reset the ball when it leaves the screen
• This is done with conditional statements

Conditions

• A condition is an expression that is true or false (boolean)
• We can use comparison operators to create conditions:
  • == (equal to)
  • != (not equal to)
  • < (less than)
  • > (greater than)
  • <= (less than or equal to)
  • >= (greater than or equal to)

If statement

Be extra careful with the syntax here. The parentheses and brackets are easy to forget, but they are required for the code to work.

• An if statement checks a condition
• If the condition is true, the code inside the if statement is executed
• In the example below, we check whether mouseX is smaller than 200.

function draw() {
    background(220);
    fill(0, 0, 255); // blue
    
    // Change colour based on mouse position
    if (mouseX < 200) {
        fill(255, 0, 0); // red
    }
    
    ellipse(mouseX, mouseY, 50, 50);
}

If statement

• The evaluated condition is between parentheses ( )
• The code that is executed on true is between brackets { }
• Indentation is not required, but makes code easier to read

function draw() {
    background(220);
    fill(0, 0, 255); // blue
    
    // Change colour based on mouse position
    if (mouseX < 200) {
        fill(255, 0, 0); // red
    }
    
    ellipse(mouseX, mouseY, 50, 50);
}

If-else statement

• What happens if the condition is false?
• We can use an if-else statement to provide alternative code to execute
• True -> do the first thing. False -> do the second thing.

function draw() {
    background(220);
    
    // Change colour based on mouse position
    if (mouseX < 200) {
        fill(255, 0, 0); // red
    } else {
        fill(0, 0, 255); // blue
    }
    
    ellipse(mouseX, mouseY, 50, 50);
}

Example: mouse circle

• Change the circle colour based on mouse position
• If mouseX < 200 -> red
• Else -> blue

Example: two shapes

• Draw a shape based on vertical mouse position
• If mouseY < 200 -> draw ellipse
• Else -> draw rectangle

Nesting

Nesting is a powerful concept that allows us to create complex logic by combining multiple conditions. This is especially useful in scenarios where decisions depend on multiple factors. Keep in mind that when we nest we also increase the indentation level for readability.

• We can use if statements inside other if statements: nesting
• This allows us to check multiple conditions in a structured way

Conditional operators

• We can combine conditions using conditional operators
• Common operators:
  • && (and): both conditions must be true
  • || (or): at least one condition must be true

If else if

• We can chain multiple conditions using if else if statements
• This allows us to check several conditions in sequence

Storing conditions

• We can store the result of a condition in a variable
• This can make code easier to read and manage

Building the example: resetting ball

We keep improving our ball sketch. Refer to the previous ball slide for the previous version.

• We can use conditions to check if the ball goes offscreen
• If it does, we reset its position

Building the example: bouncing ball

We keep improving our ball sketch. Refer to the previous ball slide for the previous version.

• With variables and conditions, we can make the ball bounce off the edges
• Instead of resetting the position, reverse the direction when hitting an edge

Looping

Repeating lines of code

• Remember our text example; we want to draw many lines of text
• Copy-pasting code is tedious and error-prone
• We can use loops to repeat code multiple times

For loop

For loops are major lifesavers for writing readable code. We often need to repeat a task many times, and writing that out manually creates code that is hard to read and maintain. Loops solve this problem by allowing us to express repetition in a concise way. Furthermore, loops allow us to repeat something a dynamic number of times, based on variables or user input.

• A for loop repeats a block of code a specified number of times
• for (initialization; condition; update) { // code to repeat }
  • initialization: set up a variable to track iterations
  • condition: when to stop looping
  • update: change the variable each iteration

Lines example

• By putting our text drawing code inside a for loop, we can draw many lines easily
• In this example, we loop with variable i from 1 to 5

Looping with different update

Keep in mind here that we do not have access to the nice increments for the written sentences, as our incrementing variable goes up by 50 every time. That’s why the sentences are a bit weirdly numbered.

• We can also use a different update step so that we do not need 2 variables

Scope

Scope is one of those concepts that is a bit tricky to grasp at first, but is very important to understand. Variables only exist in the context they are created in, so if you create a variable inside a loop or function, it cannot be accessed outside of it. This is important for avoiding naming conflicts and keeping code organized. It is super natural to get confused about scope when starting out, so don’t worry if it takes a bit of time to fully understand it.

• Scope: Variables defined inside a loop are only accessible inside that loop
• Similarly, variables defined in draw() are not accessible in setup()
• You can define variables outside of functions to give them a broader scope

let firstVar = 5; // global (everywhere) scope

function setup() {
    let secondVar = 10; // local to setup
}

function draw() {
    let thirdVar = 20; // local to draw
}

Looping and scope

• In this example, the variable i is contained within the loop
• We can thus define a new variable i elsewhere without conflict

Nesting loops

Nesting loops is powerful but also a fast way to create very complex code. Be careful when nesting loops, as they can quickly become hard to read and understand. They are typically used for 2D patterns, such as grids or matrices.

• Similar to if statements, we can nest loops inside other loops
• This allows us to create more complex patterns and structures, usually 2D ones

Arrays

Storing multiple values

If you have a decent grasp on what has been discussed so far, you’re doing really well. Arrays are tricky, and even though we introduce them here, we will repeat part of the end of this lecture next week. The idea here is to expose you to arrays, so you can start thinking about them. Don’t worry if you don’t fully understand them yet, especially combined with for-loops.

• Sometimes we want to store multiple values
• We can use an array to store a list of values in a single variable
• An array is created using square brackets [], with values separated by commas ,

let colours = ['red', 'green', 'blue'];

• Here, colours is an array containing three strings: ‘red’, ‘green’, and ‘blue’

Accessing array elements

• We can access individual elements in an array using their index
• Array indices start at 0
• To access the first element, we use arrayName[0], the second element is arrayName[1], and so on

let colours = ['red', 'green', 'blue'];
let firstColour = colours[0]; // 'red'
let secondColour = colours[1]; // 'green'

Arrays of text

• Revisiting our text lines example, we can store the lines in an array
• This allows us to easily manage and access the content of the lines

Using arrays

• Arrays have some useful properties and methods, such as
  • myArray.length gives the number of elements in the array
  • myArray.push(value) adds a new value to the end of the array
  • myArray.pop() removes the last value from the array
  • myArray.sort() sorts the array elements
  • myArray.reverse() reverses the order of the array elements
• Find more in the p5js reference

For loop + array

• Arrays and loops work well together
• We can use a for loop to iterate over the elements of an array

Nesting arrays

• Arrays can also contain other arrays, creating multi-dimensional arrays
• This is useful for storing grid-like data structures

Building the example: bouncing ball

We keep improving our ball sketch. Refer to the previous ball slide for the previous version. This time we replace our definitions with arrays so we can have multiple balls, and we have the draw function contain a for loop to draw all balls.

• Using arrays we can define multiple balls
• We can use a for loop to update and draw all balls

Put arrays and loops to the test!

We ended up not having time to do this in class, but it is a great exercise to practice what we have learned so far. It is quite similar to part 4 of the first exercise; feel free to combine them if you want to practice more.

Class Assignment: Patterns!

1. In a group of 1-3, start by drawing some patterns on paper or a whiteboard (e.g. https://www.tldraw.com)

2. Then, implement these patterns in p5js using loops and arrays where appropriate.

3. Can you make them interactive using mouseX and mouseY?

Summary

• We covered variables, data types, conditional statements, loops, and arrays
• These are fundamental programming concepts that will help you create more complex and interactive sketches
• Practice these concepts; it is a lot for one week, do not be afraid to make mistakes.
• Project groups will be published today.