Interaction programming DSDN 142 Creative Coding
Learning Goals 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
Interaction programming DSDN 142 Creative Coding
Quick Recap Braces are used to group code, eg: { ellipse(10,10,50,50) ; } Grouped code can be named, eg: void circle() { ellipse(10,10,50,50); }
Interaction programming DSDN 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 programming DSDN 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
void setup() { size(100,100); } void draw() { ellipse(mouseX,mouseY,25,25); }
Modify this code ď Ź Change the code so that the background gets cleared. You should only see one ellipse at any time End result:
Interaction programming DSDN 142 Creative Coding
Solution 1 void setup() { size(100,100); } void draw() { background(127); ellipse(mouseX,mouseY,25,25); }
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.
Interaction programming DSDN 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; }
End result:
integers are whole numbers; booleans are true or false values
Interaction programming DSDN 142 Creative Coding
Solution 2 void setup() { size(100,100); } int diameter = 10; void draw() { background(127); ellipse(mouseX,mouseY,diameter,diameter); if (mousePressed == true) { diameter = diameter + 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.
Interaction programming DSDN 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) { ???????? } }
End results:
ellipse(width/2, height/2, 50, 50); }
left click
right click
Interaction programming DSDN 142 Creative Coding
Solution 3 void 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 programming DSDN 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 programming DSDN 142 Creative Coding
Solution 4 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; } } }
Question: can you use the else if to make this code look “neater�?
Interaction programming DSDN 142 Creative Coding
Solution 4 (cleaner) 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; } } }
A small change, but this type of change makes code a little bit easier to read!
Interaction programming DSDN 142 Creative Coding
Exercise 5 This 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); } End result: ellipse(50,50,30,30); }
Interaction programming DSDN 142 Creative Coding
Solution 5 void 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 programming DSDN 142 Creative Coding
Exercise 6 Modify this code ď Ź Each ellipse should have its diameter based off how far it is away from the mouse
End result:
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); } } }
Interaction programming DSDN 142 Creative Coding
Solution 6 float diameter; float space = 25; void setup() { size(250, 250); smooth(); noStroke(); }
Question: How would you change this code so that the ellipses had different colours based on their distance from the mouse?
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); } } }
Interaction programming DSDN 142 Creative Coding
End result:
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); } } }
Interaction programming DSDN 142 Creative Coding
Solution 7 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(dist(x*space,y*space,mouseX,mouseY)); ellipse(x * space, y * space, diameter, diameter); } } }