Code & Design Tag 1 sfgz.ch-1.12.2017 Hanna Züllig - internauta by Hanna Züllig
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Lerninhalte
Code & Design
sfgz.ch—1.12.2017
Hanna Züllig
Tag 1
sfgz.ch—2018, Code & Design © H. Züllig 1
Anlass 1 Anlass 2 Anlass 3
1.12.2018 14.12.2018 (halbtags) 11.01.2019
Einführung ins Modul – Code p5js: – Code p5js:
– Programm Überblick Schlaufen, Funktionen,
– Einstieg Code & Zufall Arrays, Eingaben
Design über Tastatur,
– Aufgaben und – Übung: Daten einlesen (API),
Abgabe Muster Libraries GUI
– Code p5js:
Arbeitsumgebung – Übung:
Formen, Stile, Agent
Farben, Variablen,
Fonts – Aufgabe:
Wetterdaten einlesen
– Übungen darstellen
– Tagesaufgabe:
Abstract Clock
Präsentation
sfgz.ch—2018, Code & Design © H. Züllig 2
Anlass 4 Anlass 5 Programmierkonzepte
25.01.2018 – Variablen
18.01.2018 (halbtags) – Math-Operationen
Arbeiten am eigenen – if-else-Konstrukte, switch
Arbeiten am eigenen Projekt – Schlaufen
Projekt – Funktionen
– Events
Nachmittags:
– Arrays
Präsentation – Libraries (GUI)
– API
sfgz.ch—2018, Code & Design © H. Züllig 3
Lerninhalte
Abgaben
Abgabe 1
«Abstract Clock »
– Abgabe bis am 20.12.2018 abends
Abgabe 2
«Wetter App»
– Präsentation und Abgabe
25.01.2019 nachmittags
sfgz.ch—2018, Code & Design © H. Züllig 4
Lerninhalte
Beurteilung
– Formal korrekter Code
– Verwendung der Programmierkonzepte, die behandelt wurden
– Experimentierfreudigkeit bezüglich Zusammenspiel Code & Design
(Parametrisches Design)
– Gestaltungsidee
– Umsetzung der Idee
sfgz.ch—2018, Code & Design © H. Züllig 5
Inspiration
John Maeda
https://maedastudio.com
https://www.ted.com/talks/john_maeda_on_design
ab 5:47 s
Abb.
Plakat aus der Serie «Morisawa 10 Poster, 1996»
sfgz.ch—2018, Code & Design © H. Züllig 6
Code & Design
Code & Design ?
Aufgabenfelder, bei denen die
beiden zusammenspielen müssen.
Parametrisches Design?
Was ist das?
Aufgabenfelder?
Datenvisualisierung?
Was hat Datenvisualisierung mit den
beiden Begriffen oben zu tun?
sfgz.ch—2018, Code & Design © H. Züllig 7
Datenstories – Explorable
https://www.morgenpost.de/grafik/article139572405/So-stark-steigen-die-Wohnungspreise-in-Berlins-Kiezen.html?config=interactive
sfgz.ch—2018, Code & Design © H. Züllig 8
Inspiration
Martin Wattenberg
http://turbulence.org/Works/song/gallery/gallery.html
http://www.bewitched.com/song.html
http://hint.fm/wind/
https://research.google.com/bigpicture/
sfgz.ch—2018, Code & Design © H. Züllig 9
Inspiration – Data Art
Zach Liebermann
http://www.yesyesno.com/nike-collab-paint-with-your-feet/
sfgz.ch—2018, Code & Design © H. Züllig 10Inspiration
Michael Hansmeyer
http://www.michael-hansmeyer.com
Computational Architecture
sfgz.ch—2018, Code & Design © H. Züllig 11Karl Gerstner «Programme entwerfen», Abb. Morphologischer Kasten sfgz.ch—2018, Code & Design © H. Züllig 12
Inspiration John Maeda
https://github.com/jeffThompson/CreativeProgramming1/blob/master/Assignments/Week04_Clocks.md
sfgz.ch—2018, Code & Design © H. Züllig 13sfgz.ch—2018, Code & Design © H. Züllig 14
Inspiration Andreas Gysin, Sidi Vanetti
http://hms.gysin-vanetti.com
sfgz.ch—2018, Code & Design © H. Züllig 15Einführung Creative Coding HKBern
StudentInnen CAS DataViz
Lukas Koller: https://www.internauta.ch/wbg/Clock_Lukas_Koller
Adrian Riser: https://www.internauta.ch/wbg/Creative_Coding
sfgz.ch—2018, Code & Design © H. Züllig 16Einführung Creative Coding HKBern
StudentInnen CAS DataViz
Gestalter, Informatiker, Marketingleute
Nicole Keller: https://www.internauta.ch/wbg/Clock_Keller_Nicole
Andreas Moor: https://www.internauta.ch/wbg/Uhr_Andreas_Moor.html
sfgz.ch—2018, Code & Design © H. Züllig 17Einführung Creative Coding HKBern
Marc Habegger: https://www.internauta.ch/wbg/Marc-Habegger
Werner Dreier: https://www.internauta.ch/wbg/WernerDreier
sfgz.ch—2018, Code & Design © H. Züllig 18Aufgabe 1
Briefing
1.12 2018, Creative Coding, Hanna Züllg
Aufgabe: eine (abstrakte) Uhr programmieren
To do:
Visualisiere die laufende Zeit (und allenfalls das Datum) in
einem p5.js Projekt
Untersuche/Beachte:
– Übersetzung der zeitlichen in visuelle Parameter
– Veränderungen
– die aktuelle Zeit muss nicht direkt ablesbar sein,
die Übersetzung kann auch abstrakt sein
– Beispiel Übersetzung in Winkel, in Grössen, in Sättigung einer Farbe, in
Helligkeit
– Zahlen und Text können erscheinen, müssen aber nicht
Links:
– http://www.cabinetmagazine.org/issues/29/foer.php
– https://courses.ideate.cmu.edu/15-104/f2016/category/project-06-abstract-clock/
– https://codepen.io/collection/DqRNLQ/3/
– https://www.youtube.com/watch?v=E4RyStef-gY
– https://processing.org/examples/clock.html
Abgabe bis am 20. Dezember auf OneDrive
sfgz.ch—2018, Code & Design © H. Züllig 19Eine Community, zwei Umgebungen
processing.org p5js.org
älter, mehr Tutorials, Beispiele jünger
Programmiersprache basiert auf Programmiersprache basiert auf
Java Javascript
muss compiliert werden, Applets laufen läuft auf Browser -> Web
nicht mehr auf Browsern
PDF Export Vektordaten -> Print SVG Export mittels Library fehlerhaft
sfgz.ch—2018, Code & Design © H. Züllig 20p5.js Basics
Arbeitsumgebung p5.js
sfgz.ch—2018, Code & Design © H. Züllig 21p5.js Basics
Projektaufbau:
«Projektname» (Folder)
– libraries (Folder)
– index.html
– sketch.js
index.html ist das html File, welches der lokale Server im Browser öffnet
sketch.js ist das File, in dem wir die Codezeilen schreiben, um die Dartstellung anzupassen.
Öffnen wir im Chrome die Entwicklertools – über «Anzeigen» –> «Entwickler» –> «Entwicklertools» so
sehen wir im Code, dass p5.js uns das «canvas» Objekt generiert. Auf dieses Objekt kann mit JavaScript
gezeichnet werden. https://www.w3schools.com/html/html5_canvas.asp
sfgz.ch—2018, Code & Design © H. Züllig 22p5.js Basics
sketch.js: wir finden hier zwei Befehlsblöcke.
Der erste, die Funktion setup wird einmal bei Programmstart ausgeführt.
Dieser Block enthält deshalb Definitionen, die sich im Laufe des Programms
nicht ändern. Wie zum Beispiel die Grösse der «Leinwand», canvas genannt.
Die zweite, die Funktion draw() wird standardmässig automatisch 60 Mal pro
Sekunde aufgerufen.
Referenz: http://p5js.org/reference/
sfgz.ch—2018, Code & Design © H. Züllig 23p5.js Basics
Koordinatensystem
Geometrie P5Js (und processing und java....)
CSS ebenfalls
sfgz.ch—2018, Code & Design © H. Züllig 24Input Block 1, sketch 1–4
sketch1
In die Funktion draw werden die Befehle zum Zeichnen geschrieben.
Für die Grundformen gibt es fertige Befehle.
Beispiel Rechteck:
rect(50,50,100,200);
Die Bedeutung der Reihenfolge der Angaben in den runden Klammern ist genau definiert.
– die erste Zahl: x-Koordinate
– die zweite Zahl: y-Koordinate
– die dritte Zahl: Breite
– die vierte Zahl: Höhe
Das alles schaut man in der Referenz nach! http://p5js.org/reference/
sfgz.ch—2018, Code & Design © H. Züllig 25Zeit & Datum
In p5.js stehen diese Befehle zur Verfügung:
day(); Tag 1–31
hour(); Stunde 0–23
minute(); Minute 0–59
millis(); Millisekunden Tausendstel Sekunden seit das spezifische Programm läuft
month(); Monat 1–12
second(); Sekunde 0-59
year(); Jahr Aktuelles Jahr, vierstellig z.Bsp. 2018
sketch2
Hier benutzen wir den aktuellen Wert der Sekunde, für die Breite des Rechtecks.
Mit dem Schlüsselwort var definieren wir eine Variable.
var sec = second();
Der Wert aus dem Befehl second() wird in die Variable sec geschrieben.
Man kann sec dann brauchen wie eine Zahl.
sfgz.ch—2018, Code & Design © H. Züllig 26Farbe
Farbdefinition mit
sketch3 einem,
drei und
vier Parametern:
fill(255);//schwarz bis weiss 0-255
fill(255,0,0)//rgb, je 0-255
fill(255,0,0,100)//rgba, je 0-255
Entweder über color(r,g,b) eine neue Farbe definieren, in eine Variable
schreiben und dann verwenden.
Oder direkt die Farbwerte in die Stildefinition schreiben.
fill(r,g,b)
sfgz.ch—2018, Code & Design © H. Züllig 27Schriften
sketch4
http://www.1001fonts.com/led-fonts.html
Konkatenation –> Zusammenfügen von Variablen und String:
nf(sec, 2,0);
die Funktion nf(zahl, right, left) formatiert eine Zahl gemäss den Angaben in der Klammer.
right meint die Anzahl der Stellen rechts vom Komma, left links.
sfgz.ch—2018, Code & Design © H. Züllig 28Schriften: Konkatenation
Konkatenation in JavaScript
Konkatenation –> Zusammenfügen von Variablen und Zeichenfolgen in
eine neue zusammenhängende Zeichenfolge:
Achtung Anführungszeichen nehmen, siehe Screenshot, nicht Hochkommas
Variable String Variable
?? wie fügt man das zusammen?
Variable +” String ”+ Variable
Stellt euch Kettenglieder vor, die zusammengeschmiedet werden müssen. Die
Stücke zwischendurch verbinden Variablen und Zeichenfolgen (englisch String).
Die Verbindungsglieder bestehen aus
+” oder “+
wobei das Anführungszeichen zum String schaut (und gehört) und das plus zur
Variable. Es ist eigentlich ganz einfach, muss aber sauber gemacht werden.
” String ”+ Variable
” String ”+ Variable +” String ”
sfgz.ch—2018, Code & Design © H. Züllig 29Block1 Übungen
Übungen
sketch1:
– Zeichne andere Formen, indem du diese Befehle in der Referenz nachschaust:
line(), ellipse(), arc(), triangle()
sketch2:
– Gib analog zu Sekunde den Wert der Minute und der Stunde in je eine weitere Variable.
Benutze diese Variablen für andere Masse und andere Formen.
sketch3:
– Erstelle eine Ellipse in der Mitte der Canvas. Referenz hierzu: https://p5js.org/reference/
2D Primitives. Mach den Radius abhängig von den Sekunden.
– Integriere die Transparenz in deinen Sketch, lege zwei Formen übereinander, versuche
Farben zu mischen
sketch4:
– Lade eine andere Schrift, ändere die Schriftgrösse
– Positioniere die Textbox woanders
– Ändere die Schriftgrösse in Abhängigkeit von den Parametern Zeit
– Notiere allenfalls Fragen
Weiterführend: Kreiere einen eigenen Sketch, bei dem du das Gelernte frei anwendest.
Benutze die Variablen, die du über Zeit und Datum abfragen kannst. Gestalte damit:
– Formen und Grössen, Farben, Schrift
Pair Programming:
Ein Programmierer schreibt den Code, während der andere den geschriebenen Code kontrolliert sowie Probleme, die ihm dabei auffallen, sofort
anspricht. Diese können dann sofort (im Gespräch zu zweit) gelöst werden. Die beiden Programmierer sollten sich bezüglich dieser beiden Rollen
abwechseln. Auch die Zusammensetzung der Paare sollte sich häufig ändern.
sfgz.ch—2018, Code & Design © H. Züllig 30Input Block2, sketch5–6
sketch5
arc(width/2, height/2, 300, 300, 0, 180);
https://p5js.org/reference/#/p5/arc
Herausforderungen
Wie «übersetze» ich Sekunden, Minuten und Stunden in die entsprechenden Winkel?
p5 bietet mir eine Funktion an: map, https://p5js.org/reference/#/p5/map
Syntax: map(value,altstart1,altstop1,neustart2,neustop2).
Damit kann ich einen Wert von einem Wertebereich in einen anderen übersetzen.
var winkelsec = map(sec, 0, 60, 0, 360);
Die obige Funktion übersetzt mir Sekunden vom alten Wertebereich
0–60 in einen neuen der von 0–360 geht.
Diese Übersetzung ist einfach, die könntest du auch rechnen, indem du mal 6 multiplizierst.
Aber stelle dir vor, du möchtest die Sekunden 0-60 in Transparenzwerte von 50-155 übersetzen.
Da ist die map Funktion sehr nützlich:
var alpha = map(sec, 0, 60, 50, 155);
sfgz.ch—2018, Code & Design © H. Züllig 31Umrechnungsfunktion
map
Die Funktion map übersetzt einen Wert innerhalb eines Wertebereichs relativ in einen anderen Bereich.
die Parameter sind folgende:
map(wert, min_alterbereich, max_alterbereich, min_neuerbereich, max_neuerbereich);
Beispiel:
map(9,1,20,1,12); //Resultat 5.631579
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12
sfgz.ch—2018, Code & Design © H. Züllig 32Abstrakte Uhr
Skizzieren
Finde dein Bild für deine abstrakte Uhr.
Skizziere von Hand. Bleibe einfach.
Überprüfe deine eigene Idee bezüglich Machbarkeit!
Welche Dinge kennst du bereits im Code, welche kannst du dir vielleicht erarbeiten,
was musst du vereinfachen, weil es zu kompliziert ist?
sfgz.ch—2018, Code & Design © H. Züllig 33Input Rotation
sketch6
Drehen geschieht in p5js indem ich nicht ein einzelnes Objekt, sondern das ganze
Koordinatensystem drehe. Zuerst tönt das kompliziert, aber es hat Vorteile.
Man kann so ganze Formationen gemeinsam drehen.
sfgz.ch—2018, Code & Design © H. Züllig 34Input Rotation
Standardmässig passiert die Rotation des Koordinatensystems um den Nullpunkt links oben.
Das bedeutet aber, dass das Objekt aus dem sichtbaren Bereich gedreht wird!
Probier das mal aus!
sfgz.ch—2018, Code & Design © H. Züllig 35Input Rotation
Wenn ich hingegen ein Objekt um sein Zentrum drehen möchte, muss ich zuerst den
Nullpunkt des Koordinatensystems verschieben.
Das macht man mit dem Befehl translate(x,y);
Probiere das Objekt von vorher um sein Zentrum zu drehen!
Ist es das, was du erwartet hast?
Achtung der Nullpunkt liegt jetzt auf 60, 110!!
Wie zeichnest du das Rechteck nun damit es an der richtigen Position liegt?
sfgz.ch—2018, Code & Design © H. Züllig 36Input Rotation
Wenn ich das Koordinatensystem verschoben und gedreht habe, dann bleibt es so.
Alle weiteren Formen werden verschoben und gedreht gezeichnet.
Manchmal möchte man aber etwas drehen und den Rest nicht.
Dann speicherst du zuerst die alte Position des Koordinatensystems ab.
Das machst du mit der Funktion push();
Dann machst du deine Transformationen und zeichnest die Objekte.
Um das Koordinatensystem wieder zurück auf die alte Position zu bringen,
rufst du den Befehl pop(); auf.
Alle Schritte im Überblick:
Beachte die Befehle für die drei Rechtecke sind immer dieselben!
Kannst du nun den Zeiger bei sketch 6 zum Rotieren bringen?
sfgz.ch—2018, Code & Design © H. Züllig 37Aufgabe aufs nächste Mal
Repetition
1.12 2018, Creative Coding, Hanna Züllg
To do:
Repetiere für dich mit Hilfe von diesem Skript nochmals alle Konzepte
in den Sketches 1–5. Mache kleine Anpassungen im Code so lange
bis du die Befehle verstanden hast. Wir werden auf diesen Konzepten aufbauen!
Allenfalls zur Repetition Basic Videos von Daniel Shiffmann schauen:
https://www.youtube.com/watch?v=c3TeLi6Ns1E&index=3&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
https://www.youtube.com/watch?v=riiJTF5-N7c&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=4
(Sketch 6 Rotation freiwillig)
sfgz.ch—2018, Code & Design © H. Züllig 38Sie können auch lesen
