P5 Grundlagen / 2018-12-21 / Matthias Edler-Golla, CC BY-SA 4.0


|



 



Themen

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

Coding mit P5 (Weiterentwicklung von Processing)

  • Interface von Brackets
  • Koordinaten-System
  • Kommentare
  • Farben in Processing
  • Grundformen (Punkt, Linie, Ellipsen, Rechtecke)
  • Vertex
  • Variablen-Typen
  • 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.


Interaction Design = Design of Behavior

https://www.jibo.com/

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

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


P5

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


p5.js

https://p5js.org/


Beispiels- und Übungspaket

Bitte ladet das Beispiel- und Übungspaket runter und entpackt es – wir brauchen diese jetzt gleich…


Arbeitsprozess mit Brackets

  1. Brackets starten
  2. relevante Ordner (hier „01-erster-Sketch“) in Brackets öffnen und „sketch.js“ auswählen
  3. in Brackets auf „Live preview" (oben rechts) klicken
  4. Brackets und Google Chrome so anordnen, dass man beide Fenster gleichzeitig sieht
  5. Code bei „sketch.js“ eingeben, Datei sichern
  6. Im Browser „Chrome“ ansehen, ob es richtig aussieht

Brackets ist kostenlos!

Ihr könnt Euch das Programm hier kostenlose herunterladen – es läuft auf Mac, Windows und auch Linux…


erster P5 Sketch

Probiert es gleich mal in Brackets aus und verändert z.B. die Größe der Ellipse oder den Text!

Öffnet dafür 01-erster-Sketch aus dem heruntergeladenen Paket…

Achtet auf die Strichpunkte hinter jeder Anweisung – sonst funktioniert es nicht…

P5

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

  // Hintergrundfarbe, hier weiss
  background(255);

  // 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.

Nutzt Kommentare, wenn Ihr selber Code schreibt!

CodePen

Codepen-Sketch


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
*/

Koordinaten-System

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


Display-Größe und Variablen

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
  var 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);
}

CodePen

Codepen-Sketch


Nachschlagewerk

https://p5js.org/reference/

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


Farben in P5

P5

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

  // weisser Sketch-Hintergrund
  background(255);

  // alle Elemente ohne Rand
  noStroke();

  fill(255,0,0);
  textSize(16);
  text("Farbflächen sind von links oben nach rechts unten positioniert", 140, 30);

  // 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"; (RGB = Rot/Grün/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);

  // roter Rahmen eines Rechtecks
  strokeWeight(10);
  stroke(255,0,0);
  noFill();

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

Photoshop Color Selector

CodePen

Codepen-Sketch


Zeichnen von Punkten und Linien

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);
}

CodePen

Codepen-Sketch


Ellipsen und Kreise

Ellipsen und Kreise werden normalerweise vom Mittelpunkt aus gezeichnet

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);
}

CodePen

Codepen-Sketch


Rechtecke

Rechtecke werden normalerweise von der linken, oberen Ecke aus gezeichnet, man kann dies aber mit rectMode umschalten…

P5

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

  background(255);

  rectMode(CORNER);
  noFill();
  stroke(255,0,0);
  strokeWeight(2);

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

  // damit werden auch die 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);
}

CodePen

Codepen-Sketch


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 …

P5

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

  background(255);

  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);
}

CodePen

Codepen-Sketch


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!

P5

function setup() {
  createCanvas(960, 400);
  background(255);
  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?

CodePen

Codepen-Sketch


Wiederholungen mit Variablen

Die Linien sind immer identisch, sollen aber um jeweils 50px nach rechts verschoben werden…

P5

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

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

  var 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…

CodePen

Codepen-Sketch


Wiederholungen mit While-Loops

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

P5

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

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

  var a = 50; // Abstand zwischen den Linien
  var ende = 6; // Ende der Wiederholungen

  var i = 0;

  // solange i kleiner als "ende" ist,
  // wird die Schleife wiederholt
  while (i < ende) {
    line(50 + i * a, 60, 50 + i * a, 350);

    // gibt den jeweiligen Wert von i in der Console des Browsers aus
    console.log("i: " + i);

    i = i + 1;
  }
}

CodePen

Codepen-Sketch


Wiederholungen mit For-Loops

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

P5

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

  var a = 50; // Abstand zwischen den Linien
  var ende = 6; // Ende der Wiederholungen

  // in der Schleife wird bei jeder Wiederholung
  // das i um eins erhöht, solange bis i den Wert "ende" erreicht hat
  for (var i = 0; i < ende; i = i + 1){
    line(50 + (i * a), 60, 50 + (i * a), 350);
  }
}

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

CodePen

Codepen-Sketch


For-Loops umfangreich

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

P5

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

  var a = 8; // Abstand zwischen den Linien hier enger
  var ende = 110; // Ende der Wiederholungen

  // in der Schleife wird bei jeder Wiederholung
  // das i um eins erhöht, solange bis i den Wert "ende" erreicht hat

  for (var i = 0; i < ende; 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.

CodePen

Codepen-Sketch


Doppelte For-Loops

So wenig Code für so viele Punkte …

P5

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

  var r = 5; // Radius des Kreises
  var 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 (var y = a; y < height - a; y = y + a) {
    for (var 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);
    }
  }
}

CodePen

Codepen-Sketch


Online Tutorial: Loops

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


Web Server

Bild von Sean Ellis

Ein Webserver ist ein Computer, der mit dem Internet verbunden ist und spezielle Software enthält, die es ihm ermöglicht, Dateien über das Internet an Webbrowser auszuliefern.

Arbeitet Ihr an Euren p5-Dateien auf Eurer eigenen Festplatte, sind diese nur local zugänglich. Wollt Ihr diese allgemein zugänglich machen, müsst Ihr diese auf einen Web Server hochladen!


Webspace bei fk12.org

Jede(r) von Euch hat für die Dauer dieses Kurses einen eigenen Webspace – die jeweiligen Zugangsdaten habt Ihr von mir via Mail bekommen!

Bitte ladet dort nur Eure Übungen hoch!

Achtung: Alles was Ihr dort hochladet, kann sofort von jedem internet-fähigen Gerät aus abgerufen werden! Achtet deswegen darauf, nur Sachen hochzuladen, für die Ihr das Copyright oder die ausdrückliche Erlaubnis des Copyright-Inhabers habt!


FTP: File Transfer Protocol

FTP wird benutzt, um Dateien vom Server zum Client (Herunterladen), vom Client zum Server (Hochladen) oder clientgesteuert zwischen zwei FTP-Servern zu übertragen (File Exchange Protocol). Außerdem können mit FTP Verzeichnisse angelegt und ausgelesen sowie Verzeichnisse und Dateien umbenannt oder gelöscht werden.

Um Eure Übungen usw. auf den Webserver hochzuladen, braucht Ihr ein Programm, das FTP versteht.

Es gibt kostenlose Programme, die Ihr dafür verwenden könnt – siehe nächste Seite!


Cyberduck: kostenloses FTP-Programm

https://cyberduck.io/

Um Dateien zwischen Ihrem Rechner und dem Web-Server auszutauschen, kopieren Sie diese ganz einfach per Drag&Drop vom Finder zu Cyberduck. Unterbrochene Down- und Uploads können von der Freeware jederzeit wieder aufgenommen werden.

Cyberduck ist auf allen iMacs hier im Mac-Labor installiert!


Via Cyberduck mit eigenem Webspace verbinden

Gebt dort die Daten ein, die ich Euch als Mail geschickt habe! Achtung: Jede(r) von Euch hat ihre/seine eigenen Zugangsdaten und kommt somit auch nur auf den eigenen Webspace!

Bei erfolgreicher Anmeldung solltet Ihr im Cyberduck-Fenster das Gleiche angezeigt bekommen wie ich…

Dort seht Ihr den Inhalt Eures Verzeichnis auf der Festplatte des Webservers fk12.org


Datenaustausch zwischen Server und lokaler Festplatte

Ihr könnt die Daten zwischen Server und Festplatte einfach hin- und herziehen – Drag & Drop!

  1. Legt auf Eurem Rechner ein lokales Verzeichnis an, das Ihr p5-Coding-Uebungen nennt.
  2. Kopiert jeweils nach Fertigstellung Eurer Übungen diese auf Euren Webspace – bitte den gesamten Ordner (z.B. uebung-01-grundelemente) mit den beiden Dateien index.html und sketch.js
  3. Jetzt habt Ihr komplett identische Kopien sowohl lokal als auch auf dem Webserver
  4. Ändert Ihr lokal Dateien, müsst Ihr diese erst wieder auf den Webserver hochladen, bevor diese online sichtbar werden
  5. Versucht immer, den lokale Ordner und den Online-Ordner identisch zu halten

Somit könntet Ihr z.B. auch gut in der Hochschule an den Schulrechnern arbeiten, die Daten auf den Server hochladen und zuhause auf Eurem Rechner weiterarbeiten…


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

maximal 2 Leute pro iMac!

… zu Hause sollte jede(r) von Euch die Übungen selbst (weiter-)machen!


Ü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 innerhalb des heruntergeladenen Paketes bei uebung-01-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 innerhalb des heruntergeladenen Paketes bei uebung-02-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 innerhalb des heruntergeladenen Paketes bei uebung-03-graue-quadrate

P5

var d = 160; // Breite & Höhe der Quadrate

// Positionierung und Grauwert der Quadrate sollen sich
// bei jedem Loop verändern
for(i=0;i<=5;i = i + 1){
  var xPos = ??? * d; // wodurch ändert sich die Position des Quadrates?
  fill(0 + (???)); // wodurch wird die Füllfarbe jeweils um 45 heller?
  rect(xPos,80,d,d);
}

Ü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 erst die zweite…

Briefing

  1. Größe des Sketch: 900 * 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

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

P5

var abstand = 10;

// Kreisdurchmesser fängt mit 10 an
// und wie wächst dieser dann?
for (i = 0; i <= 38; i = i + 1) {
  var d = 10 + (???); // wodurch kann der Kreisdurchmesser wachsen?
  ellipse(320, height/2, d, d);
}

Speichern

Speichert Euren Sketch innerhalb des heruntergeladenen Paketes bei uebung-04-kreise


Ü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: 900 * 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

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

P5

int d = 40; // Breite der Quadrate

for(i=0;i<=24;i=i+1){
  var xPos = ??? * d; // wodurch ändert sich die Position des Quadrates?
  fill(0 + (???),0,0,160); // wodurch wird der Rotanteil der Füllfarbe jeweils um 11 heller?
  rect(xPos,0,d,height);
}

Speichern

Speichert Euren Sketch innerhalb des heruntergeladenen Paketes bei uebung-05-rote-Flaechen


Danke

Bitte macht die Übungen jetzt gleich – oder sonst bis zum nächsten Mal!

Weitere Vorträge: