<style>.reveal section img { border: 0px; margin: 0px 0px; box-shadow: none; } .reveal { font-family: 'Lato',sans-serif; } .reveal a { color: #ed225d !important; } </style> <iframe src="https://openprocessing.org/sketch/1175194/embed/" width="100%" height="500" framepadding="0" frameborder="0"></iframe><small>openprocessing.org/sketch/1175194</small> --- <small>24. April 2021</small> #### 2D-Grafikprogrammierung und -Animation ##### Spielerisch-experimentell kennenlernen <!--  --> Joerg.Berkel @ phbern.ch &nbsp;&amp;&nbsp; Oleg @ dat.alets.ch  Folien: https://hackmd.io/@jb/oed-progfx :red_circle: Aufzeichnung: [direkt zum p5.js-Einstieg](https://tube.switch.ch/videos/Wnzieq6ub4#20:02) <font style="font-size:80%">:bulb: "Esc"-Taste in [reveal.js](https://github.com/hakimel/reveal.js/)-[Präsentation](https://hackmd.io)</font> Note: ### :hear_no_evil: Announcements  Spielerisch-experimentell 2D-Grafikprogrammierung und -Animation kennenlernen am #openeducationday mit #p5js #processing #opensource https://openeducationday.ch/programm-2021/spielerisch-experimentell-2d-grafikprogrammierung-und-animation-kennenlernen/ - https://forum.opendata.ch/t/24-4-open-education-day-2021/770/2 - https://www.echtzeitkultur.org/en/2021/open-education-day-21/ --- <span style="font-size:125%">"Er hält Bildung für das edelste aller Ziele, warnt aber davor, dass Lernen ohne Sinn zum Irrtum führt."</span> -- [Demokrit](https://de.wikipedia.org/wiki/Demokrit) <span style="font-size:110%">"Grafikprogrammierung ist sinnlich"</span> -- <img src="https://ca.slack-edge.com/T0K11HLNQ-UGTE9V1EV-80f93c5f0ce6-512" width="22"> @seismist --- ### :rabbit: 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 :tv: --- ### :books: [Bildungsorientierte Programmiersprachen](https://de.wikipedia.org/wiki/Bildungsorientierte_Programmiersprachen) * :cat: Scratch :heavy_check_mark: * :turtle: Logo :heavy_check_mark: * :snake: TigerJython? * :robot_face: Robotik-Sets? * :electric_plug: Mikrocontroller?  **Processing** ---- ### :goal_net: Workshop-Ziele * Kennenlernen: Grafische 2D-Programmierung * Kennenlernen: JavaScript als Einsteiger-Sprache * Informatikkonzepte: z.B. Pixel-Koordinaten, RGB-Farbmischung, Bildfrequenz (fps), .. * Einblick in ["Algorithmic Art"](https://en.wikipedia.org/wiki/Algorithmic_art) und ["Demoszene"](https://de.wikipedia.org/wiki/Demoszene) ([UNESCO](http://demoscene-the-art-of-coding.net/2021/03/20/demoszene-schreibt-kulturgeschichte/): 🇫🇮 & 🇩🇪) ---- ### :ice_hockey_stick_and_puck: 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 ) ---- ### :brain: Ideale Vorkenntnisse * :heavy_check_mark: Algorithmen = Abfolge von Befehlen * :heavy_check_mark: **Mathematik** Grundwissen * :heavy_check_mark: **Englisch** & phantasievolle Abkürzungen erkennen * :heavy_check_mark: Copy & Paste beherrschen, Experimentieren * :heavy_check_mark: in Dokumentation nachschlagen * :question: Variablen? * :question: Schleifen? * :question: Zufall? ---  * freie / Open Source **Javascript** Bibliothek (seit 2013) * https://editor.p5js.org/ (seit 2018) * benötigt nur Webbrowser (für Tablets geeignet) :+1: * Beispiele überall [einbettbar](https://db.schoolofdata.ch/project/120) * stammt von "Processing" (seit 2001, Java) * vielseitige [p5js-Erweiterungen](https://p5js.org/libraries/) verfügbar ---- #### :turtle: Ä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() ---- #### :8ball: Anders als gewohnt * **textbasiert** und nur englisch * keine "Stiftmetapher", keine :turtle: [zeichnet](http://ycatch.github.io/p5.turtle.js/) ) * kein simples REPEAT (wie Logo & TigerJython) --- ### :writing_hand: Handwerkzeug :printer: [p5.js Grundlagen-Spickzettel auf deutsch](https://bmoren.github.io/p5js-cheat-sheet/de.html) :printer: [p5.js Cheat Sheet ausführlich (eng)](http://dusie.ch/shared/p5js_shared/files/p5js_cheatsheet_v3.pdf) :mag_right: Alle Befehle erläutert: [https://p5js.org/reference/](https://p5js.org/reference/) ---- #### :video_game: Koordinatensystem vs. Raster  * Ursprungs-Punkt : **Scratch** vs. **Processing** Note: * z.B. **Zentrum** der Leinwand (Canvas): * Scratch: **x=0** und **y=0** * P5.js: **x=width/2** und **y=height/2** --- ### :notebook_with_decorative_cover: p5.js / Javascript: Befehle und Syntax * **grossKlein**schreibung befolgen! * **Semikolon;** an Ende von Befehlszeile * Parameter durch **, Komma** getrennt * Variable mit **let** setzen (oder var / const) ```javascript 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 */ ``` ---- ### :notebook_with_decorative_cover: befehl(parameter1, parameter2,...); * Befehle können je nach Anzahl der Parameter unterschiedlich funktionieren: ```javascript 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) ``` * :question: Und was passiert bei drei Parametern? ---- ### :notebook_with_decorative_cover: Beispiel: Additive Farbmischung / Interaktion <iframe frameBorder="0" style="overflow: hidden;" src="https://editor.p5js.org/p5/embed/mf6ZfX6Bqv"></iframe> * 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 --- ### :eyes: Demonstration, erster "Sketch" Schematische Darstellung:  ---- ### :open_hands: Hands-on! mit Beispielen * zwei Gruppen: Blue Pill / Red Pill :pill: * ein "Breakout"-Raum (Audio neu verbinden!) / Timer 20min * :bulb: Code lesen ist wichtiger als schreiben! ##### Aktivitäten: * A: Codebeispiele zum Stöbern und Experimentieren: [https://ige.li/p5](https://editor.p5js.org/joberkel/collections/G7f0hkhyP) * ... 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 --- ### :left_speech_bubble: Austausch: Feedback Erfahrungen / ... --- ### p5.js Basic-Tutorials (meist englisch) * https://happycoding.io/ * :tv: [The Coding Train with Dan Shiffman](https://www.youtube.com/watch?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&v=HerCR8bw_GE) :steam_locomotive: :rainbow: * https://codeguppy.com/site/download/tariq/creative_coding_for_kids.pdf * :book: https://steinphysik.de/programmieren-im-kunstunterricht/ (auch :calling: ) * 9.-12. Klasse (eng): https://nycdoe-cs4all.github.io/ * [Künstlerische Einführung (französisch)](https://github.com/b2renger/Introduction_p5js#p5js) (der Hochschule Nantes: https://ateliernum.github.io/ ) ---- ### p5.js Tutorials für Fortgeschrittenere * [Kunstvolle Präsentation: Oszillieren (eng)](http://joerg.berkel.fr/dexter-shepherd-oscillation/) :stars: * [Transformationen erklärt](https://genekogan.com/code/p5js-transformations/) // oder [:tv: Coding Train Teil 1-3 ](https://thecodingtrain.com/Tutorials/9-additional-topics/9.1-transformations-part-1.html) * [Raster bzw. Muster erzeugen (französisch)](https://github.com/b2renger/p5js-designing-interactive-patterns) * :book: http://www.generative-gestaltung.de/2/ * [Sketching with Math and Quasi Physics](https://kynd.github.io/p5sketches/) --- ### :calendar: Veranstaltungen * :space_invader: heute C64: www.transmission64.org (16-24 Uhr) * 28. Mai: www.demonights.ch * 21.-24. Okt.: [PlayBern Gamejam](http://playbern.ch/) * im November?: [Graffathon-Wochenende](https://www.echtzeitkultur.org/projekte/graffathon/) ---- ### :school: weitere Bildungsangebote? * p5.js-Support im Sek I/II-Unterricht: joerg.berkel@phbern.ch * [Bret Victor's Didaktische Überlegungen](http://worrydream.com/LearnableProgramming/) * Projektstart [Pingala](https://www.echtzeitkultur.org/projekte/pingala/) durch Echtzeit-Verein * Creative Coding Fest: [ccfest.rocks](https://ccfest.rocks/) * [Processing Community Day](https://processingfoundation.org/advocacy/processing-community-day-2020): z.B. [basel.codes](https://basel.codes) * --> viele MOOCs ... ---- ### :globe_with_meridians: 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/ --- ### :heart_eyes: Dankeschön! :speech_balloon: Sei informiert via [Slack-Kanal](https://join.slack.com/t/echtzeit/shared_invite/enQtNjczMjQ3MzkzODQ1LTRjMzEwZjAyMjI2M2NhZDgyYTA3ZDVhMTIwMmQ1ODViNTM1OWEzMzA5OWZkMmU4ZDMwMmMwMzQxMDdkYTkyOGY) #you-should ! :mailbox_with_mail: ... oder kontaktiere uns via E-Mail!  https://www.echtzeitkultur.org/ ---- #### Bonus: :tv: Cevian Raspberry von Vantage (CH) :loud_sound: 2013 in Processing gemacht: [Sketch als Quellcode](https://github.com/neophob/Processing-Playground/tree/master/CevianRaspberry) _wird via BBB abgespielt: https://vimeo.com/72928093 (Epilepsie-Warnung ;-)_ <font style="font-size:70%">... oder eine meditative PC-Demo: [Intrinsic Gravity von Still](https://www.youtube.com/watch?v=-ZxPhDC-r3w) </font>