Documentation

Interaction

Une valeur est controllée par un paramètre extérieur.

La souris

mouseX, mouseYposition actuelle dans le canvas

pmouseX, pmouseYposition à la frame précédente

mouseIsPressedtrue tant que le bouton est enfoncé

mouseButtonLEFT, RIGHT ou CENTER

function draw() {
  background(240);
  circle(mouseX, mouseY, 60);
}

function draw() {
  background(240);

  let total = int(map(mouseX, 0, width, 3, 60));
  let span = width / total;

  for (let i = 0; i < total; i++) {
    circle(i * span + span / 2, height / 2, span * 0.7);
  }
}

int() arrondit à l'entier inférieur.

Vitesse du geste

let speed = dist(mouseX, mouseY, pmouseX, pmouseY);
strokeWeight(map(speed, 0, 50, 1, 30));
line(pmouseX, pmouseY, mouseX, mouseY);

Le clavier

keyIsPressedtrue tant qu'une touche est enfoncée

keyle caractère de la dernière touche

keyCodecode des touches spéciales (flèches, entrée…)

keyIsDown(code)teste une touche précise, en continu

let x;

function setup() {
  createCanvas(400, 400);
  x = width/2;
}

function draw() {
  background(240);

  if (keyIsDown(LEFT_ARROW))  x -= 3;
  if (keyIsDown(RIGHT_ARROW)) x += 3;

  circle(x, height / 2, 50);
}

keyIsDown() = mouvement continu tant que la touche est maintenue. keyPressed() = déclenchée une seule fois.

Événements

function mousePressed() {
  // une fois, au moment du clic
}

function mouseReleased() {
  // au relâchement
}

function mouseDragged() {
  // à chaque déplacement, bouton enfoncé
}

function keyPressed() {
  // une fois, à l'appui d'une touche
  if (key === 's') saveCanvas('capture', 'png');
  if (key === ' ') x = 0;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Gérer un état

let mode = 0;
let points = [];

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

function mousePressed() {
  points.push({ x: mouseX, y: mouseY });
}

function keyPressed() {
  if (key === 'm') mode = (mode + 1) % 3;   // cycle entre 0, 1 et 2
  if (key === 'c') points = [];             // tout effacer
}

function draw() {
  background(240);
  for (let p of points) {
    if (mode === 0) circle(p.x, p.y, 30);
    if (mode === 1) rect(p.x, p.y, 30, 30);
    if (mode === 2) line(p.x - 15, p.y, p.x + 15, p.y);
  }
}

Détecter une zone

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

function draw() {
  background(220);

  let cx = width/2;
  let cy = height/2;
  let radius = 100

  let d = dist(mouseX, mouseY, cx, cy);
  if (d < radius) {
    // la souris est dessus
    circle(width/2, height/2, radius);
  }
}

Capturer une image

function keyPressed() {
  if (key === 's') {
    noLoop();
    saveCanvas('capture', 'png');
    loop();
  }
}

Pour une vidéo, utilisez un outil de capture d'écran système. C'est plus fiable qu'un enregistrement depuis le navigateur.

← aléatoire images →