Week 2 — Variables, conditionals, random

IAT 806 · Intro to Computing · Fall 2026

Today

  1. Variables
  2. Changing a variable
  3. mouseX and mouseY
  4. Incrementing
  5. Conditionals
  6. random()

1 · Variables

A variable holds a value

let x = 200;
let y = 130;
let size = 80;
  • A variable is a name for a value.
  • let makes a new variable.
  • = puts a value into it.
  • After that, you use the name wherever you want the value.

Using a variable

  • circle(x, y, size) reads the three values.
  • Change a number on a let line. Press ▶ run edits.
  • The code in draw() stays the same. The circle changes.

2 · Changing a variable

Give it a new value

let size = 80;   // make it, set it to 80
size = 160;      // set it to 160
  • Write the name, then =, then the new value.
  • No let the second time. let makes a variable. You only make it once.
  • The old value is gone.

Order matters

  • Code runs from top to bottom.
  • The first circle is drawn while size is 80.
  • Then size becomes 160.
  • The second circle is drawn with 160.

3 · mouseX and mouseY

Variables p5 updates for you

  • mouseX is the mouse’s horizontal position.
  • mouseY is the vertical position.
  • p5 updates them every frame.
  • let x = mouseX copies the current value into x.

Swap them

  • Now x gets mouseY. y gets mouseX.
  • Move the mouse right. The circle moves down.
  • Move the mouse down. The circle moves right.
  • The name x means nothing to the computer. Only the value inside it counts.

4 · Incrementing

Adding to a variable

x = x + 1;
  • The right side runs first. Take the value of x and add 1.
  • The result goes back into x.
  • If x was 10, it is now 11.
x = x + 1;   // these three lines
x += 1;      // all do
x++;         // the same thing

Incrementing in draw()

  • draw() runs about 60 times a second.
  • Each time, x grows by 2.
  • The circle is drawn a little further right each frame. That is motion.
  • Change 2 to 5. Change it to -1.

Where you put let matters

let x = 0;       // outside draw()

function draw() {
  circle(x, 80, 40);
  x = x + 2;
}
function draw() {
  let x = 0;     // inside draw()
  circle(x, 80, 40);
  x = x + 2;
}

Outside draw(), let runs once. x keeps its value between frames. Inside draw(), let runs every frame. x starts at 0 every time.

It keeps going

  • x never stops growing.
  • After 400 the circle is off the canvas. x still grows to 1000, 5000, and on.
  • To stop it or turn it around, the program has to check x and decide. That is a conditional.

5 · Conditionals

if

if (mouseX > 200) {
  fill(230, 80, 60);
}
  • The part in ( ) is the condition.
  • A condition is either true or false.
  • If it is true, the code inside { } runs.
  • If it is false, that code is skipped.

Comparisons

Code True when
a > b a is greater than b
a < b a is less than b
a >= b a is greater than or equal to b
a <= b a is less than or equal to b
a == b a is equal to b
a != b a is not equal to b

One = sets a value. Two == compare two values.

if and else

  • The circle follows the mouse.
  • Left half: the condition is true. The fill is orange.
  • Right half: the condition is false. The else part runs. The fill is blue.
  • Exactly one of the two blocks runs.

else if

  • The conditions are checked in order, from the top.
  • The first one that is true runs. The rest are skipped.
  • else runs only if none of them were true.
  • Top third orange. Middle third yellow. Bottom third blue.

Back to the moving circle

  • Every frame, x grows by 3.
  • Every frame, the if checks whether x is past the right edge.
  • When it is, x goes back to 0.
  • The circle starts again from the left.

And: &&

  • && joins two conditions.
  • The whole thing is true only if both sides are true.
  • Here the mouse has to be right of 100 and left of 300.
  • The circle turns green between those two lines.
  • Add && mouseY > 60 && mouseY < 200 to check the whole box.

Or: ||

  • || also joins two conditions.
  • The whole thing is true if either side is true.
  • Here the mouse can be in the left strip or the right strip.
  • The circle turns orange in either strip.

&& and || side by side

a b a && b a || b
true true true true
true false false true
false true false true
false false false false

&& needs both. || needs one.

6 · random()

A different number each time

  • random() gives a number between 0 and 1.
  • random(10) gives a number between 0 and 10.
  • random(-3, 3) gives a number between -3 and 3.
  • Every call gives a new number.
  • The top value itself never comes out.

A jiggling ball

  • Each frame, x changes by a random amount between -3 and 3.
  • So does y.
  • Sometimes it moves left, sometimes right. Sometimes up, sometimes down.
  • Over many frames the ball wanders.
  • Change 3 to 10. Remove background().

random() with if

  • random() is above 0.5 about half the time.
  • So this is a coin flip, three times a second.
  • Change 0.5 to 0.9. Orange becomes rare.