openprocessing.org/sketch/1175194
24. April 2021
2D-Grafikprogrammierung und -Animation
Spielerisch-experimentell kennenlernen
Joerg.Berkel @ phbern.ch & Oleg @ dat.alets.ch
Folien: https://hackmd.io/@jb/oed-progfx
Aufzeichnung: direkt zum p5.js-Einstieg
"Esc"-Taste in reveal.js-Präsentation
"Er hält Bildung für das edelste aller Ziele, warnt aber davor, dass Lernen ohne Sinn zum Irrtum führt."
– Demokrit
"Grafikprogrammierung ist sinnlich"
– @seismist
Vermutlicher Ablauf
- 10:35 Umfrage, Workshop-Ziele, …
- 10:40 Intro, Basics
- 10:55 Live-Demonstration
- 11:10 Hands-on / Unterstützung
- 11:30 Show & Tell / Austausch
- 11:50 Credits, weiterführendes Material
- 12:00 Bonus: Professionelle Demo zum Abschluss
Bildungsorientierte Programmiersprachen
Scratch 
Logo 
TigerJython?
Robotik-Sets?
Mikrocontroller?
Processing
Workshop-Ziele
- Kennenlernen: Grafische 2D-Programmierung
- Kennenlernen: JavaScript als Einsteiger-Sprache
- Informatikkonzepte: z.B. Pixel-Koordinaten, RGB-Farbmischung, Bildfrequenz (fps), ..
- Einblick in "Algorithmic Art" und "Demoszene" (UNESCO: 🇫🇮 & 🇩🇪)
Unsere Motivation
- Mut machen zum "Making": gestalten, kreativ, lebendig
- Bildung: Vernetzung, Neugier, Förderung
- "Webtechnologien sind universell und wichtig!"
- .oO( experimenteller Charakter mit steilen Zielen )
Ideale Vorkenntnisse
- Algorithmen = Abfolge von Befehlen
- Mathematik Grundwissen
- Englisch & phantasievolle Abkürzungen erkennen
- Copy & Paste beherrschen, Experimentieren
- in Dokumentation nachschlagen
Variablen?- Schleifen?
- Zufall?
- freie / Open Source Javascript Bibliothek (seit 2013)
- https://editor.p5js.org/ (seit 2018)
- benötigt nur Webbrowser (für Tablets geeignet)
- Beispiele überall einbettbar
- benötigt nur Webbrowser (für Tablets geeignet)
- stammt von "Processing" (seit 2001, Java)
- vielseitige p5js-Erweiterungen verfügbar
Ähnlichkeiten p5.js zu ..
- zu Logo: ein Programmablauf mit Funktionen, Parametern und Schleifen
- zu Scratch: Variablen, Zufallszahlen, Maus-Interaktion ..
- zu Mikrocontrollern: loop()-Endlosschleife heisst draw()
Anders als gewohnt
- textbasiert und nur englisch
- keine "Stiftmetapher", keine zeichnet )
- kein simples REPEAT (wie Logo & TigerJython)
Handwerkzeug
p5.js Grundlagen-Spickzettel auf deutsch
p5.js Cheat Sheet ausführlich (eng)
Alle Befehle erläutert: https://p5js.org/reference/
Koordinatensystem vs. Raster
- Ursprungs-Punkt : Scratch vs. Processing
p5.js / Javascript: Befehle und Syntax
- grossKleinschreibung befolgen!
- Semikolon; an Ende von Befehlszeile
- Parameter durch , Komma getrennt
- Variable mit let setzen (oder var / const)
let lieblingsZahl = 42;
stroke(0); // Kommentar: Strichfarbe 0 = schwarz, 255 = weiss
fill(lieblingsZahl); // Füllfarbe dunkles Schwarz
background('red');
text("mein Text an diese Koordinaten setzen", 20, 40);
/* 'Eigennamen' mit Apostrophen
oder "Anführungszeichen". Dies ist ein
mehrzeiliger Kommentar */
befehl(parameter1, parameter2,…);
- Befehle können je nach Anzahl der Parameter unterschiedlich funktionieren:
fill(42); // Nur ein Parameter setzt den Grauwert
// 0 = schwarz, 255 = weiss
fill(42, 0.5); // Zweiter Parameter setzt die Transparenz
// 0.5 = 50% Deckkraft (teilweise durchscheinend)
- Und was passiert bei drei Parametern?
Beispiel: Additive Farbmischung / Interaktion
- Befehl background(0,0,255);
- Drei Variablen r g und b mischen die Farbe
- 0 = keine Mischfarbe und 255 = 100% Mischfarbe
https://editor.p5js.org/p5/sketches/Dom:_Slider
Demonstration, erster "Sketch"
Schematische Darstellung:
Hands-on! mit Beispielen
- zwei Gruppen: Blue Pill / Red Pill
- ein "Breakout"-Raum (Audio neu verbinden!) / Timer 20min
- Code lesen ist wichtiger als schreiben!
Aktivitäten:
- A: Codebeispiele zum Stöbern und Experimentieren: https://ige.li/p5
- … weitere Inspirationen B,C und D auf der folgenden Folie
-
B: … spielerische JavaScript-Pause mit https://patatap.com
( Quellcode: https://github.com/jonobr1/Neuronal-Synchrony ) -
C: Kleine Galerie anschauen: https://db.schoolofdata.ch/event/10
-
D: oder zwei Folien weiter rechts durch die Tutorials blättern
Austausch: Feedback Erfahrungen / …
p5.js Basic-Tutorials (meist englisch)
- https://happycoding.io/
- The Coding Train with Dan Shiffman
- https://codeguppy.com/site/download/tariq/creative_coding_for_kids.pdf
https://steinphysik.de/programmieren-im-kunstunterricht/ (auch 
)- 9.-12. Klasse (eng): https://nycdoe-cs4all.github.io/
- Künstlerische Einführung (französisch)
(der Hochschule Nantes: https://ateliernum.github.io/ )
p5.js Tutorials für Fortgeschrittenere
Veranstaltungen
heute C64: www.transmission64.org (16-24 Uhr)-
- Mai: www.demonights.ch
- 21.-24. Okt.: PlayBern Gamejam
- im November?: Graffathon-Wochenende
weitere Bildungsangebote?
- p5.js-Support im Sek I/II-Unterricht: joerg.berkel@phbern.ch
- Projektstart Pingala durch Echtzeit-Verein
- Creative Coding Fest: ccfest.rocks
- Processing Community Day: z.B. basel.codes
- –> viele MOOCs …
Weitere Links
- Community (+ Statement): https://p5js.org/community/
- Wünsche / Bugs?: https://github.com/processing/p5.js-web-editor/issues/1783
- Bildungsforum: https://discourse.processing.org/c/teaching/24
- Reddit: https://www.reddit.com/r/p5js/
Dankeschön!
Sei informiert via Slack-Kanal #you-should !
… oder kontaktiere uns via E-Mail!
Bonus: Cevian Raspberry von Vantage (CH) 
2013 in Processing gemacht: Sketch als Quellcode
wird via BBB abgespielt: https://vimeo.com/72928093 (Epilepsie-Warnung ;-)
… oder eine meditative PC-Demo: Intrinsic Gravity von Still
openprocessing.org/sketch/1175194
{"metaMigratedAt":"2023-06-14T21:07:02.890Z","metaMigratedFrom":"YAML","title":"2D-Grafikprogrammierung und -Animation mit p5.js","breaks":true,"description":"Spielerisch-experimentell kennenlernen","lang":"de-de","slideOptions":"{\"transition\":\"convex\",\"theme\":\"solarized\"}","contributors":"[{\"id\":\"bd1611b2-0215-4072-88ed-3c09ed28df42\",\"add\":25318,\"del\":18176},{\"id\":\"a4deb1ce-5c23-401b-81e4-d8091a101d53\",\"add\":6228,\"del\":2275},{\"id\":null,\"add\":14,\"del\":3}]"}