Beispiel Mouse Over

Programm im Editor öffnen

Quellcode ohne Kommentar

let xPos, yPos, seitenlaenge;

function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100
}

function draw() {
  background(255, 215, 0);
  
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  
  rect(xPos, yPos, seitenlaenge);
}

Quellcode mit Kommentar

let xPos, yPos, seitenlaenge;

function setup() {
  createCanvas(300, 300);
  // Die Koordinaten der oberen linken Ecke des Quadrates:
  xPos = width / 3;
  yPos = height / 3;
  // Die Seitenlänge des Quadrates:
  seitenlaenge = 100;
}

function draw() {
  background(255, 215, 0);
  
  // Dies ist die Bedinung dafür, dass der Mauszeiger innerhalb
  // des Quadrats sich befindet:
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    // Ist der Mauszeiger im Quadrat, dann setze die Füllfarbe rot:
    fill(255, 0, 0);
  } else {
    // Sonst setze die Füllfarbe weiß:
    fill(255);
  }
  
  rect(xPos, yPos, seitenlaenge);
}