p5js Kurs: Lektion 3: Koordinaten und Striche

Beispielprogramme dieser Lektion

Koordinaten Demo

Linien Demo

Linien ziehen Schritt 1

Linien ziehen Schritt 2

Linien ziehen Schritt 3

Linien ziehen Schritt 4

Linien ziehen Schritt 5

Linienpinsel


1. Das Beispielprogramm „Koordinaten Demo“

Das Programm soll deutlich machen, wie ihr mittels x- und y-Koordinaten Positionen im Programmfenster bestimmen könnt. Bewege den Mauszeiger im Programmfenster, und lies unten die Koordinaten des Mauszeigers ab.

x steht für die Position in der Waagerechten zwischen links und rechts
x = 0 bedeutet: ganz links
x = 400 bedeutet: ganz rechts (weil das Programmfenster 400 Pixel breit ist!)

y steht für die Position in der Senkrechten zwischen oben und unten
y = 0 bedeutet: ganz oben
y = 400 bedeutet: ganz unten (weil das Programmfenster 400 Pixel hoch ist!)


Programm im Editor öffnen


function setup() {
  createCanvas(400, 400);
  textAlign(CENTER);
  textSize(20);
}

function draw() {
  background(0);
  fill(255);
  textSize(20);
  positionAlsString = "x:" + str(mouseX) + " " + "y:" + str(mouseY);
  text(positionAlsString, width/2, height-20);
}

Zeile 3: Sorgt für mittige Positionierung des Textes
Zeile 4: Setzt die Textgröße (= Höhe in Pixeln)
Zeile 10: Baut einen String zusammen, der die x- und y-Koordinaten des Mauszeigers beschreibt
Zeile 11: Schreibt den String aus Zeile 10 an den unteren Rand des Programmfensters.


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.


Programm im Editor öffnen


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.

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.


Programm im Editor öffnen


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

Ergänze nach Zeile 16 eine weitere Zeile, die den selben Strich zeichnet, nur spiegelverkehrt.

3.1 Gib den Strichen zufällige, rot-bläuliche Farben.

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.

Navigation

Übersicht

Vorherige Lektion

Nächste Lektion