Mask Generator

Mouse and Keyboard Interaction

Grade 6~8

Mouse Interaction

This section introduces mousePressed(). With this feature, you can use the mouse button to generate a new random number everytime the mouse is pressed:

let d;

function setup() {
  createCanvas(400, 400);
  d = random(80, 100); // randomly pick a number between 80 and 100
}

function draw() {
  background(220);
  ellipse(200, 200, d, d);
}

function mousePressed(){
  d = random(80, 100); // randomly pick a number between 80 and 100
  console.log(d); // print d
}

Let’s get more practice by applying the same idea to the lollipop example. Update the sketch so that everytime mouse is pressed, the candy will get assigned a new random color.

function draw() {
  background(220);

  //Lollipop stick
  fill(255);
  rect(stickX, stickY, stickWidth, stickHeight);

  //Lollipop candy
  fill(candyR, candyG, candyB);
  ellipse(candyX, candyY, candyWidth, candyHeight);
}

function mousePressed() {
  candyR = random(0, 255); // randomly pick a number between 0 and 255
  candyG = random(0, 255); // randomly pick a number between 0 and 255
  candyB = random(0, 255); // randomly pick a number between 0 and 255
  console.log(candyR, candyG, candyB); // print candyR, candyG, candyB
}

Code Snippet: random lollipop example.

Tip: Code inside of function mousePressed() runs once after the mouse button gets pressed.

Keyboard Interaction

keyPressed() works in a very similar way. With this feature, you can run a block of code after any key on the keyboard gets pressed.

let d;

function setup() {
  createCanvas(400, 400);
  d = random(80, 100); // randomly pick a number between 80 and 100
}

function draw() {
  background(220);
  ellipse(200, 200, d, d);
}

function keyPressed(){
  d = random(80, 100); // randomly pick a number between 80 and 100
  console.log(d); // print d
}

Now that you’ve learned the basics of mouse and keyboard interactions, incorporate this feature into your Mask Generator to give your audience more control over the interactive experience.