2.2 – Variables


  • A variable is a placeholder for a value (think of it like a bucket). You declare what it is, assign it a value, carry it around with you throughout your code and use it when you need to.
  • The power of variable comes when we change (vary) them.
  • First you declare a variable, then you initialize it with a value, then use that variable in one or more place in your code, and finally you’re free to update that variable with a new value and it will change everywhere.

Declaring variables

Variables have a type. Some examples are: 

  • int – whole number
  • float- decimal number
  • boolean- true/false
  • char – character
  • string – a series of characters

Next you give a variable a name. What makes a good variable name??

  • Something very specific to what the variable is going to do (not every variable can or should be called “x”). 
  • They should start with a lower case letter (never a number), and should not contain any special characters other than _underscores_. Use either underscores or camelCase.
  • Don’t use names that are already programmed into Processing like mouseX, width, etc.
Example: int circleX;
Initializing variables

You initialize the variable by assigning it a value:

Example: circleX = 50;

This can actually be done in one line of code, like so:

int circleX = 50;

For now, all variables should be declared at the very top of your program, above setup.

Changing variables

You can assign a new value to a variable at any point in your program. The variable will then be updated everywhere you use it.

How do you change variables? One way is to do math:

circleX = circleX + 1;

If that line of code was in your draw loop, circleX would increase by one every time Processing loops through the draw loop, so it would increase by 30 every second!


random() is a function that we can call. Unlike the other functions we’ve seen before, random doesn’t draw anything to the screen. It’s a special kind of function that returns a number to us. We’ve already seen this with abs() –>the absolute value of a number.  Check out the other functions like this listed on the Processing reference under calculation.

Random takes 1-2 numbers as arguments. If you give it 2 arguments, it will return a random value that’s between those two numbers. Note, the second number must always be larger. Ex: random(10,20);

If you give it 1 argument, it will assume your first argument is 0 and will return a number between 0 and whatever number you give it. Ex: random(100); –> will return a random number between 0 and 100.


Constrain is similar to random in that it will return a number to you. Constrain’s job is just what it sounds like it is- it constrains a value between two numbers.

Reference: constrain(theValueYouWantToConstrain, lowNumber, highNumber);

Example- If I had a sketch that was 600 x 600, at any point my mouseX could be any number between 0 and 600. If I wanted to use the value of mouseX to control something, but I didn’t want it go all the way up to 600 or all the way down to 0, I could constrain the numbers between two points like this:

int x = constrain(mouseX, 100, 200);


Map is similar to constrain. Map re-maps a number range. Why do we want to do this? Let’s say we have the same sketch as above- a 600 x 600 sketch and we want to use the x location of the mouse to control the red value in our background color. Well red only goes from 0 – 255, but the mouseX can go from 0 – 600. This is where map is handy!

Reference: map(theIncomingValueYouWantMapped, theLowestNumberThatValueWillBe, theHighestNumberThatValueWillBe, theLowestNumberYouWantThatValueToBe, theHighestNumberYouWantThatValueToBe);

So for our purposes:

int r = map(mouseX, 0, width, 0, 255);

You still get the full range of 0 – 600, just mapped with values that are appropriate for our red value. 

Leave a Reply
