Aufgabenserie 03

In dieser Aufgabenserie lernst du, wie du mit der Maus mit dem Zeichenfeld interagieren kannst.

Hilfestellungen findest du unter:

Aufgabe 01

Klicke auf das Zeichenfeld!

Kommentare

Erstelle unterhalb von function draw() {...} eine Funktion function mouseClicked() {...}.


function mouseClicked() {
  // Alles innerhalb der geschweiften Klammern
  // wird ausgeführt, wenn die Maus geklickt wird
}

Erstelle innerhalb der geschweiften Klammern einen Befehl, dass ein Kreis bei der Koordinaten des Mauszeigers erstellt wird. Tipp: mouseX, mouseY
Tipp: Wenn du innerhalb function draw() {...} den Hintergrund immer neu zeichnest, wird der erzeugte Kreis sofort wieder überzeichnet, respektive unsichtbar!

Lösung


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

function draw() {
}

function mouseClicked() {
  ellipse(mouseX, mouseY, 50, 50);
}

Aufgabe 02

Klicke links und rechts auf das Zeichenfeld!

Kommentare

Ändere dein Programm so ab, dass in der linken Hälfte des Zeichenfelds Kreise gezeichnet werden und in der rechten Hälfte des Zeichenfelds Quadrate.
Mit dem Befehl rectMode(CENTER) wird das Quadrat mittig bei der entsprechenden Koordinate gezeichnet.

Lösung


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

function draw() {
}

function mouseClicked() {
  if(mouseX < width / 2){
    ellipse(mouseX, mouseY, 50, 50);
  }
  else {
    rectMode(CENTER);
    rect(mouseX, mouseY, 50, 50);
  }
}

Aufgabe 03

Klicke links und rechts auf das Zeichenfeld! Doppelklicke, um zu löschen!

Kommentare

Ändere dein Programm so ab, dass du mit einem Doppelklick alles Gezeichnete löschen kannst. Verwende dazu die Funktion function doubleClicked() {...}.
```
function doubleClicked() {
  // Alles innerhalb der geschweiften Klammern
  // wird ausgeführt, wenn die Maus dopplet geklickt wird
}
  
```
Tipp: Wenn du den Hintergrund neu zeichnest, wird alles vorher Gezeichnete überdeckt.

Lösung


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

function draw() {
}

function mouseClicked() {
  if(mouseX < width / 2){
    ellipse(mouseX, mouseY, 50, 50);
  }
  else {
    rectMode(CENTER);
    rect(mouseX, mouseY, 50, 50);
  }
}

function doubleClicked() {
  background(100);
}

Aufgabe 04

Klicke links und rechts auf das Zeichenfeld! Doppelklicke, um zu löschen! Halte die Maustaste gedrückt, um die Maus als Radiergummi zu verwenden!

Kommentare

Ändere dein Programm so ab, dass du wie mit einem Radiergummi das Gezeichnete ausradieren kannst. In der Variable mouseIsPressed ist gespeichert, ob die Maustaste gedrückt ist, oder nicht.
```
if(mouseIsPressed) {
  // Alles innerhalb der geschweiften Klammern
  // wird ausgeführt, solange die Maus gedrückt ist
}
  
```
Tipp: Eigentlich wird nicht wirklich das Gezeichnete gelöscht, sondern es wird mit der Hintergrundfarbe darüber gezeichnet.
Tipp: Verwende if(mouseIsPressed) {...} innerhalb der Funktion function draw() {...}.

Lösung


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

function draw() {
  if(mouseIsPressed) {
    fill(100);
    noStroke();
    ellipse(mouseX, mouseY, 50, 50);
  }
}

function mouseClicked() {
  fill(255);
  stroke(0);
  if(mouseX < width / 2){
    ellipse(mouseX, mouseY, 50, 50);
  }
  else {
    rectMode(CENTER);
    rect(mouseX, mouseY, 50, 50);
  }
}

function doubleClicked() {
  background(100);
}