p5 Dynamic Mode + mouse input

Let’s make our first interactive sketch
[js]
function setup() {
createCanvas(500, 500);
}

function draw() {
background(255, 255, 255);
line(250, 250, mouseX, mouseY);
}
[/js]

What if we move the background line in the setup function?
[js]
function setup() {
createCanvas(500, 500);
background(255, 255, 255);
}

function draw() {
line(250, 250, mouseX, mouseY);
}
[/js]

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)
[js]
function draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}
[/js]
pmouseX, pmouseY is the last mouse position, they are useful system variables.

Make a circle that follows the mouse!

Try to switch the mouse:
[js]
ellipse(mouseY, mouseX, 50, 50);[/js]

And try this:
[js]
background(255, 255, 255);
ellipse(mouseX, height-mouseY, 50, 50);
[/js]
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:
[js]
background(255, 255, 255);
ellipse(mouseX, mouseY, 50, 50);
ellipse(width-mouseX, height-mouseY, 50, 50);
[/js]
A less predictable behavior:
[js]
background(255, 255, 255);
ellipse(mouseX, mouseY, 50, 50);
ellipse(width-mouseY, mouseX, 50, 50);[/js]

You can create all sorts of complex relationships starting from the mouse coordinate
[js]
ellipse(mouseX, height-mouseY, 50, 50);
ellipse(mouseX/2, height-mouseY/2, 50, 50);
[/js]
Make a complex set of relationships between 5 or more shapes!
(redraw the background at every refresh)

P5 provides two ways to detect the mouse clicks, as an event and as a state variables:

[js]

function setup() {
createCanvas(500, 500);
}

function draw() {
background(237, 34, 93);

fill(0);

if (mouseIsPressed)
ellipse(250, 250, 100, 100);
else
rect(250, 250, 100, 100);
}

//this function is called every time you press a mouse button
function mousePressed() {
println(“mouse has been clicked”);
}

//this function is called every time you release a mouse button
function mouseReleased() {
println(“mouse has been released”);
}

[/js]

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

Here’s a simple trick using distance. I save the distance between the previous coordinates in a variable – that’s the speed…
[js]
var d = dist(mouseX, mouseY, pmouseX, pmouseY);

//…and I use it to change the thickness of the line
strokeWeight(d/6);

line(mouseX, mouseY, pmouseX, pmouseY);
[/js]

Try to paint different colors based on the mouse position or speed.

This is a bit more advanced but quite intuitive. Variables connected to sliders.

[js]
//declare the slider object as global variable
//so it can be accessed from all functions
var colorSlider;

function setup() {
createCanvas(800, 600);
background(“#b5ffaf”);

//create slider – goes from 0 to 255, starts at 100
colorSlider = createSlider(0, 255, 100);
//position
colorSlider.position(20, 20);

//change color mode to Hue Saturation and brightness
colorMode(HSB);
}

function draw() {
//get the hue from the slider
var h = colorSlider.value();

//change the hue
stroke(h, 255, 255);

//draw line only if mouse is pressed
if(mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
[/js]

Check the reference for more mouse related functions
mouseMoved()
mouseDragged()
mousePressed()
mouseReleased()
mouseClicked()
mouseWheel()

Posted in