Source code: basic_iteration_circle_noise Built with Processing !
* Relavant course book pages: 37 - 92
Variables are a core component of any programming language. They are used to hold data of various types. The information stored by variables can be changed at will by the programmer, but must adhere to certain rules:
variable type: The first thing to consider with variables is what type of information you will be storing in them. Computers treat different types of data differently, and in general, a variable may only store one type of data. the pertinent types of data for us are:
For the time being, we will be focusing on the types of data that store numbers, namely int, and float.
Variables can be created, or declared, in a number of ways, and in a number of places. Where variables are declared determines where they can be used. Generally, this causes variables to be one of two types:
Global variables: in many cases, you will want everything in your program to see what is stored in a variable, this calls for a global variable. Typically global variables are declared at the very beginning of your program (before the setup() function).
Local Variables: Variables declared inside of any function are only visible to that function and its contents. We will discuss this in detail as we talk about iteration.
Declaring global variables: If we want to create a set of variables to be used to draw a rectangle (instead of typing in numbers by hand each time) we need to create a set of variables to do this. We will want these variables to be global so that they can be accessed by all parts of the program, so we will declare them up-front:
int x = 100;
int y = 100;
int w = 200;
int h = 200;
those 4 lines of code have created four variables of type int to be used later on to draw our rectangle as such:
void setup()
{
size(800,600);
background(255,255,0);
}
void draw()
{
rect(x,y,x+w,y+h);
}
-- as you can see, the change happens at the rect() function. instead of explicitly typing in number, we exchanged it for some variables:
rect ( x, --> x was set at the beginning to be 100, so our upper left is 100px
rect (x,y, --> y, too was set at 100, so our upper left corner is now 100,100
rect(x,y,x+w --> the lower right is now set to x(100) + w(200), or 300
rect(x,y,x+w,y+h) --> the lower right corner is now set to 300, 300
We can now change any of the data in those four variables and change the coordinates of our rectangle.
In that previous rect() function, we completed our first expression. An expression can be simply stated as the act of performing some sort of action (usually mathematic) with or to our stored data. Above, the snippet 'x+w' and 'y+h' are addition expressions that add the data. given that x is storing 100, and w is storing 200, we just did the following '100+200 = 300'. Expressions range from the simple, such as: +, -, *, /, to more complex actions discussed later in the semester.
Incidently, setting our initial variables is also an expression which states x is equal to 100. Some expression examples are:
x = 100; - sets x to 100
x = h+w; this sets x to the sum of h(200) and w(200) or 400;
Caveats: As mentioned above, variables must be typed when they are created (int, float, etc). Which means that there are some limitations as to what can be done to them. For instance, all of our variables so far have been of type int, which means the following would not work:
x = 2.5;
because x is of type int, we can not attempt to store a floating-point number in x. we could however, convert that number to an int (essentially making it 2) by doing the following:
x = int(2.5); --> x would equal 2.
For detailed, umm, details on variables: pp. 37-41
For details on expressions: pp 43-50.
Relavent book pages: 61 - 68
Iteration gets at the heart of what computers do best: namely the repitition of simple tasks over-and-over again very quickly. Iteration put simply is the repetition of simple instructions with the ideal goal of creating something very complex out of many simple things.
for loop - for();
The for loop is at the heart of iteration, it is what tells a program to iterate, or repeat a set of code a set number of times. So; if we wanted to draw our rect 100 times, we coud either write the rect(x,y,x2,y2); code 100 times, or we could do the following:
for(int i = 0; i < 100; i++)
{
rect(x,y,x+w,y+h);
}
Those two lines of code will create 100 boxes. Of course they'll be 100 boxes drawn right on top of eachother, so we won't get anything of interest out of that. To get something more interesting, we'll need to do a little more inside that for loop.
for(int i = 0; i < 100;i++)
{
w = w+3;
h = h+3;
rect(x,y,x+h,y+h);
}
now, each time through the loop, w and h have 3px added to them, therefore, each successive square will be drawn a little larger than the last. The entire code:
//set all our initial variables to 0 to start the squares in the upper-left corner
int x = 0;
int y = 0;
int w = 0;
int h = 0;
void setup()
{
size(600,600);
background(255,255,0);
noLoop();
}
void draw()
{
background(255,255,0);
// let's set the fill of the rect mostly transparent so that we can see through each successive rect to the one below it
fill(255,10);
// our for loop
for(int i = 0; i < 100;i++)
{
w = w+6;
h = h+6;
rect(x,y,x+h,y+h);
}
}
Iteration and the for loop are at the heart of what we will be doing with processing all semester, familiarize yourself with iteration by reading pp 61-68 in the book. Also keep in mind the usefulness of the built-in width and height variables which are there to keep track of how wide and tall your sketch canvas is.
Using random() has its place, but for a little more continuity and control, the Perlin Noise function noise() is often a better way to go. Perlin noise is random in a sense, however it is a randomness with some continuity, transitions from low to high values happen in steps and over time and space, so changes in direction, color, strokeweight, etc can be varied a step at a time instead of jumping erratically from one value to another. The following sketch demonstrates the results of random() (left half of screen) vs. a two-dimensional noise() function. The use of two variables in the noise function allows for the noise to be coherent in both x and y directions.
Source code: rand_v_noise Built with Processing
Another example of random() vs 1-Dimensional noise vs. 2-Dimensional noise. click here.
An example of varying the frequency of noise: click here
