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