p5js Kurs: Lektion 3: Koordinaten und Striche
Beispielprogramme dieser Lektion
1. Das Beispielprogramm „Koordinaten Demo“
Das Programm soll deutlich machen, wie ihr mittels x- und y-Koordinaten Positionen im Programmfenster bestimmen könnt. Die x- und y-Koordinaten könnt ihr euch wie eine Wegbeschreibung von der oberen linken Ecke des Programmfensters vorstellen.
x steht für die Anzahl der Schritte (= Pixel) nach rechts.
x = 0 bedeutet: ganz links
x = 400 bedeutet: ganz rechts (weil das Programmfenster 400 Pixel breit ist!)
y steht für die Anzahl der Schritte (= Pixel) nach unten.
y = 0 bedeutet: ganz oben
y = 400 bedeutet: ganz unten (weil das Programmfenster 400 Pixel hoch ist!)
Der Code für dieses Beispiel wird hier nicht behandelt.
2. Das Beispielprogramm „Linien Demo“
Das Programm ist statisch, d.h. es reagiert nicht auf Nutzereingaben und zeichnet lediglich ein unveränderliches Bild mit drei horizontale Linien in verschiedenen Farben.
function setup() {
noLoop();
createCanvas(400, 400);
background(240);
stroke(205, 51, 51);
strokeWeight(5);
line(100, 100, 300, 100);
stroke(30, 144, 205);
strokeWeight(10);
line(100, 200, 300, 200);
stroke(0, 180, 102);
strokeWeight(20);
line(100, 300, 300, 300);
}
Zeile 2: Da dieses Programm statisch ist, schaltet noLoop() das Neuzeichnen des Programmfensters aus
Zeilen 7, 11 und 15: stroke() setzt die Strichfarbe
Zeilen 8, 12 und 16: strokeWeight() setzt die Strichstärke
Zeilen 9, 13 und 17: line(x1, y1, x2, y2) zeichnet eine Linie zwischen den beiden mit x1 und x2 bezeichneten Punkten
Übungsaufgaben
2.1 Ändere das Programm, damit es ein Quadrat zeichnet. Dafür musst Du eine Linie ändern und eine weitere hinzufügen.
2.2 Schreibe eine Variante von dem Programm, sodass alle Linien bei der Position des Mauszeigers beginnen. Hinweis: Dafür musst Du das Zeichnen der Linien in die draw()-Funktion verlagern.
function setup() {
noLoop();
createCanvas(400, 400);
background(240);
stroke(205, 51, 51);
strokeWeight(5);
line(100, 100, 300, 100);
stroke(30, 144, 205);
strokeWeight(10);
line(100, 100, 100, 300);
stroke(0, 180, 102);
strokeWeight(20);
line(100, 300, 300, 300);
line(300, 100, 300, 300);
}
function setup() {
createCanvas(400, 400);
background(240);
}
function draw() {
background(240);
stroke(205, 51, 51);
strokeWeight(5);
line(mouseX, mouseY, 300, 100);
stroke(30, 144, 205);
strokeWeight(10);
line(mouseX, mouseY, 300, 200);
stroke(0, 180, 102);
strokeWeight(20);
line(mouseX, mouseY, 300, 300);
}
3. Das Beispielprogramm „Linien ziehen“
Klicke mit der Maus in das Programmfenster, um den Startpunkt für eine Linie (x1 und y1) zu setzen. Halte die Maustaste gedrückt und bewege den Mauszeiger, um Linien mit zufällig gesetzten Graustufen und Strichstärken zu zeichnen. Wenn Du die Maustaste loslässt, unterbrichst Du das Zeichnen. Ein Druck auf irgendeine Taste füllt das Programmfenster mit hellgrau. Dieses Programm funktioniert leider nicht auf Smartphones, weil es dort keine Maustaste gibt.
let x1, y1;
function setup() {
createCanvas(400, 400);
background(240);
}
function draw() {
if (mouseIsPressed) {
let strichstaerke = random(7);
let strichfarbe = random(255);
strokeWeight(strichstaerke);
stroke(strichfarbe);
let x2 = mouseX + random(-10, 10);
let y2 = mouseY + random(-10, 10);
line(x1, y1, x2 , y2);
}
}
function mousePressed() {
x1 = mouseX;
y1 = mouseY;
}
function keyPressed(){
background(240);
}
Zeile 1: Es gibt zwei Werte, die mit x1 und y1 bezeichnet werden – diese stehen für den Startpunkt der Linie
Zeile 9: Wenn die Maustaste gedrückt ist:
Zeilen 10 und 11: Erzeugt einen Zufallswert für die Strichstärke und die Strichfarbe
Zeile 12 und 13: Setzt die Strichstärke und die Strichfarbe mit den eben ermittelten Werten
Zeile 14 und 15: Berechnet die Koordinaten für den Endpunkt der Linie, anhängig von der aktuellen Mausposition und einer Zufallszahl zwischen -10 und 10
Zeile 16: Zeichnet die Linie
Zeile 20-23: Ein Druck auf die Maustaste setzt den Startpunkt der Linie (x1 und x2) auf die aktuelle Position des Mauszeigers
Zeilen 25-27: Ein Druck auf irgendeine Taste füllt das Programmfenster hellgrau
Übungsaufgaben
3.1 Gib den Strichen zufällige, rot-bläuliche Farben.
3.2 Ergänze nach Zeile 16 eine weitere Zeile, die den selben Strich zeichnet, nur spiegelverkehrt.
let x1, y1;
function setup() {
createCanvas(400, 400);
background(240);
}
function draw() {
if (mouseIsPressed) {
let strichstaerke = random(7);
let rot = random(255);
let blau = random(255);
strokeWeight(strichstaerke);
stroke(rot, 0, blau);
let x2 = mouseX + random(-10, 10);
let y2 = mouseY + random(-10, 10);
line(x1, y1, x2 , y2);
}
}
function mousePressed() {
x1 = mouseX;
y1 = mouseY;
}
function keyPressed(){
background(240);
}
let x1, y1;
function setup() {
createCanvas(400, 400);
background(240);
}
function draw() {
if (mouseIsPressed) {
let strichstaerke = random(7);
let strichfarbe = random(255);
strokeWeight(strichstaerke);
stroke(strichfarbe);
let x2 = mouseX + random(-10, 10);
let y2 = mouseY + random(-10, 10);
line(x1, y1, x2 , y2);
line(width-x1, y1, width-x2 , y2);
}
}
function mousePressed() {
x1 = mouseX;
y1 = mouseY;
}
4. Das Beispielprogramm „Linienpinsel“
Das Programm funktioniert ähnlich wie der Konfettipinsel aus der letzten Lektion: Du kannst mit der Mauszeiger bei gedrückter Maustaste eine Spur aus kurzen Linien Linien in zufälligen Graustufen zeichnen. Ein Druck auf irgendeine Taste füllt das Programmfenster mit hellgrau.
Programm im Editor öffnen
function setup() {
createCanvas(400, 400);
background(240);
}
function draw() {
if (mouseIsPressed) {
let strichstaerke = random(7);
let strichfarbe = random(255);
strokeWeight(strichstaerke);
stroke(strichfarbe);
let x1 = mouseX + random(-10, 10);
let y1 = mouseY + random(-10, 10);
let x2 = mouseX + random(-10, 10);
let y2 = mouseY + random(-10, 10);
line(x1, y1, x2 , y2);
}
}
function keyPressed(){
background(240);
}
Zeile 6: Wenn die Maustaste gedrückt ist:
Zeile 8 und 9: Erzeugt einen Zufallswert für die Strichstärke und die Strichfarbe
Zeile 10 und 11: Setzt die Strichstärke und die Strichfarbe mit den eben ermittelten Werten
Zeilen 12-15: Ermittelt die Start und Endpunkte für eine Linie, abhängig von der aktuellen Mausposition und jeweils einer Zufallszahl zwischen -10 und 10
Zeile 16: Zeichnet eine Linie
Zeilen 20-22: Ein Druck auf irgendeine Taste füllt das Programmfenster hellgrau
Übungsaufgaben
4.1 a) Ändere die Größe des Programmfensters auf 255×255 Pixel.
4.1 b) Gib den Strichen zufällige, rot-bläuliche Farben.
4.1 c) Sorge dafür, dass die x-Position der Maus den maximalen Rotanteil, die y Position der Maus den maximalen Rotanteil bestimmt.
function setup() {
createCanvas(255, 255);
background(240);
}
function draw() {
if (mouseIsPressed) {
let strichstaerke = random(7);
let rot = random(mouseX);
let blau = random(mouseY);
strokeWeight(strichstaerke);
stroke(rot, 0, blau);
let x1 = mouseX + random(-10, 10);
let y1 = mouseY + random(-10, 10);
let x2 = mouseX + random(-10, 10);
let y2 = mouseY + random(-10, 10);
line(x1, y1, x2 , y2);
}
}
function keyPressed(){
background(240);
}function setup() {
createCanvas(255, 255);
background(240);
}
function draw() {
if (mouseIsPressed) {
let strichstaerke = random(7);
let rot = random(mouseX);
let blau = random(mouseY);
strokeWeight(strichstaerke);
stroke(rot, 0, blau);
let x1 = mouseX + random(-10, 10);
let y1 = mouseY + random(-10, 10);
let x2 = mouseX + random(-10, 10);
let y2 = mouseY + random(-10, 10);
line(x1, y1, x2 , y2);
}
}
function keyPressed(){
background(240);
}function setup() {
createCanvas(255, 255);
background(240);
}
Navigation
Dieser Kurs wurde entwickelt mit freundlicher Unterstützung und Kooperation in Workshops mit der Lernoase im Freizeitheim Vahrenwald in Hannover.
Alle Materialien stehen unter der Lizenz CC BY-NC-SA 4.0 mit Namensnennung „Pit Noack“.
