Learning Processing: Chapter 5.1 - 5.3

CHAPTER 5: CONDITIONALS:

So today I taught myself to use conditionals (haven't finished the chapter yet!). Boolean expressions are the foundation of conditionals, a boolean expression is a true/false question, these are the only types of questions computers can answer. An example of a boolean expression:

"15 > 20 false"

In processing there are 3 types of conditionals:

- if statements

e.g. "If x>y do something"

- else statements

e.g. "If x>y (do something), else (do this instead)"

- else if statements

e.g. "If x>y (do something), else if (do this instead), else (quit)"

You can only ever have 1 else and 1 if in a sketch,

Ex 5.1:

(check this out on the open processing website, it needs to be run multiple times to give different background colours and prints stuff in the command line, maybe just DL the code and paste it in processing and run it)

Ex 5.2 gave me a bit of trouble, I couldn't figure out what was wrong in the code on the 2nd problem. I didn't spot two if statements were used vs. 1 if and 1 else (which is what the second column of code uses).

Shiffman's website is pretty great, It's really handy to be able to check out whether you are wrong or right and you can just paste the code if you can't be bothered to write it out (which I don't usually do, I usually think about whats happening when I type it in, tonight I couldn't be bothered though!)

5.3 CONDITIONALS IN A SKETCH

The first part of chapter 5.3 gives you some pseudo code, I wanted to test my coding skills so before turning the page I implemented the steps into code to see how my code compared to Shiffman's.

My Code:

 //set values and types of variable of RGB.

float r = mouseX;
float g = 100;
float b = 150;

// set window size and enable anti-aliasing
void setup() {
size(200,200);
smooth();
}

//start loop
void draw() {

if (r > 255) { //if 'r' is bigger than 255 set it to 255 (i.e. limit it)
r = 255;
}
else if(r < 0) { //if 'r' is smaller than 0 set it to 0 (limit it)
r = 0;
}
else {
println("r = " + r); //print line to debug to make sure 0<r<255
}


if (mouseX <= 100) { //if mouseX is on the left increase 'r' value by 5
r = r + 5;
}
else if (mouseX > 100) { // if mouseX is on the right decrease 'r' value by 5
r = r - 5;
}
background(r,g,b);
}

Vs. Shiffman's code:

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 5-1: Conditionals

// Variables
float r = 150;
float g = 0;
float b = 0;

void setup() {
size(200,200);
}

void draw() {
// Draw stuff
background(r,g,b);
stroke(255);
line(width/2,0,width/2,height);


// If the mouse is on the right side of the screen is equivalent to
// "if mouseX is greater than width divided by 2."
if(mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}

// If r is greater than 255, set it back to 255.
// If r is less than 0, set it back to 0.
if (r > 255) {
r = 255;
} else if (r < 0) {
r = 0;
}
}

Arghh! And then after all that we learn there is a function named "constrain()" which does this all for you e.g. r = constrain(r,0,255);

That would have been far easier, but it's nice to know I understand the concept of how to implement constraints without a specialised function.

Example 5.2 improves upon this last sketch by changing r,g and b. It also makes use of the constrain() function.

Shiffman's code:

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 5-2: More conditionals

// Three variables for the background color.
float r = 0;
float b = 0;
float g = 0;

void setup() {
size(200,200);
}

void draw() {
// Color the background and draw lines to divide the window in quadrants.
background(r,g,b);
stroke(0);
line(width/2,0,width/2,height);
line(0,height/2,width,height/2);

// If the mouse is on the right hand side of the window, increase red.
// Otherwise, it is on the left hand side and decrease red.
if (mouseX > width/2) {
r = r + 1;
} else {
r = r - 1;
}

// If the mouse is on the bottom of the window, increase blue.
// Otherwise, it is on the top and decrease blue.
if (mouseY > height/2) {
b = b + 1;
} else {
b = b - 1;
}

// If the mouse is pressed (using the system variable mousePressed)
if (mousePressed) {
g = g + 1;
} else {
g = g - 1;
}

// Constrain all color values to between 0 and 255.
r = constrain(r,0,255);
g = constrain(g,0,255);
b = constrain(b,0,255);
}

In 5.4 I'll learn about Logical operator (AND, OR, NOT) which looks quite interesting and should hopefully be transferable to logic circuits when I get to them in MAKE: Electronics. This was quite a quite a long chapter so far, it's been hard but rewarding. I'm glad I've tried to implement the examples myself before looking at the code, it makes sure I understand the principles even if it is tough going!