Week 2 - Variables

Variables: Binaries, Memory and Mutation

Welcome to Week 2! Last week, we drew static shapes on our canvas - they appeared exactly where we told them to appear, with the exact colours and sizes we specified. But what if we want things to change? What if we want our shapes to respond to us, to move, to live?

This week, we’re going to explore one of the most fundamental concepts in programming: variables. But we’re not just going to learn how to use them - we’re going to unpack what they are, what they assume, and what they encode about how we think about memory, change, and categories.

Aside

The word “variable” itself is interesting. It suggests something that varies - but within what constraints? Who decides what can vary and what must remain fixed? These aren’t just technical questions.

Discussion

Before we write any code, let’s sit with these questions:

• When we say something is “variable”, what are we really saying? Variable within what boundaries?
• Think about some of categories in our lives that are treated as fixed versus those that are allowed to change. Who decides which is which?
• In computing, we talk about “memory” - as if the computer remembers like we do. But is it the same? What does it mean for a machine to “remember” something?

Readings:

• Modifying the Universal by Pierrot, Snelting, and Roscam Abbing (pg. 35-55)

• Variables by Derek Robinson in Software Studies: A Lexicon

Workshop

Variables: Containers, Categories, and Control

Let’s start with last week’s rectangle:

function setup() {
    createCanvas(400, 400);
    background(220);
    rect(200, 200, 100, 100);
}

What if we wanted to change the size of this rectangle? We’d have to manually change those numbers - the 100, 100. But what if we could give that size a name? What if we could say “let the size be 100” and then use “size” whenever we need it?

That’s what variables do. But let’s be precise about what’s happening here. We’re creating an abstraction - a named container that holds a value. And in doing so, we’re making decisions about:

• What deserves a name
• What is allowed to change
• What must be explicitly stated versus what remains implicit

Declaring Variables: let and const

In JavaScript (and therefore in p5.js), we have two main ways to create variables: let and const.

let - for things we permit to change

let boxSize = 100;

const - for things we declare unchangeable

const CANVAS_SIZE = 400;

Notice the language here. let - as in “let it be”. const - short for “constant”, meaning unchanging. But who decides what’s constant? In our code, we do. But in the systems we build, those decisions have consequences.

Let’s rewrite our rectangle example:

function setup() {
    const CANVAS_SIZE = 400;
    let boxSize = 100;

    createCanvas(CANVAS_SIZE, CANVAS_SIZE);
    background(220);
    rect(200, 200, boxSize, boxSize);
}

Now boxSize is variable - it can change. But CANVAS_SIZE is constant - we’ve declared it immutable. These are our rules, our little universe.

Note

Also note how each of those variable names are cased. Some in lower-upper, some in all caps. This is what we casing. Different programming languages different styles and different programmers have different preferences. But there are some conventions that are followed more generally. Within JavaScript, we use camelCase for variables and constants.

• camelCase: the variable name starts with a lower case letter and each subsequent word is capitalised. For example, boxSize, createCanvas etc.
• ALLCAPS: this is more generally for constants (across a few different programming languages). For example, CANVAS_SIZE, MAX_VALUE etc.

Following these conventions is not mandatory - your code will still work without any issues if you don’t do this. It’s considered a good practice, especially when other people are looking at your code - to help with code readability. But you are the programmer, the code you write should work for you firstly.

One more note

Variable names are also not limited to these conventions - you can name them anything you want. How does your code look like if your variable names are more poetic? Along with the visual sketch you make with the code, can your code itself be read out as a poem, or a story, or a song?

Go through these works by Winnie - Vocable Code, a lecture performance in six parts

Memory: Where Do Variables Live?

When we write let boxSize = 100, something interesting happens in the computer’s memory. The computer allocates a small piece of memory - think of it as a tiny box - and puts the number 100 in it. Then it creates a label, “boxSize”, that points to that location.

But here’s what’s fascinating and troubling: the computer doesn’t actually store “100” the way we think of it. It stores a binary representation - 01100100 - a series of electrical charges that are either on or off. Everything is reduced to 1s and 0s. Every nuance, every variation, every shade of gray gets converted into binary. On or off. True or false.

This is what Pierrot, Snelting, and Roscam Abbing talk about when they discuss the “universal” in computing. There’s an assumption that everything can be reduced, categorized, made discrete.

function setup() {
    let boxSize = 100;
    let xPosition = 200;
    let isVisible = true;
}

Primitive Data Types: Categories of Information

JavaScript (like most programming languages) classifies data into types. Three of the most basic types are:

number - for numeric values

let age = 25;
let temperature = -3.5;
let pixels = 1920;

string - for text

let name = "Ada";
let feeling = "uncertain";
let color = "#FF0000";

Strings must always be contained within a set of quotation marks - either single or double (but not both). And all the text within those quotes is considered as the string. For example, "Ada" is a string, "uncertain" is a string, "#FF0000" is a string.

"My name is Ada' is not a string (mismatched quotes); "My name is Ada" is a string.

boolean - for true/false values

let isPressed = false;
let isVisible = true;
let isComplete = false;

Note

There’s something almost unsettling about the boolean. Everything must be true or false. On or off. There’s no maybe, no sometimes, no “it depends”. This is the binary logic at the heart of computing.

We can check what type something is using typeof:

function setup() {
    let size = 100;
    let message = "hello";
    let isActive = true;

    console.log(typeof size);      // "number"
    console.log(typeof message);   // "string"
    console.log(typeof isActive);  // "boolean"
}

But here’s a question: why these categories? Why not others? What worldview is encoded in deciding that these are the “primitive” types?

IMPORTANT

console.log is a function that prints the value of a variable to the console. It is a super useful tool for debugging and testing your code.

Anytime we are unsure of what a variable is, or what value it holds, we can use console.log to print it out and see what it is.

In p5.js web editor, it should be visible in the console tab, just on the bottom of the editor. Try printing out the data types using typeof for some of the variables in your code.

Also try printing out what the values are when you try to print the typeof for setup, createCanvas, background, rect etc. What do you think they are?

Updating Variables: Mutation and Change

Variables wouldn’t be variables if they couldn’t change. Let’s explore how we modify them - how we mutate them.

let x = 100;  // x is now 100
x = 200;      // x is now 200
x = x + 50;   // x is now 250

That last line - x = x + 50 - is curious. In mathematics, this would be nonsense. But in programming, the = isn’t about equality. It’s about assignment. It means “take the value on the right, and store it in the variable on the left.”

This is reassignment. This is mutation. We’re changing what x means, what it holds.

Shorthand Operators: The Arithmetic of Mutation

Because updating variables is so common, JavaScript gives us shortcuts:

let x = 100;

// Addition
x = x + 10;  // the explicit way
x += 10;     // the shorthand

// Subtraction
x = x - 5;
x -= 5;

// Increment by 1
x = x + 1;
x += 1;
x++;  // the shortest way

// Decrement by 1
x = x - 1;
x -= 1;
x--;

These operators - +=, -=, ++, -- - are about accumulation and depletion. They’re about counting, tracking, measuring. They assume that change is quantifiable, that it happens in discrete steps.

Note

Built-in Variables: width, height

In last week’s task, creating a self-portrait, you might’ve found it a bit limiting to have all the values calculated and hardcoded as numeric values. Luckily, we don’t always have to do that. p5.js gives us the width and height variables that are automatically created when we create a canvas. And they hold the values of whatever we set using the createCanvas function.

function setup() {
    createCanvas(400, 300);
    background(220);
    // width is now 400
    // height is now 300

    // Draw a line across the full width
    line(0, height/2, width, height/2);
}

These variables are useful because they adapt. If we change our canvas size, width and height automatically update. But they also reveal something: p5.js has made assumptions about what we might need. It’s given us width and height, but not, say, aspectRatio or area. Those decisions shape how we think about our canvas.

---

Adding the draw() function

When we create a new sketch on p5.js, it automatically sets up the boilerplate code for us - with a setup function and a draw function. Last week (and until now), we have only been using setup(), now let’s add back the draw() function to our code and understand how it works.

Frames & Animations

If you have worked with flipbooks or any other digital animation tools, you might have worked with frames. Each frame is an image that is displayed for a certain amount of time, and then the next frame is displayed, and so on. This creates the illusion of motion.

via Giphy

It’s the same principle in p5.js too. We create a series of frames that are displayed one after another in a sequence, and this create the motion.

That is where the draw() function comes in. The draw() function is executed almost 60 times a second, continuously. And it will keep on doing that until we stop the sketch.

But wait, where does the 60 come from?

The 60 comes from the refresh rate of the monitor. Most monitors refresh at 60 frames per second (fps), which means they display a new frame every 1/60th of a second. This is why the draw() function tries to run it 60 times per second. In other words, we are running our sketches at 60fps.

Which also means that there should be some way to adjust that number, right? p5 also makes it easier for us to do that with the frameRate(). Instead of running a sketch at 60fps, if we want to run it in fewer frames per second, we can specify the number.

let x = 0;

function setup() {
    createCanvas(400,400);
    background(155);
}

function draw() {
    circle(x, height/2, 20);
    x++;
    frameRate(10);
}

Now the draw() function in our sketch will only run 10 times per second, instead of the default 60.

Tip

p5.js also gives us the exact frame number the sketch is running at with an inbuilt variable - frameCount. Try printing what data type this is, or see how you can use this in your sketch to create change over time.

Mouse Interaction: Following the Body

Now things get interesting. p5.js also tracks the mouse cursor and gives us variables for its position: mouseX and mouseY.

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    circle(mouseX, mouseY, 50);
}

Run this. Move your mouse. The circle follows you.

What’s happening? Every time draw() runs (60 times per second), p5.js updates mouseX and mouseY with the current cursor position. The circle is drawn at that position. The background is redrawn, erasing the previous frame.

Think about this for a moment. Your body’s movement - the physical gesture of moving your hand - is being continuously sampled, quantized into x and y coordinates, and translated into graphics. Your analog motion becomes digital data. What’s lost in that translation?

There are also pmouseX and pmouseY - the previous mouse position from the last frame.

function setup() {
    createCanvas(400, 400);
    background(220);
}

function draw() {
    // Draw a line from previous position to current position
    line(pmouseX, pmouseY, mouseX, mouseY);
}

Now we’re drawing, creating trails. The computer remembers where we were and connects it to where we are. This is memory made visible.

Dynamic Visuals: Variables Controlling Everything

Let’s combine what we’ve learned. Variables can control any property of a shape - position, size, color.

let circleSize = 20;
let bgColor = 220;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(bgColor);

    // Size follows mouseX
    circleSize = mouseX / 10;
    circle(mouseX, mouseY, circleSize);
}

Here, the circle’s size is determined by the mouse’s x position. Move left, it shrinks. Move right, it grows. We’ve created a relationship between input and output, between gesture and form.

Let’s go further:

let circleSize = 20;
let red = 255;
let blue = 0;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);

    // Map mouse position to size
    circleSize = mouseX / 10;

    // Map mouse position to color
    red = mouseX / 400 * 255;
    blue = mouseY / 400 * 255;

    fill(red, 0, blue);
    circle(mouseX, mouseY, circleSize);
}

Now both size and color respond to our movement. The interface becomes an instrument.

Conditionals: Making Decisions

So far, everything we’ve done happens all the time. But what if we want something to happen only sometimes? What if we want to make decisions?

This is where conditionals come in. Specifically, the if statement.

In simple terms, if something is something, do something.

For example, if the mouse’s x position is greater than 200, set the background to red. That also means that the background will be red only and only when the mouse’s x position is greater than 200. So anything that’s contained within the curly braces will only run when the condition is true.

if (mouseX > 200) {
    background(255, 0, 0);  // red background
}

Let’s see it in action:

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);

    if (mouseX > 200) {
        fill(255, 0, 0);  // red
    } else {
        fill(0, 0, 255);  // blue
    }

    circle(mouseX, mouseY, 50);
}

Now the circle changes color depending on which half of the screen the mouse is on. We’ve divided our space into zones, into categories.

Note

Conditionals are fundamentally about classification. They divide the world into cases: this or that, yes or no, included or excluded. Every if statement draws a boundary.

We can make more complex decisions:

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);

    if (mouseX < 133) {
        fill(255, 0, 0);  // red
    } else if (mouseX < 266) {
        fill(0, 255, 0);  // green
    } else {
        fill(0, 0, 255);  // blue
    }

    circle(mouseX, mouseY, 50);
}

Three zones. Three categories. Three colors. We’ve created a system of classification based on position.

Comparison Operators

Conditionals rely on comparisons. Here are the main operators:

// Greater than
if (x > 100) { }

// Less than
if (x < 100) { }

// Greater than or equal to
if (x >= 100) { }

// Less than or equal to
if (x <= 100) { }

// Equal to (note the double ==)
if (x == 100) { }

// Not equal to
if (x != 100) { }

We can combine conditions:

// AND - both must be true
if (mouseX > 100 && mouseX < 300) {
    // mouse is between 100 and 300
}

// OR - at least one must be true
if (mouseX < 100 || mouseX > 300) {
    // mouse is less than 100 OR greater than 300
}

Bringing It Together

Let’s create something that combines everything we’ve learned:

let circleX = 200;
let circleY = 200;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220, 220, 220, 10);  // slightly transparent background for trails

    // Move circle towards mouse
    if (mouseX > circleX) {
        circleX += 2;
    } else {
        circleX -= 2;
    }

    if (mouseY > circleY) {
        circleY += 2;
    } else {
        circleY -= 2;
    }

    // Color based on distance from mouse
    let distance = dist(circleX, circleY, mouseX, mouseY);
    let colorValue = distance / 2;

    fill(colorValue, 100, 255 - colorValue);
    circle(circleX, circleY, 50);
}

Run this. The circle chases your mouse, but never quite catches it. It leaves trails. Its color changes based on distance. We’ve created a system with its own logic, its own behavior.

But notice what we’ve encoded here: pursuit, distance, color as a function of proximity. These are our decisions, our values made algorithmic.

---

Reflection Questions

As you work with variables this week, consider:

1. What does it mean that everything in computing must be given a type? What gets lost when we categorize things into number, string, boolean?

2. When you use conditionals, you’re creating boundaries and categories. What are the politics of those boundaries? Who or what gets included or excluded?

3. The mouse variables (mouseX, mouseY) translate your physical movement into data. What assumptions does this translation make about bodies, about movement, about interaction?

4. Variables can be changed (let) or fixed (const). In the systems you’re building, what do you choose to make mutable and what do you make constant? Why?

---

Weekly Task #2

Complete both tasks

2a. Sketch (Runme)

Building on last week’s static self-portrait, create a responsive self-portrait that changes based on mouse interaction. Your portrait should use variables to control at least three different properties (position, size, color, etc.) and use conditionals to create at least two different “states” or behaviors.

Consider: what does it mean for a self-portrait to be variable? What aspects of identity are you choosing to make responsive, and what does that say about how you understand yourself in relation to others?

Tip

You can duplicate your sketch from list week on p5.js Web Editor with File > Duplicate. This will keep your previous code and allow you to build on it separately.

The technical requirements:

• Use let to declare variables
• Use mouse variables (mouseX, mouseY, or/and pmouseX, pmouseY) to control visual properties
• Include at least 2 conditional statements that change behavior based on mouse position
• Use at least one operator (+=, -=, ++, or --) to create change over time

2b. Response (Readme)

Pick one of the two readings and write a response (~500 words) that discusses how it relates to the choices you made in your code.

Make sure to clearly mention the reading you chose.

If you haven’t written a response paper before, here’s a very quick guide to understanding response papers