Lernpfad:Einführung in Processing/7
Zur Navigation springen
Zur Suche springen
Interaktionen
Im aktiven Modus sind nun Interaktionen sehr leicht umsetzbar.
Arbeitsauftrag
- Studiere das folgende Programm, probier es dann aus und erkläre seine Funktionsweise.
void setup() { size(200,200); } void draw() { circle(mouseX, mouseY, 20); }
- Ergänze den Befehl
background(200);
indraw()
vorcircle()
. Erkläre die Veränderung des Programms. - Verschiebe den
background()
Befehl hintercircle()
. Deckt sich deine Beobachtung mit deiner Vermutung?
Übungsaufgaben
Arbeitsauftrag
- Programmiere eine Linie, die in einer der vier Ecken beginnt und bis zum Mauszeiger zeigt.
- → Beispiel
- 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.
- Zeichne ein Rechteck in die Mitte des Fensters, bei dem immer eine Ecke der Maus folgt.
- → Beispiel
- 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);
}