Mouse Press / マウスプレス

マウスを動かして形状を配置します。マウスボタンを押して色を反転させます。

mouseIsPressed conditional interaction
Input Interaction

View Source Code

/*
 * @name Mouse Press
 * @arialabel User draws pink crosses on a grey background and can change the cross color to white by clicking the mouse. 
 * @description Move the mouse to position the shape.
 * Press the mouse button to invert the color.
 */
function setup() {
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
  background(230);
  strokeWeight(2);
}

function draw() {
  if (mouseIsPressed) {
    stroke(255);
  } else {
    stroke(237, 34, 93);
  }
  line(mouseX - 66, mouseY, mouseX + 66, mouseY);
  line(mouseX, mouseY - 66, mouseX, mouseY + 66);
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.