p5 Grundlagen / 2020-11-27 / Matthias Edler-Golla, CC BY-SA 4.0



Themen

Tom Wujec: Verzwickte Probleme lösen – Wie toasten Sie eigentlich Ihr Brot?

Coding mit p5

  • Web Editor
  • Koordinaten-System
  • Kommentare
  • Farben in Processing
  • Grundformen (Punkt, Linie, Ellipsen, Rechtecke)
  • Vertex
  • For-Loops
  • Inspirationen und Buch-Empfehlungen

Tom Wujec: Verzwickte Probleme lösen – Wie toasten Sie eigentlich Ihr Brot?

Eine Scheibe Brot zu toasten scheint nicht besonders schwer zu sein – bis man gebeten wird, den Vorgang Schritt für Schritt aufzuzeichnen. Tom Wujec fragt die Menschen gerne, wie sie Toast machen, da dies unverhoffte Hinweise darauf gibt, wie man die kompliziertesten Probleme lösen kann.

Bitte schaut Euch das Video später in Ruhe an!


Interaction Design = Design of Behavior

https://www.franka.de/

Interaction Design is first and foremost the design of behavior that occurs over time

About Face 3, Alan Cooper

Um das Verhalten von interaktiven Objekten zu gestalten, sollte man – zumindest ein bisschen – programmieren können.

Dies ist auch dann extrem hilfreich, wenn man mit Entwicklern zu tun hat und somit prinzipiell verstehen kann, wie deren Arbeit aussieht…


Gedicht vs. Code

Wie bei einem Gedicht gibt es bei Code strenge Regeln, die eingehalten werden müssen, damit der Computer die Anweisungen richtig interpretieren kann.

Gedicht (Das Lied von der Glocke, Friedrich Schiller)

Fest gemauert in der Erden
Steht die Form, aus Lehm gebrannt.
Heute muß die Glocke werden.
Frisch Gesellen, seid zur Hand.
Von der Stirne heiß
Rinnen muß der Schweiß,
Soll das Werk den Meister loben,
Doch der Segen kommt von oben.

Javascript (p5)

function setup() {
  createCanvas(960, 240);
  textFont("Georgia");
  textSize(30);
  fill(255);
}

function draw(){
  if (mouseX < width/2) {
    background(255, 0, 0);
    textAlign(LEFT);
    text("Cursor in linker Hälfte", 10, height-40, width-10, 60);
  } else {
    background(0, 0, 255);
    textAlign(RIGHT);
    text("Cursor in rechter Hälfte", 10, height-40, width-20, 60);
  }
  stroke(0);
  line(width/2, 0, width/2, height);
}

Code: Material ohne Eigenschaften

Gravity von thatsmallphotographer

As designers of digital artefacts, we might be closer to the conditions of the author and the writer than we are to designers working with more traditional materials. The material of the author is language. Language is a material nearly without inherent qualities, perhaps similar to information technology in that respect. It is possible to create almost anything with language as a material.

Jonas Löwgren & Erik Stolterman: Thoughtful Interaction Design, p. 4

Traditionelle Materialien wie Metall oder Holz haben sehr spezifische Eigenschaften. Bei Kunststoff wird das schon schwieriger – Code ist in dieser Beziehung einmalig: Wir als Gestalter*innen/Coder*innen können festlegen, ob z.B. die Schwerkraft und andere Naturgesetze in unserer Software-Anwendung noch gültig sind oder ob diese ganz anderen Regeln folgt…


p5.js

p5 is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, P5 also has evolved into a tool for generating finished professional work.

Tutorials

Im Web findet Ihr jede Menge Tutorials zu p5 – hier die bekannten Tutorials von Dan Shiffman

Bitte schaut Euch in nächster Zeit folgende Tutorials an – sie betreffen die heute von mir besprochenen Sachen:

  1. Code! Programming with p5.js for Beginners Trailer
  2. Code! Programming for Beginners with p5.js
  3. p5.js Web Editor
  4. Shapes & Drawing
  5. Color
  6. Errors & Console
  7. Code Comments
  8. while and for Loops

p5.js online

https://p5js.org/


p5 im Einsatz

Bei uns zuhause sind ein paar Raspberry Pis im Einsatz, um z.B. regelmäßig Temperatur, Luftdruck und Luftfeuchtigkeit zu messen – die so gewonnenen Werte lassen sich sehr gut via p5 darstellen!

Wochen-Temperatur-Werte

Tages-Temperatur-Werte

Wochen-Sensor-Werte


Semesteraufgabe: Zeitdarstellung in p5.js

Überlegt Euch, wie Ihr die aktuelle Uhrzeit (mind. Stunde und Minute) auf innovative Art darstellen und in p5.js realisieren könnt. Sekunde, Datum, Mondphasen… sind optional!

Die Aufgabe ist in zwei Teile aufgeteilt:

Teil 1 (Entwurf)

  • Darstellung der Uhrzeit in Illustrator, Sketch, Figma…
  • mehrere Ansichten/Zeiten, damit man sehen kann, ob die Uhrzeit ablesbar ist

Teil 2 (Realisierung)

  • Umsetzung in p5.js

Gruppen-interne Zwischenpräsentation der Entwürfe

  • am 11.12.20

Gruppen-interne Abschlusspräsentation der p5-Sketches

  • am 22.01.21

p5 Web Editor

https://editor.p5js.org/

Der Web-Editor ist super praktisch, um schnell mal Code auszuprobieren – dazu braucht man nichts herunterladen oder installieren!

Alle Übungen, die Ihr hier im Kurs machen werden, macht Ihr direkt in diesem Editor…


beim p5-Web-Editor anmelden

Bitte meldet Euch beim p5 Web-Editor an – die von Euch in den nächsten Wochen zu machenden Übungen müssen dort gespeichert sein!

Schritt 1

Schritt 2

Speichern Eurer „Sketches“

Bitte schaut Euch dazu das Video über den Web Editor an – dort wird auch erklärt, wie Ihr Eure Sketches benennt und diese speichert!


erster p5 Sketch

Demo

Im Web Editor anzeigen

Pseudo-Code

erstelle eine Zeichenfläche in der Größe 960px x 400px;
gebe der Zeichenfläche eine weiße Hintergrundfarbe;
nimm für die nächsten Schritte Rot (255,0,0) als Füllfarbe;
zeichne eine Ellipse mit der Breite 200px und Höhe 150px an der Position (200,200);
stelle für den nächsten Schritt die Schriftgröße auf 24px;
schreibe "Hallo Welt!" an der Position (10,40) auf die Zeichenfläche;

Pseudocode ist ein Programmcode, der nicht zur maschinellen Interpretation, sondern lediglich zur Veranschaulichung eines Paradigmas oder Algorithmus dient.

p5

function setup() {
  // so gross soll die Zeichenfläche werden
  createCanvas(960, 400);

  // Hintergrundfarbe, hier fast weiss
  background(240);

  // Füllfarbe von Text und Ellipse
  fill(255,0,0);

  // eine (Kreis-)Ellipse an der Position 200,150
  ellipse(200,150,200,200);

  // Größe des Textes in Pixel
  textSize(24);

  // Text und Position
  text("Hallo Welt!", 10, 40);
}

Die mit // markierten Stellen sind Kommentare, die von p5 ignoriert werden, aber uns das Verstehen des Code erleichtern.

Probiert es doch einfach mal aus und ändert Werte im Web-Editor!


Kommentar-Formatierung

Zeilen, die mit // oder /* anfangen, sind Kommentare, die von p5 nicht gelesen werden, aber helfen, den Code verständlich zu machen.

Bitte schreibt Kommentare, die erklären, was gerade passiert. Damit versteht Ihr später beim Lesen Eurer Programme, was Ihr damit gemeint habt!

p5

// ich bin ein einzeiliger Kommentar

/*
Ich bin ein Kommentar,
der über mehrere Zeilen
geht und auch ignoriert wird
*/

Tip

damit könnt Ihr auch Code-Blöckeauskommentieren – z.B. um einen Fehler einzugrenzen… dazu später mehr!


Koordinaten-System

Die linke, obere Ecke des Sketches ist die Position (0,0)!

Demo

Im Web Editor anzeigen


Display-Größe und Variablen

Demo

Im Web Editor anzeigen

p5

function setup() {
  // so gross soll die Arbeitsfläche werden
  createCanvas(960, 400);

  // Hintergrundfarbe schwarz
  background(0);

  // Außenkontur soll weiss sein
  stroke(255);

  // Füllfarbe mittleres Grau
  fill(120);

  // Variable Durchmesser der Ellipse
  let d = 200;

  /*
  Ellipse in der Mitte des Sketches
  waagrechter Duchmesser 3x so groß wie der vertikale Durchmesser (d * 3)

  width = Breite der Arbeitsfläche "canvas"
  height = Höhe der Arbeitsfläche "canvas"
  */
  ellipse(width/2, height/2, d * 3, d);
}

Nachschlagewerk

https://p5js.org/reference/

Auf der Site sind auch viele Code-Beispiele zu finden…


Farben in p5

Demo

Im Web Editor anzeigen

p5

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

    // weisser Sketch-Hintergrund
    background(255);

    // alle Elemente ohne Rand
    noStroke();

    // Graustufe – Wert kann zwischen 0 und 255 liegen
    fill(120);
    rect(0, 0, 100, 100);

    // Graustufen, zusätzlich transparent;
    // auch dieser Wert kann zwischen 0 (ganz durchsichtig) und 255 (gar nicht durchsichtig) liegen
    fill(145, 100);
    rect(50, 50, 100, 100);

    // RGB-Farben "blau";
    fill(95, 170, 246);
    rect(150, 150, 300, 100);

    // RGB-Farben mit zusätzlicher Alpha-Transparenz "rot";
    fill(242, 88, 49, 140);
    rect(250, 100, 100, 300);

    // grüne, leicht transparente Ellipse
    fill(70, 224, 45, 140);
    ellipse(550, 250, 500, 200);

    // dicke Außenkontour des Rechtecks
    strokeWeight(10);
    stroke(255, 0, 0);
    noFill();

    rect(500, 200, 100, 100);
}

Photoshop Color Selector


Zeichnen von Punkten und Linien

Demo

Im Web Editor anzeigen

Die Angabe zur Strichfarbe „stroke“ ändert jeweils die Elemente, die unterhalb davon stehen…

p5

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

  background(0);

  // 1px starker Strich
  strokeWeight(1);

  // Strichfarbe: rot
  stroke(255,0,0);

  // Punkt in der Mitte des Sketch, fast nicht zu sehen!
  // genau in der Mitte des Sketches
  point(width/2, height/2);

  // waagrechte Linie oben
  // 1. Wert = waagrechte Position des Anfangspunktes
  // 2. Wert = senkrechte Position des Anfangspunktes

  // 3. Wert = waagrechte Position des Endpunktes
  // 4. Wert = senkrechte Position des Endpunktes
  line(10, 10, width-10, 10);

  // waagrechte Linie unten
  line(10, height-10, width-10, height-10);

  // Strichfarbe: grün
  stroke(0,255,0);

  // senkrechte Linie links
  line(50, 20, 50, height-20);

  // senkrechte Linie rechts
  line(width-50, 20, width-50, height-20);

  // Strichfarbe: blau
  stroke(0,0,255);

  // Linienstärke ändern
  strokeWeight(4);

  // dicker Strich  etwas oberhalb des Punktes
  line(width/2-40,height/2-40,width/2+40,height/2-40);
}

Ellipsen und Kreise

Demo

Im Web Editor anzeigen

Ellipsen und Kreise werden normalerweise vom Mittelpunkt aus gezeichnet – man kann dies aber auch ändern: Schaut mal bei den p5-Referenzen dazu nach!

p5

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

  background(255);

  // "width/2,height/2" = Mittelpunkt des Sketches
  strokeWeight(3);
  ellipse(width/2,height/2, 830, 360);

  // keine Kontur-Linie
  noStroke();

  // dunkle, graue Ellipse
  fill(50);
  ellipse(width/2,height/2, 500, 300);

  // grauer Kreis
  fill(150);
  ellipse(width/2,height/2, 250, 250);
}

Rechtecke

Demo

Im Web Editor anzeigen

Rechtecke werden normalerweise von der linken, oberen Ecke aus gezeichnet – man kann dies aber auch ändern: Schaut mal bei den p5-Referenzen dazu nach!

p5

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

  background(255);

  // das ist die Grundeinstellung – müsste man deswegen hier nicht extra schreiben!
  rectMode(CORNER);
  noFill();
  stroke(255,0,0);
  strokeWeight(2);

  // Rechteck von der linken, oberen Ecke aus gezeichnet (wegen "rectMode(CORNER);")
  rect(10,10,50,50);

  // damit werden die folgenden Rechtecke von der Mitte aus gezeichnet
  rectMode(CENTER);

  strokeWeight(2);
  stroke(0);
  rect(width/2,height/2, 600, 350);

  // keine Kontur-Linie
  noStroke();

  // dunkle, graue Fläche
  fill(50);
  rect(width/2,height/2, 500, 300);

  // graues Rechteck
  fill(150);
  rect(width/2,height/2, 250, 250);
}

Vertex

Linien, Rechtecke, Dreiecke sind eigentlich auch Vertexes – p5 vereinfacht uns aber das Arbeiten damit, in dem es dafür eigene Befehle zur Verfügung stellt …

Demo

Im Web Editor anzeigen

p5

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

  background(225);

  strokeWeight(4);
  fill(255, 0, 0);

  // hier die Liste mit den Punkten, die das Männchen erzeugen
  beginShape();
    vertex(97, 335);
    vertex(203, 220);
    vertex(190, 176);
    vertex(83, 96);
    vertex(193, 110);
    vertex(175, 63);
    vertex(273, 111);
    vertex(344, 119);
    vertex(279, 165);
    vertex(303, 175);
    vertex(289, 184);
    vertex(297, 193);
    vertex(243, 223);
    vertex(267, 335);
  endShape(CLOSE);

  // das Auge
  fill(255);
  ellipse(227,130,20,20);
}

Wiederholungen

Sich wiederholende Aufgaben kann der Computer sehr gut erledigen – der unten gezeigte p5-Code ist jedoch mühsam zu lesen/schreiben und fehleranfällig!

Auf den nächsten Slides wird der Code Schritt für Schritt verbessert…

Demo

Im Web Editor anzeigen

p5

function setup() {
  createCanvas(960, 400);
  background(225);
  strokeWeight(3);

  // 1. Linie
  line (50, 60, 50, 350);

  // 2. Linie (x-Wert + Abstand)
  line (100, 60, 100, 350);

  // 3. Linie (x-Wert + 2x Abstand)
  line (150, 60, 150, 350);

  // 4. Linie (x-Wert + 3x Abstand)
  line (200, 60, 200, 350);

  // 5. Linie (x-Wert + 4x Abstand)
  line (250, 60, 250, 350);

  // 6. Linie (x-Wert + 5x Abstand)
  line (300, 60, 300, 350);
}

Mustererkennung…

Was bleibt gleich? Was wiederholt sich? Gibt es Regelmäßigkeiten?


Wiederholungen mit Variablen

Die Linien sind immer identisch und haben jeweils die gleichen, vertikalen Anfangs -und End-Punkte. Nur die X-Position soll um jeweils 50px nach rechts verschoben werden…

Demo

Im Web Editor anzeigen

p5

function setup() {
  createCanvas(960, 400);
  background(225);
  strokeWeight(3);

  // Darstellung mit EINER Variable für den Abstand
  // einfacher und übersichtlicher zu schreiben:

  let a = 50; // Abstand zwischen den Linien

  // durch das Hinzufügen von Mehrfachen des Abstands a
  // übernimmt der Computer das Rechnen…

  // 1. Linie (x-Wert + 0x Abstand);
  line (50 + (0 * a), 60, 50 + (0 * a), 350);

  // 2. Linie (x-Wert + 1x Abstand)
  line (50 + (1 * a), 60, 50 + (1 * a), 350);

  // 3. Linie (x-Wert + 2x Abstand)
  line (50 + (2 * a), 60, 50 + (2 * a), 350);

  // 4. Linie (x-Wert + 3x Abstand)
  line (50 + (3 * a), 60, 50 + (3 * a), 350);

  // 5. Linie (x-Wert + 4x Abstand)
  line (50 + (4 * a), 60, 50 + (4 * a), 350);

  // 6. Linie (x-Wert + 5x Abstand)
  line (50 + (5 * a), 60, 50 + (5 * a), 350);
}

Das ist doch jetzt übersichtlicher und besser lesbar, oder? Und es wird deutlicher sichtbar, was gleich bleibt und was sich ändert…


Wiederholungen mit While-Loops

Den Computer für sich arbeiten lassen: das kann dieser besonders gut, wenn Sachen regelmäßig und wiederholbar sind…

Demo

Im Web Editor anzeigen

p5

function setup() {
    createCanvas(960, 400);
    background(225);
    strokeWeight(3);

    // Darstellung mit einer Variable für den Abstand "a"

    let a = 50; // Abstand zwischen den Linien
    let i = 0; // wird zum Hochzählen verwendet

    // solange i kleiner gleich 5 ist,
    // wird die Schleife wiederholt
    while (i <= 5) {
        line(50 + i * a, 60, 50 + i * a, 350);

        // gibt den jeweiligen Wert von i in der Console des Browsers aus
        // schaut mal nach: Im Web Editor befindet sich die Console 
        // direkt unterhalb des Code-Bereiches
        console.log("i: " + i);

        // hier wird jeweils „hochgezählt“ bis i = 5
        i = i + 1;
    }
}

Mehr Linien

Somit wird es auch ganz einfach, statt 5 z.B. 40 Linien zu zeichnen – schaut es Euch den Code an!

p5

function setup() {
    createCanvas(960, 400);
    background(225);
    strokeWeight(3);

    // Darstellung mit einer Variable für den Abstand "a"

    let a = 10; // Abstand zwischen den Linien
    let i = 0; // wird zum Hochzählen verwendet

    // solange i kleiner gleich 40 ist,
    // wird die Schleife wiederholt
    while (i <= 40) {
        line(50 + i * a, 60, 50 + i * a, 350);

        // gibt den jeweiligen Wert von i in der Console des Browsers aus
        // schaut mal nach: Im Web Editor befindet sich die Console 
        // direkt unterhalb des Code-Bereiches
        console.log("i: " + i);

        // hier wird jeweils „hochgezählt“ bis i = 5
        i = i + 1;
    }
}

Wiederholungen mit For-Loops

Die For-Loops machen das gleiche wie die gerade gezeigten While-Loops, die Schreibweise ist nur etwas kürzer…

Demo

Im Web Editor anzeigen

p5

function setup() {
    createCanvas(960, 400);
    background(225);
    strokeWeight(3);

    // Darstellung mit einer Variable für den Abstand "a"
    let a = 50; // Abstand zwischen den Linien

    // alle wichtigen Angaben werden in einer Zeile zusammengefasst
    for (let i = 0; i <= 5; i = i + 1) {
        line(50 + i * a, 60, 50 + i * a, 350);
    }
}

schaut mal, wie kurz und besser lesbar die Anweisung zum Zeichnen der Linie wird…


For-Loops umfangreich

Hätte jemand von Euch Lust, die Linien einzeln einzugeben – oder von Hand zu zeichnen?

Demo

Im Web Editor anzeigen

p5

function setup() {
    createCanvas(960, 400);
    background(225);
    strokeWeight(3);

    let a = 7; // Abstand zwischen den Linien hier enger

    // 110 Linien auf einen Schlag!
    for (let i = 0; i <= 110; i = i + 1) {
        line(50 + i * a, 60, 50 + i * a, 350);
    }
}

Der Code ist praktisch identisch mit dem vorherigen, nur der Abstand ist verkleinert und die Variable "i" darf bis auf 110 anwachsen, bevor die Schleife beendet wird.


For-Loops mit sich ändernder Strichfarbe

Die Strichfarbe ändert sich bei jedem Durchlauf des Loops

Demo

Im Web Editor anzeigen

p5

function setup() {
    createCanvas(960, 400);
    background(225);
    strokeWeight(3);

    let a = 7;

    for (let i = 0; i <= 110; i = i + 1) {

        // Die Strichfarbe ändert sich bei jedem Durchlauf des Loops
        let strichFarbe = 0 + 2 * i;
        console.log("Strichfarbe: " + strichFarbe);
        stroke(strichFarbe);

        line(50 + i * a, 60, 50 + i * a, 350);
    }
}

Doppelte For-Loops

So wenig Code für so viele Punkte …

Demo

Im Web Editor anzeigen

p5

function setup() {
    createCanvas(960, 400);
    background(255);
    fill(0);
    noStroke();

    let r = 5; // Radius des Kreises
    let a = 2 * r + 1; // Abstand = 2 * Radius + 1px;

    ellipseMode(RADIUS);

    // äußerer Loop für die senkrechte Wiederholung
    // innerer Loop für die waagrechte Wiederholung
    for (let y = a; y < height - a; y = y + a) {
        for (let x = a; x < width - a; x = x + a) {

            // umso größer y wird, desto heller werden die Kreise
            fill(0 + y / 2);

            ellipse(x, y, r, r);
        }
    }
}

Online Tutorial: Loops

Bitte schaut Euch das Video zu Hause an! Es ist sehr wichtig, dass Ihr versteht, wie Loops funktionieren…


Buchempfehlung

O'Reilly Verlag

With p5.js, you can think of your entire Web browser as your canvas for sketching with code!

Written by the lead p5.js developer and the founders of Processing, this book provides an introduction to the creative possibilities of today's Web, using JavaScript and HTML. With Getting Started with p5.js, you will:

  • Quickly learn programming basics, from variables to objects.
  • Understand the fundamentals of computer graphics.
  • Create interactive graphics with easy-to-follow projects.
  • Capture and manipulate webcam audio and video feeds in the browser.

Das Buch kostet gedruckt ca. $ 17.-


Buchempfehlung 2: Generative Gestaltung

Generative Gestaltung ist schon lange kein Geheimtipp mehr. Von Infografik bis zur Visualisierung von Sound, von freier Kunst bis zur Architektur und bei der Kommunikation im Raum hat sie sich einen festen Platz in Studium und gestalterischem Alltag erobert

Das sehr schön gestaltete Buch kostet € 40.- und enthält eine Fülle beeindruckender Beispiele, was man alles mit p5.js machen kann.

Website mit Codebeispielen

Zum Buch gehört eine Website, auf der man sich alle Beispiele und deren Code ansehen kann


Übungen

Bitte macht folgende 5 Übungen bis zur nächsten Vorlesung!

Auch und gerade beim Coding ist es nötig, dass Ihr das Erlernte durch Übungen versteht und vertieft…


Übung 1: Grundelemente

Briefing

  1. Größe des Sketch: 960px * 400px
  2. Hintergrund-Farbe: (75,125,150);
  3. Die rote Quadrate (255,0,0) sind 140px breit & hoch und befinden sich an den Ecken des Sketches
  4. Die weißen Linien habe eine Strichstärke von 10px und gehen genau durch die Mitte des Sketches
  5. Der gelbe Kreis (240,255,0) ist halbtransparent und hat einen Durchmesser von 350px – er liegt genau in der Mitte des Sketches;
  6. Der schwarze Kreis hat einen Strickstärke von 10px und einen Durchmesser von 200px – er hat keine Füllfarbe und liegt auch genau in der Mitte;
  7. Der rote Kreis (255,0,0) hat einen Durchmesser von 50px und liegt ebenfalls genau in der Mitte;

Speichern

Speichert Euren Sketch im Web-Editor von p5 als 01_uebungen_grundelemente


Übung 2: Smiley

Briefing

  1. Größe des Sketch: 960px * 400px
  2. Der Smiley befindet sich genau in der Mitte des Sketches und hat einen Durchmesser von 350px
  3. Hintergrundfarbe: (250,250,100);
  4. Farbe des Kreises: (255,0,0);
  5. Strichstärke („strokeWeight“) von Mund und Nase: 20px
  6. Augen, Nase und Mund nach Augenmass positionieren – gleiche Farbe wie der Hintergrund;

Speichern

Speichert Euren Sketch im Web-Editor von p5 als 02_uebungen_smiley


Übung 3: Graue Quadrate

Briefing

Bitte verwendet für die Darstellung der Quadrate die „for-loop-Schreibweise!“

  1. Größe des Sketch: 960px * 400px
  2. Hintergrundfarbe: weiß;
  3. Sechs Quadrate (Breite & Höhe: 160px);
  4. Erstes Quadrat komplett schwarz (0);
  5. Position des ersten Quadrates ganz am linken Rand und 80px von oben;
  6. nachfolgende Quadrate jeweils um 45 heller;
  7. Strichstärke der schwarzen Linien: 5px;
  8. Position der Linien: jeweils 10px ober- bzw. unterhalb der Quadrate

Speichern

Speichert Euren Sketch im Web-Editor von p5 als 03_uebungen_graue_quadrate

p5

function setup() {
    let d = ???; 

    // Positionierung und Grauwert der Quadrate sollen sich
    // bei jedem Loop verändern
    for(i=0;i<=5;i = i + 1){

        // wodurch ändert sich die Position des Quadrates?
        let xPos = ??? * d; 

        // wodurch wird die Füllfarbe jeweils um 45 heller?
        fill(0 + (???)); 

        rect(xPos,80,d,d);
    }
}

Achtung

Der Code ist noch nicht vollständig – wodurch müsst Ihr die ??? ersetzen, damit es funktioniert?


Übung 4: Wachsende Kreise

Bitte zeichnet die 76 Kreise nicht einzeln, sondern verwendet dafür ein „For-Loop“!

Zeichnet zuerst eine „Kreis-Scheibe“ und dann die zweite…

Briefing

  1. Größe des Sketch: 960 * 400
  2. Die Kreise befinden sich vertikal genau in der Mitte des Sketches!
  3. Der 1. Kreis hat einen Durchmesser von 10px
  4. Der Abstand zwischen den wachsenden Kreisen ist jeweils 10px
  5. 39 Kreise pro Kreis-Scheibe
  6. Hintergrundfarbe: rgb(70, 125, 200)
  7. Strichstärke („strokeWeight“) 1px

Speichern

Speichert Euren Sketch im Web-Editor von p5 als 04_uebungen_wachsende_kreise

Hier das Grundgerüst für den ersten Loop – bitte noch anpassen und ergänzen:

p5

function setup() {
    // …


    let abstand = 10;

    for (i = 0; i <= ???; i++) {
        let d = 10 + ??? * abstand;
        ellipse(width / 3, height / 2, ???, ???);
        ellipse(width - width / 3, height / 2, ???, ???);
    }
}

Der 2. Loop ist fast identisch, nur der Mittelpunkt befindet sich wo anders…

Achtung

Der Code ist noch nicht vollständig – wodurch müsst Ihr die ??? ersetzen, damit es funktioniert?


Übung 5: Rote Farbflächen

Zeichnet zuerst die Ellipse und dann die roten Farbflächen, die sich transparent über die Ellipse legen – verwendet für die Farbflächen wieder for-loops

Briefing

  1. Größe des Sketch: 960 * 400
  2. Die Ellipse (Farbe: (50,70,190)) befinden sich genau in der Mitte des Sketches und ist 890px breit und 230px hoch!
  3. Die Farbflächen (insgesamt 25 Stück) nutzen die gesamte Höhe des Sketches und jeweils eine Breite von 40px;
  4. Die erste Farbfläche hat folgende Füllfarbe: (0,0,0,160); (160 = Transparenz);
  5. Die nachfolgenden Farbflächen ändern den ersten RGB-Farbwert um jeweils 11

Speichern

Speichert Euren Sketch im Web-Editor von p5 als 05_uebungen_rote_farbflaeche

Hier das Grundgerüst für den Loop – bitte noch anpassen:

p5

function setup() {
    // …

    let d = ???; // Breite der Quadrate

    for (i = 0; i <= ???; i++) {
        let xPos = ???;
        fill(???);
        rect(???);
    }
}

Achtung

Der Code ist noch nicht vollständig – wodurch müsst Ihr die ??? ersetzen, damit es funktioniert?


Danke

Alle Scripte durchsuchen

Weitere Vorträge: