Lernpfad:Einführung in Processing/7

Vorheriger Schritt

Nächster Schritt

Interaktionen

Im aktiven Modus sind nun Interaktionen sehr leicht umsetzbar.

Arbeitsauftrag

1. Studiere das folgende Programm, probier es dann aus und erkläre seine Funktionsweise.

   void setup() {
     size(200,200);
   }
   
   void draw() {
     circle(mouseX, mouseY, 20);
   }
   

2. Ergänze den Befehl background(200); in draw() vor circle(). Erkläre die Veränderung des Programms.
3. Verschiebe den background() Befehl hinter circle(). Deckt sich deine Beobachtung mit deiner Vermutung?

Übungsaufgaben

Arbeitsauftrag

1. Programmiere eine Linie, die in einer der vier Ecken beginnt und bis zum Mauszeiger zeigt.

   → Beispiel

2. Programmiere ein "Fadenkreuz": Eine horizontale und eine senkrechte Linie, die sich genau beim Mauszeiger kreuzen.

   → Beispiel

   Tipp: konzentrier dich zunächst auf eine der Linien und überleg dir ihre Start- und Endpunkte.

3. Zeichne ein Rechteck in die Mitte des Fensters, bei dem immer eine Ecke der Maus folgt.

   → Beispiel

4. Ein mittig positioniertes Quadrat soll seinen Grauwert ändern, je nachdem, wo sich die Maus befindet. Ist die Maus ganz links, ist das Quadrat schwarz. Ist sie recht, wird das Quadrat weiß.

   → Beispiel

   Tipp: Der Grauwert muss in einem Bereich von 0 bis 255 liegen. In welchem Bereich liegt der Wert der Maus-Position? Um die Position auf den Grauwert zu übertragen (man spricht hier auch von Mapping), benötigst Du den Dreisatz.

Aufgabe 1

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

function draw() {
  background(200);
  line(0,0,mouseX,mouseY);
}

Aufgabe 2

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

function draw() {
  background(200);
  strokeWeight(3);
  line(0,mouseY, 400, mouseY);
  line(mouseX,0, mouseX, 400);
}

Aufgabe 3

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

function draw() {
  background(200);
  rect(mouseX, mouseY, 2*(200-mouseX), 2*(200-mouseY));
}

Aufgabe 4

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

function draw() {
  background(200);
  noStroke();
  fill(mouseX/400*255);
  rect(100,100,200,200);
}