p5 Dynamic Mode + mouse input

Let’s make our first interactive sketch

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

function draw() {
background(255, 255, 255);
line(250, 250, mouseX, mouseY);
}

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

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

function 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)

function 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)

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


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

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…

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

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.

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

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

Posted in