Learning Processing Chapter 5.6

BOOLEAN VARIABLES:

Just a short post today, lots of work to get on with.

This little segment teaches you how to program a button in processing, a basic of UI design.

Boolean variables are either true or false, nothing in between.

mousePressed is a boolean variable, it is true when a mouse button is pressed and false when they are not. We use this in the button example, this is an emulation of a light switch in a dark room, when you press the switch the light comes on, when you let go, the light goes off and the room goes dark. This is implemented using similar code to the roll-over example:

Shiffmans code:

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

// Example 5-4: Hold down the button
boolean button = false;

int x = 50;
int y = 50;
int w = 100;
int h = 75;

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

void draw() {
// The button is pressed if (mouseX,mouseY) is inside the rectangle and mousePressed is true.
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && mousePressed) {
button = true;
} else {
button = false;
}

if (button) {
background(255);
stroke(0);
} else {
background(0);
stroke(255);
}

fill(175);
rect(x,y,w,h);
}

(Taken from the learning processing site, all credit to Daniel Shiffman)

This code is fairly self-explanatory after the rollover exercises, the only thing I am a little unsure about it is this line:

if (button) {

I assume that (button) is the same as writing (button == true)

looking on this link it appears so, and (!button) would be the same as writing (button == false).

The next step on is to implement a switch feature so that when the button is pressed, it latches and stays on until you click it again. This makes use of putting code in the mousePressed function.

 void mousePressed() {
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && mousePressed) {
button = !button;
}

We just add this to the end of the code and get rid of the first conditional in the draw() loop as it is no longer needed.

Shiffman's Code:

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

// Example 5-5: Button as switch
boolean button = false;

int x = 50;
int y = 50;
int w = 100;
int h = 75;

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

void draw() {
if (button) {
 background(255);
 stroke(0);
} else {
 background(0);
 stroke(255);
}

fill(175);
rect(x,y,w,h);
}

// When the mouse is pressed, the state of the button is toggled.  
// Try moving this code to draw() like in the rollover example. What goes wrong?
void mousePressed() {
if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
 button = !button;
} 
}

So this time, when the mouse is pressed inside the rectangle, button is set to set to the opposite of what it was, if it was true then it would become false and vica versa.

I had to think about this for a bit to understand how it works, Draw is continually looping looking at button's value (true or false).The 'mousePressed' code is only initiated when (as you already knew) the button is pressed, (let's say the original value was false) clicking inside the rectangle changes the code to the opposite of what it was, so, it becomes true. Draw() loops and reads that button == true from the line "if(button) {" and then changes the background colour and stroke colour accordingly.

Here's what it produces:

(Taken from the learning processing site, all credit to Daniel Shiffman)

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);
}

VS. SHIFFMAN'S CODE:

 // 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...

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!

Learning Processing: Chapter 4

CHAPTER 4: Variables

Chapter 4 is the start of 'Lesson 2' focussing on the rest of the basics of programming: variables, conditionals and loops.

A variable is a pointer to a location in the computers memory where a value is stored. This value can vary hence the name. The chapter introduces the different types of variables; int, float, boolean, char, byte, short, long and double. Each should be used in a different circumstance depending on the need, the book explains where to use each one clearly and concisely. Variables can be named, and addressed in a sketch. for example mouseX is an integer storing the mouses X-coordinate - this is a system-wide variable, one already established in processing, these are mainly commonly used variables (e.g. frameCount) and so have been built into the language.

The exercise for using system variables gets you to create a little picture out of basic geometry that will scale itself accordingly when you change the size of the window. I thought that the large square was itself a square and not the bounds of the size therefore my code is somewhat different to the code posted on Shiffmans website as I shall ellaborate on.

Shiffman's Code:



random() is another function you learn how to use in this chapter. It focusses on using it in variables to create movement (e.g. Zoog the alien moving from side to side). The syntax is as follows random(low value bound,high value bound) - It's pretty easy to start implementing random values into your sketches after learning the basics.

Learning Processing: Chapter 3

Chapter 3: 'Interaction'

Chapter 3 covers the 'flow' of a program; what setup() and draw() do and how to use them, mouse interaction, dynamic sketches and finally handling events (mouse clicks and key presses).

I've learnt that setup() is run only once when the sketch is run, it sets the 'initialization code' as Shiffman puts it. After setup(), draw() is run, this runs, then loops back to the start of the code:

void setup() {

//setup code

}

void draw() {

//code which loops

}

The { } host a 'block of code' allowing one to manage code as an individual part of a program.

MOUSE FUNCTIONS:

mouseX - the current mouse x-coordinate

mouseY - the current mouse y-coordinate

pmouseX - the mouse x-coordinate in the previous run through draw()

pmouseY - the mouse y-coordinate in the previous run through draw()

void mousePressed() - function that runs code when a mouse button is pressed

void keyPressed() - function that runs code when a key on the keyboard is pressed

I feel I have a good understanding of all the above, I am starting to realise how one goes about programming and how hard it will be in future implementing features, it shall definitely improve my logic, something I have been looking forward to doing, it's not very often we get stretched in school!

This chapter completes 'Lesson 1' which covers the beginning of learning to program in processing. The end of lesson project is to create a dynamic sketch by interaction of the mouse and a static drawing. I have drawn a few things and added dynamics to them, currently I can't figure out how to export programs that actually display in webpages out, once I figure that out, they will be posted here.

Learning Processing: Chapter 2

Chapter 2 focusses on the topic of 'Processing':
- How to get the IDE

- Introducing the 'sketchbook'

- Interface

- The processing reference

Essentially it is quite a dull chapter if you have already used the Processing IDE before but to those new to it, it will prove a nice introduction as to how to use the IDE and the reference.

One problem I have found is with 'publishing' my programs, when I export them, and I have a folder containing the code and index.html, when I open index.html I don't see my program, the layout is how it should be but just a box where my program should display. I'm not sure what is causing this problem so I may have a browse on the processing forums to try and find a remedy to this problem!

Learning Processing: Chapter 1

I've picked up another book to delve into, I've always wanted to learn to program, 'Processing' seemed the logical choice Arduino (the programming language) is based on processing so I shall get a better understanding of syntax and how programs are written including the logic behind how they are structured (I've always been fascinated by this), thus giving me a step up when I go back to microcontrollers (after finishing this & Make: Electronics).

The book is called "Learning Processing" by Daniel Shiffman

http://www.learningprocessing.com/

A few things drew me to this book, I like how it really takes you from not knowing a thing about programming, to a decent foundation. I think it is very important to learn the theory so when it comes to learning different languages you still have a thorough understanding of the paradigm but you only have to pick up the new aspects of the language.

Processing is a language based on visual interaction vs text-based interaction. A program is written with text, displayed using visual then can be interacted with via mouse clicks (amongst other devices). Text-based languages operate by being written in text, producing text and then being interacted with by more text. Enough rambling, onto the first chapter...

CHAPTER 1: Pixels

This chapter focuses on 'Pixels', it describes how to draw some basic euclidean shapes (e.g. lines, circles and triangles etc), colour theory (grayscale, RGB, transparency) - that's about it. The book introduces different exercises to have a bash at to make sure you understand and can implement the theory - I personally find this the strong point on the book so far (Yes, I am only on chapter 2 at the moment!)

I've learnt that the grid the computer draws is different to the "Cartesian coordinate system" (The one you use in mathematics at school). The x-axis is drawn from left to right (lower -> higher value. This is the same as in the 'normal' graph system) however the y-axis is drawn from top to bottom, as you go down the y-value increases (not negatively).

I also have learnt how to draw - Rectangles, ellipses, triangles, lines and points, I know how to change line thickness, set the outline to be a different colour, set the inside to be a different colour etc. I don't quite understand how the colour mixing RGB system works yet, the mixing works like mixing lights; I've never really understood how that works thus I will check out a few tuts later on this week on the subject.

At the end of the chapter you have to draw your own 'character' in processing, mine is fairly appalling compared to Shiffman's but it is original and I feel proud to have accomplished something.

I tried to upload the code to openprocessing but it isn't displaying - not too sure why..

Here is the code.