Creative Technologies > Block 1 > Concepts > Variables

Variables

Variables are something you will use all the time when programing. They are a kind of container for different types of data. For each variable you need to specify the type of data it will contain; the name of the variable; and the value to assign to it.
Think of them as jars. Say that you have two jars, one for cookies and one for words, these are the data types. You give each jar a name; cookieJar and jarOfWord. Then you decide what to put in each jar. In cookieJar you put a double chocolate chip cookie and in jarOfWord you put “Arduino”. Now each jar has a value.

You can change the content of the jars, that is the value, at any time. As long as it is of the same type. E.g. you can replace the double chocolate chip with an oreo and “Arduino” with “spaceinvader”.
To make it clearer, write a program that draws two lines again, this time using variables.

Example 1.3

In this example, you will draw two lines, similar to example 1.2, but this time you will use variables to set the coordinates.

Write and run the following code:






New commands


    

  • int variableName = value: Creates a variable of the data type integer. variableName can be any name you choose. value is the value you want your variable to hold.
    • 



How it works


    

  • An integer variable, value1, is declared and given the value 0. Wherever in your code you write value1, this will now mean 0.
    • 

  • Another variable, value2, is declared and given the value 100. Wherever in your code you write value2, this will now mean 100.
    • 

  • A line is drawn from coordinates (value1, value1) = (0, 0), to (value2, value2) = (100, 100).
    • 

  • A second line is drawn from coordinates (value1, value2) = (0, 100), to (value2, value1) = (100, 0).
    • 

  • Change the variable values and see what happens with the lines.
    • 



Data types


The most common data types you will use are the following:


    

  • integer, (int): A whole number, e.g., 4, 99 or 532
    • 

  • float: A decimal number, e.g. 2.76, 8.211 or 900.3
    • 

  • boolean: Can be either true or false
    • 

  • char: A character, e.g., ‘r’, ‘2’ or ‘%’.
    • 

  • String: A sequence of characters, e.g., “Hello.”, “I luv programming!!!” or “&%!@¤”.
    • 



System variables


Processing includes some of the system variables to make them more accessible within your programs. One example is width and height. These variables return the width and height in pixels of your program window.


Example 1.4


In this example, you will draw an ellipse which size depends on the size of the program window.


Write and run the following code:







New commands


    

  • size(windowWidth, windowHeight): Sets the size of the program window in pixels.
    • 

  • ellipse(x, y, xDiameter, yDiameter): draws an ellipse with the center in coordinates x and y. The size is set with xDiameter and yDiameter. When these two parameters are equal, the result is a circle.
    • 

  • width: returns the width of the program window in pixels.
    • 

  • height: returns the height of the program window in pixels.
    • 



How it works


    

  • The program window size is set to 400 x 200 pixels.
    • 

  • An ellipse is drawn with the center point in coordinates (width/2, height/2) = (200, 100). Meaning it will be located in the center of the program window.
    • 

  • The ellipse’s x diameter is set to the same size as the width of the program window = 400 pixels.
    • 

  • The ellipse’s y diameter is set to the same size as the program window height = 200 pixels.
    • 



Result


Using the width and height variables, the ellipse will fit the program window, no matter what size you set the window to. Try it out by changing the window size.


Learn by doing


    

  • Draw a happy face, using lines and ellipses.
    • 

  • Make the happy face scale with the window size.
    •