Embed Size (px)
DESCRIPTION
use the integer variables mouseX, and mouseY use the boolean variable mousePressed use the functions mouseReleased() and mouseMoved() use the dist() function for getting the distance between two points get used to trying to debug sketches start making interactive Processing sketches feel more confident about writing Processing code At the end of this presentation, you should be able to: Interaction programming DSDN 142 Creative Coding
Citation preview
Interaction programmingDSDN 142 Creative Coding
At the end of this presentation, you should be able to: use the integer variables mouseX, and mouseY use the boolean variable mousePressed use the functions mouseReleased() and mouseMoved() use the dist() function for getting the distance between two points get used to trying to debug sketches start making interactive Processing sketches feel more confident about writing Processing code
Learning Goals
Interaction programmingDSDN 142 Creative Coding
Quick Recap
{ellipse(10,10,50,50);}Grouped code can be named, eg:
Braces are used to group code, eg:
void circle(){ellipse(10,10,50,50);}
Interaction programmingDSDN 142 Creative Coding
Quick Recap II
• When Processing starts it looks for the code that is labeled “setup()” and runs it• Afterwards Processing looks for the code labeled “draw()” and runs it• Whenever you click the mouse, Processing looks for the code labeled “mousePressed()” and runs it• There are others, like mouseMoved(), mouseReleased(), etc.
Interaction programmingDSDN 142 Creative Coding
Exercise 1
Understand this code Move the cursor and notice how the sketch has all the previous ellipses drawn where the mouse was
Modify this code Change the code so that the background gets cleared. You should only see one ellipse at any time
void setup(){ size(100,100);}
void draw(){ ellipse(mouseX,mouseY,25,25);}
End result:
Interaction programmingDSDN 142 Creative Coding
Solution 1 We clear the previous screen by using the background() function.
What are mouseX and mouseY? These are integer variables. Processing sets mouseX and mouseY to the current coordinate of the mouse cursor. These two variables change when all the commands in draw() are completed.
void setup(){ size(100,100);}
void draw(){ background(127); ellipse(mouseX,mouseY,25,25);}
Interaction programmingDSDN 142 Creative Coding
Exercise 2
Quick research There are other mouse variables inside Processing. Go to the Reference and find out about these.
Modify this code Increase the size of the ellipse when the mouse is pressed Hint: You could use an if statement and the mousePressed boolean variable
void setup(){ size(100,100);}
int diameter = 10;
void draw(){ background(127); ellipse(mouseX,mouseY,diameter,diameter); diameter = diameter + 1;}
integers are whole numbers; booleans are true or false values
End result:
Interaction programmingDSDN 142 Creative Coding
Solution 2 We clear the previous screen by using the background() function.
What are mouseX and mouseY? These are integer variables. Processing sets mouseX and mouseY to the current coordinate of the mouse cursor. These two variables change when all the commands in draw() are completed.
void setup(){ size(100,100);}
int diameter = 10;
void draw(){ background(127); ellipse(mouseX,mouseY,diameter,diameter); if (mousePressed == true) { diameter = diameter + 1; }}
Interaction programmingDSDN 142 Creative Coding
Exercise 3
Modify this code The circle is green when you press the left mouse button The circle is cyan when you press the right mouse button Otherwise the circle is red
void draw(){ strokeWeight(5); smooth(); background(255);
????????
if (mousePressed == true) { if (mouseButton == RIGHT) { ???????? } if (mouseButton == LEFT) { ???????? } }
ellipse(width/2, height/2, 50, 50); }
End results:
left click right click
Interaction programmingDSDN 142 Creative Coding
Solution 3void draw(){ strokeWeight(5); smooth(); background(255);
fill(255,0,0);
if (mousePressed == true) { if (mouseButton == RIGHT) { fill(0,255,255); } if (mouseButton == LEFT) { fill(0,255,0); } }
ellipse(width/2, height/2, 50, 50); }
left click right click
Interaction programmingDSDN 142 Creative Coding
Exercise 4
Modify this code Left click should increase the size of the ellipse Right click should decrease its size Hint: if statements can go inside other if statements. Hint II: do some research on the mouseButton variable
void setup(){ size(100,100);}
int diameter = 10;
void draw(){ background(127); ellipse(mouseX,mouseY,diameter,diameter); if (mousePressed == true) { diameter = diameter + 1; }}
End result:
Interaction programmingDSDN 142 Creative Coding
Solution 4
Question: can you use the else if to make this code look “neater”?
void setup(){ size(100,100);}
int diameter = 10;
void draw(){ background(127); ellipse(mouseX,mouseY,diameter,diameter); if (mousePressed == true) { if (mouseButton == RIGHT) { diameter = diameter + 1; } if (mouseButton == LEFT) { diameter = diameter - 1; } }}
Interaction programmingDSDN 142 Creative Coding
Solution 4 (cleaner)
A small change, but this type of change makes code a little bit easier to read!
void setup(){ size(100,100);}
int diameter = 10;
void draw(){ background(127); ellipse(mouseX,mouseY,diameter,diameter); if (mousePressed == true) { if (mouseButton == RIGHT) { diameter = diameter + 1; } else if (mouseButton == LEFT) { diameter = diameter - 1; } }}
Interaction programmingDSDN 142 Creative Coding
Exercise 5This code has a bug! This sketch is supposed to have the ellipse turn red when the mouse cursor “touches” the ellipse, but it doesn't work properly!
Quick Research Read about the dist() function The dist() function works out the distance between two points
Modify this code Fix the bug, so that the ellipse turns red if and only if the mouse touches it
void setup(){ size(100,100);}
float distance;
void draw(){ background(127); distance = dist(mouseX,mouseY,12,23); fill(0,0,255); if (distance < 25) { fill(255,0,0); } ellipse(50,50,30,30);}
End result:
Interaction programmingDSDN 142 Creative Coding
Solution 5void setup(){ size(100,100);}
float distance;
void draw(){ background(127); distance = dist(mouseX,mouseY,50,50); fill(0,0,255); if (distance < 15) { fill(255,0,0); } ellipse(50,50,30,30);}
Interaction programmingDSDN 142 Creative Coding
Exercise 6
Modify this code Each ellipse should have its diameter based off how far it is away from the mouse
float diameter;float space = 25;
void setup(){ size(250, 250); smooth(); noStroke();}
void draw(){ translate(space/2,space/2); background(0);
for (float x = 0; x < 10; x = x + 1) { for (float y = 0; y < 10; y = y + 1) { diameter = dist(x*space,y*space,32,75) / 10; ellipse(x * space, y * space, diameter, diameter); } }}
End result:
Interaction programmingDSDN 142 Creative Coding
Solution 6float diameter;float space = 25;
void setup(){ size(250, 250); smooth(); noStroke();}
void draw(){ translate(space/2,space/2); background(0);
for (float x = 0; x < 10; x = x + 1) { for (float y = 0; y < 10; y = y + 1) { diameter = dist(x*space,y*space,mouseX,mouseY) / 10; ellipse(x * space, y * space, diameter, diameter); } }}
Question: How would you change this code so that the ellipses had different colours based on their distance from the mouse?
Interaction programmingDSDN 142 Creative Coding
Exercise 7
Modify this code Considering the mouse cursor's position to the ellipses Can you modify this code so that the closest ellipses are black, while the furtherest are white?
float diameter = 20;float space = 25;
void setup(){ size(250, 250); smooth(); noStroke();}
void draw(){ translate(space/2,space/2); background(0);
for (float x = 0; x < 10; x = x + 1) { for (float y = 0; y < 10; y = y + 1) { fill(???); ellipse(x * space, y * space, diameter, diameter); } }}
End result:
Interaction programmingDSDN 142 Creative Coding
Solution 7float diameter = 20;float space = 25;
void setup(){ size(250, 250); smooth(); noStroke();}
void draw(){ translate(space/2,space/2); background(0);
for (float x = 0; x < 10; x = x + 1) { for (float y = 0; y < 10; y = y + 1) { fill(dist(x*space,y*space,mouseX,mouseY)); ellipse(x * space, y * space, diameter, diameter); } }}
