Will Price Posts About

Learning Processing: Chapter 5.4-5.5

CHAPTER 5.4 - LOGICAL OPERATORS:
So, what on earth are "logical operators", wikipedia defines them as "A symbol or word used to connect to or more sentences in a grammatically valid way".
Not that I really understand that, for things I don't understand, I find it massively helpful to apply the mathematical paradigm of abstraction, instead of comprehending the (I'm pretty sure it's used in other fields as well, but this is where I first came upon it, just a warning to the pedants!).

So what properties do logical operators have, there are 3:

NOT - !
AND - &&
OR - ||

NOT is used to invert a boolean expression, so if we asked the question "Is the sky blue", NOT would return "false" thus having inverted "true"

AND is used to compare two boolean expressions and only return "true" if both of the 2 expressions are satisfied. For example if we were to ask the question "is the sky blue AND is the sea blue" processing would return "true" if we asked "is the sky blue AND the sea orange" processing would return "false", although one of the expressions is true, the other is false, AND only returns true when both expressions are true.

OR is like AND, however only one of the expressions has to be true to for it to return 'true', for example "is the sky blue OR is the sea orange", this returns 'true' because the first expression is true, even though the second is false.

Looking at what I've just written, that is an incredibly lengthy explanation for such simple concepts, I blame this on wikipedias overly wordy explanation of a 'logical operator' and it being quite late... now with the explanations dispensed, time to document the chapter.


In 5.4 we write a simple program to change a rectangles colour when the mouse is over it. I expanded on this code a bit and implemented a multiple rollover, when the mouse is not on the rectangle, the background is black and the rectangle white. When the mouse is on the rectangle, the background is white and the rectangle black. Hopefully the code is commented well enough for most people to understand!

 /* logical operators in use in a simple sketch, && is AND
|| is OR */

void setup() {
size(200,200); //200x200 canvas
smooth(); //set anti-aliasing
}

void draw() {
background(255); //set backgroudn white
if (mouseX > width/2 && mouseY > width/2) { //if mouse X coord is on the right AND the mouse Y coord is on the bottom half of the canvas
fill(0); //fill rect with black
rect(width/2,height/2,width/2,height/2); //draw rect at bottom right
}
else if (mouseX < width/2 || mouseY < height/2) { //else if the mouse X coord is less than half of the width OR the mouse Y coord is above the middle of the canvas
background(0); //fill background with black
fill(255); //fill rectangle with white
rect(width/2,height/2,width/2,height/2); //draw rect at bottom right
}
}



In 5.5 we learn to implement 'multiple rollovers' Shiffman has provided some pseudocode of his next example, however I decided to implement it myself before going ahead and reading his example, as usual my code is cruder, less well written and much harder to mod, but I'm proud of it, it accomplishes the same thing as Shiffman's code.

MY CODE:

int w = 200; //width of canvas
int h = 200; //height of canvas
int c1 = 255; //colour1 = white
int c2 = 255; //colour2 = white
int c3 = 255; //colour3 = white
int c4 =255; //colour4 = white

void setup() {
size (w,h); //set canvas size
smooth(); //anti-aliasing
rectMode(CORNER);
}

void draw() {
if (mouseX < width/2 && mouseY < height/2) {
c1 = 0;
c2 = 255;
c3 = 255;
c4 = 255;

} else if (mouseX < width/2 && mouseY > height/2){
c1 = 255;
c2 = 255;
c3 = 0;
c4 = 255;

} else if (mouseX > width/2 && mouseY < height/2) {
c1 = 255;
c2 = 0;
c3 = 255;
c4 = 255;

} else if (mouseX > width/2 && mouseY > height/2) {
c1 = 255;
c2 = 255;
c3 = 255;
c4 = 0;
}

background(255); //set white background
fill(c1);
rect(0,0,width/2,height/2);
fill(c2);
rect(width/2,0,width/2,height/2);
fill(c3);
rect(0,height/2,width/2,height/2);
fill(c4);
rect(width/2,height/2,width/2,height/2);

println("X = " + mouseX + " Y = " + mouseY);
}



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

// Example 5-3: Rollovers
void setup() {
size(200,200);
}

void draw() {
background(255);
stroke(0);
line(100,0,100,200);
line(0,100,200,100);

// Fill a black color
noStroke();
fill(0);

// Depending on the mouse location, a different rectangle is displayed.
if (mouseX < 100 && mouseY < 100) {
rect(0,0,100,100);
} else if (mouseX > 100 && mouseY < 100) {
rect(100,0,100,100);
} else if (mouseX < 100 && mouseY > 100) {
rect(0,100,100,100);
} else if (mouseX > 100 && mouseY > 100) {
rect(100,100,100,100);
}
}


Right, I think that's it for tonight...