Dynamic Drawing

Let’s make our first interactive sketch

void setup() {
size(500, 500);
}
 
void draw() {
background(255, 255, 255);
line(250, 250, mouseX, mouseY);
}

What if we move the background line in the setup function?

void setup() {
background(255, 255, 255);
size(500, 500);
}
 
void draw() {
line(250, 250, mouseX, mouseY);
}

Before, the background was filled every frame, which is very fast 60 fps.
With this layering it works like a creative tool.

Change the rectangle with an ellipse (they happen have the same number of parameters)

void draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}

pmouseX, pmouseY is the last mouse position, they are useful system variables.

Make a circle that follows the mouse!

Try to switch the mouse:

ellipse(mouseY, mouseX, 50, 50);

And try this:

background(255, 255, 255);
ellipse(mouseX, height-mouseY, 50, 50);

height and width are constant representing the size of the canvas.
The expression width-mouseY will be resolved before the ellipse gets drawn.

Draw an ellipse that mirrors the mouse position on both axis!

You can draw more than one object on each draw iteration:

background(255, 255, 255);
ellipse(mouseX, mouseY, 50, 50);
ellipse(width-mouseX, height-mouseY, 50, 50);

A less predictable behavior:

background(255, 255, 255);
ellipse(mouseX, mouseY, 50, 50);
ellipse(width-mouseY, mouseX, 50, 50);

You can create all sorts of complex relationships starting from the mouse coordinate

ellipse(mouseX, height-mouseY, 50, 50);
ellipse(mouseX/2, height-mouseY/2, 50, 50);

Make a complex set of relationships between 5 or more shapes!
(redraw the background at every refresh)

***

Introducing variables.
Boolean:

//I declare a variable type boolean, I call it mouseIsDown
//and I assign a value false. All in one instruction.
boolean mouseIsDown = false;
 
void setup() {
size(500, 500);
background(255, 255, 255);
}
 
void draw() {
print(mouseIsDown);
}

Note: print() is only for us, the programmers, it doesn’t affect the compiled sketch.

Use println instead and change the variable to true

mouseIsDown is not a system variable like mouseX: we created it, we named it and we have to manage it on our own.

Processing provides a way to detect the mouse clicks:

//I declare a variable type boolean, I call it mouseIsDown
//and I assign a value false. All in one instruction.
boolean mouseIsDown = false;
 
void setup() {
size(500, 500);
background(255, 255, 255);
}
 
void draw() {
println(mouseIsDown);
}
 
//this function is called every time you press a mouse button
void mousePressed() {
mouseIsDown = true;
}
 
//this function is called every time you release a mouse button
void mouseReleased() {
mouseIsDown = false;
}

mouseIsDown is actually used to store the state of the mouse.

Now we can make a simple drawing application that draw a line only if the mouse is down:

void draw() {
if (mouseIsDown == true) //same as if(mouseIsDown)
{
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

if is a condition and uses special operator == != < >

Make the application draw only if the mouse button is up!

Make the application draw only if the mouse position is on the top half of the screen!

Expressions in the conditionals can be combined:

if (mouseIsDown == true &amp;&amp; mouseY&lt;250)

This makes the application draw only if the mouseIsDown is true AND if the mouse position is on the top half of the screen.

Posted in

Post a comment