Conditionals in a sketch
One common way a conditional is used is to constrain extreme values of occurring. For example take the following code:
float xrect=0;
float yrect=0;
void setup(){
size(200,200);
}
void draw(){
background(255)
rect(xrect,yrect,10,10);
xrect++;
yrect++;
}
In this code the rectangle will move right off the screen.
So if the draw we can add
if(xrect>200){
xrect=0;
yrect=0;
}
Another function, inside Processing we can use is called contrain()
How this works is
xrect=constrain(xrect, 0, 200); <--- This will ensure that the variable xrect always stays between 0 and 200.
float xrect=0;
float yrect=0;
void setup(){
size(200,200);
}
void draw(){
background(255)
rect(xrect,yrect,10,10);
xrect++;
yrect++;
}
In this code the rectangle will move right off the screen.
So if the draw we can add
if(xrect>200){
xrect=0;
yrect=0;
}
Another function, inside Processing we can use is called contrain()
How this works is
xrect=constrain(xrect, 0, 200); <--- This will ensure that the variable xrect always stays between 0 and 200.
We also have logical operators, as seen in Logic lab, such as OR, AND, and NOT. These are used as the following
|| - or (two vertical lines)
&& - and
!-Not
For example, the code
if(mouseX > width/2 && mouseY>height/2){
fill(255);
rect(0,0,20,20);
}
else{
background(255);
}
This code would draw a rectangle if the mouse is on the right side AND on the bottom.
Another example is..
if(!mousePressed){
background(0);
}
else{
background(255);
}
This draws a black back ground if the mouse is NOT pressed, and a white if the mouse is pressed.
TASK:
Write a program that implements a simple rollover. In other words, if the mouse is over a rectangle, the rectangle changes color as seen by the picture below.
|| - or (two vertical lines)
&& - and
!-Not
For example, the code
if(mouseX > width/2 && mouseY>height/2){
fill(255);
rect(0,0,20,20);
}
else{
background(255);
}
This code would draw a rectangle if the mouse is on the right side AND on the bottom.
Another example is..
if(!mousePressed){
background(0);
}
else{
background(255);
}
This draws a black back ground if the mouse is NOT pressed, and a white if the mouse is pressed.
TASK:
Write a program that implements a simple rollover. In other words, if the mouse is over a rectangle, the rectangle changes color as seen by the picture below.
BOOLEAN VARIABLES
Another variable declaration is BOOLEAN. Boolean is used when you want the variable to have a value of either TRUE or FALSE.
For example,
boolean happy; //This creates a variable "happy" that is either true or false.
Copy and paste the following code and run it..
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200,200);
}
void draw() {
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);
}
This example simulates a button connected to a light that is only on when the button is pressed. As soon as you let go, the light goes off . While this might be a perfectly appropriate form of interaction for some instances, it is not what we are really going for in this section.
What we want is a button that operates like a switch; when you flip the switch (press the button), if the light is off , it turns on. If it is on, it turns off . For this to work properly, we must check to see if the mouse is located inside the rectangle inside mousePressed( ) rather than as above in draw( ) . By definition, when the user clicks the mouse, the code inside mousePressed( ) is executed once and only once. When the mouse is clicked, we want the switch to turn on or off (once and only once). We now need to write some code that “ toggles ” the switch, changes its state from on to off , or off to on.
Th is code will go inside mousePressed( ) . If the variable “ button ” equals true, we should set it to false. If it is false, we should set it to true.
TASK
Alter the code so that it works like a light switch. Meaning when you click once it comes on and click again it turns off.
Another variable declaration is BOOLEAN. Boolean is used when you want the variable to have a value of either TRUE or FALSE.
For example,
boolean happy; //This creates a variable "happy" that is either true or false.
Copy and paste the following code and run it..
boolean button = false;
int x = 50;
int y = 50;
int w = 100;
int h = 75;
void setup() {
size(200,200);
}
void draw() {
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);
}
This example simulates a button connected to a light that is only on when the button is pressed. As soon as you let go, the light goes off . While this might be a perfectly appropriate form of interaction for some instances, it is not what we are really going for in this section.
What we want is a button that operates like a switch; when you flip the switch (press the button), if the light is off , it turns on. If it is on, it turns off . For this to work properly, we must check to see if the mouse is located inside the rectangle inside mousePressed( ) rather than as above in draw( ) . By definition, when the user clicks the mouse, the code inside mousePressed( ) is executed once and only once. When the mouse is clicked, we want the switch to turn on or off (once and only once). We now need to write some code that “ toggles ” the switch, changes its state from on to off , or off to on.
Th is code will go inside mousePressed( ) . If the variable “ button ” equals true, we should set it to false. If it is false, we should set it to true.
TASK
Alter the code so that it works like a light switch. Meaning when you click once it comes on and click again it turns off.
To start write a program where a simple shape moves across the screen horizontally from left to right. When it reaches the right edge it reverses direction.
One way is to simply have x increasing by 1, and then decreasing by 1. The easiest way to to do this would be to declare:
int x = 0;
int direction = l;
When it reaches the end of the screen we simply ask
direction = direction * -1;
and add something like
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
Here is an example of the final code
int x = 0;
int speed = 1;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
x = x + speed;
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
// Display circle at x location
stroke(0);
fill(175);
ellipse(x,100,32,32);
}
TASK:
1) Rewrite the code such that the shape moves vertically, changes size, and color as it moves across the screen. Also try to increase/decrease the speed through out the code.
One way is to simply have x increasing by 1, and then decreasing by 1. The easiest way to to do this would be to declare:
int x = 0;
int direction = l;
When it reaches the end of the screen we simply ask
direction = direction * -1;
and add something like
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
Here is an example of the final code
int x = 0;
int speed = 1;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
x = x + speed;
if ((x > width) || (x < 0)) {
speed = speed * -1;
}
// Display circle at x location
stroke(0);
fill(175);
ellipse(x,100,32,32);
}
TASK:
1) Rewrite the code such that the shape moves vertically, changes size, and color as it moves across the screen. Also try to increase/decrease the speed through out the code.
2) Try and write a program such that left and right side start with two different colors and the colors slowly bounce from one side to the other.
3) Write a program where a box follows the outside of the screen, where every time is makes one loop the speed increases.
3) Write a program where a box follows the outside of the screen, where every time is makes one loop the speed increases.
PROJECT:
Create an original sketch using the information learned.
Create an original sketch using the information learned.