mouseX, mouseY

Die Variablen mouseX und mouseY speichern die x- und y-Koordinate der Maus relativ zum Zeichenfeld.

Beispiele

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

function draw() {
  background(100);

  let d = 100;
  // zeichne den Kreis bei der Koordinate mouseX/mouseY
  ellipse(mouseX, mouseY, d, d);
}

Bewege die Maus über das untenstehende Zeichenfeld!

Farbmischer

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

function draw() {
  // wenn die Maus ganz links ist, ist mouseX = 0
  // mouseX / width = 0
  // wenn die Maus ganz rechts ist, ist mouseX = 400 = width
  // mouseX / width = 1
  let rot = mouseX / width * 255;
  let gruen = mouseY / height * 255;
  background(rot, gruen, 0);
}

Bewege die Maus über das untenstehende Zeichenfeld!

Formveränderungen

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

function draw() {
  background(20, 0, 100);

  fill(200, 100, 50);

  let d = 100;
  // linke Ellipse
  ellipse(0, 200, width - mouseX, height - mouseY);

  // mittlere Ellipse
  ellipse(200, 200, mouseX, mouseY);

  // rechte Ellipse
  ellipse(400, 200, width - mouseX, height - mouseY);

  // obere Ellipse
  ellipse(200, 0, mouseX, height - mouseY);

  // untere Ellipse
  ellipse(200, 400, mouseX, height - mouseY);
}

Bewege die Maus über das untenstehende Zeichenfeld!