Revising Basics (Part 3)

This blog entry is all about variables and how to define and use them. Essentially, there are two types of variables: built-in variables and variables that you define yourself. Built-in variables are variables that Processing has already stored and are ready to be used right away. This means that they don’t have to be defined at all.

Let’s start with the built-in variables. For example, there is width and height. These can be used as variables and Processing will replace them by the current width or height of the canvas. However, for this variable to work you must define the size of the canvas beforehand, as mentioned in an earlier blog post.

EXAMPLE:
ellipse(width/2, height/2, 40, 40);

Another built-in variables are the variables to use the position of the mouse. They are called mouseX and mouseY. By placing these variables in the code, Processing detects the current position of your mouse and transfers the value to the code. If this built-in variable is used in the setup section, the mouse’s position is retrieved only once. However, if the variable is placed within the draw section, Processing evaluates the mouse’s position over and over again. This makes your program a dynamic one.

EXAMPLE:
ellipse(mouseX, mouseY, 40, 40);

A good way to bring some randomness into your program is to use the variable random. It can just be placed where other built-in or self-created variables are placed. On thing to consider is that it is essentially a function that requires arguments. In this case the range of values, that should be available for Processing to choose randomly from, must be indicated. Within the parentheses after this function, the minimal and maximal border must be inserted.

EXAMPLE:
ellipse(random( -2, 2), 100, 40, 40);

Other than these pre-defined variables, you can create your own quite easily. In order to do this, you must follow three steps: Declare the variable, initialise it and use it. You can declare a variable by firstly determining its type. There are three important variable types: integer, float and sting. Integer (int) refers to an integer number, float describes a decimal number and string refers to words and letters. Decide for the right variable type and place it on top of your code, before the setup section. Right after, you must indicate the name of your variable. It can be called whatever you want it to. 

As a next step, you must initialise the variable. This means that you have to give your variable an initial value. Do this within the setup section. After that, you can use that variable like built-in variables are used.

EXAMPLE:
int exampleVariable;

void setup() {
exampleVariable = 0;
}

Void draw() {
ellipse(exampleVariable, 100, 40, 40);
}

Once you have created a variable (or used built-in ones) you can continuously change them, by e.g. incrementing. To do this, you must indicate the value by which the variable should be incremented or reduced before using the variable. For example, if you increment the x position of a shape, it will move from the left to the right edge of your canvas (if the variable is used within the draw section).

EXAMPLE:
int exampleVariable;

void setup() {
exampleVariable = 0;
}

Void draw() {
exampleVariable = exampleVariable + 1;
ellipse(exampleVariable, 100, 40, 40);
}

Sources:
https://www.youtube.com/playlist?list=PLzJbM9-DyOZyMZzVda3HaWviHqfPiYN7e