2D-Grafikprogrammierung und -Animation - HackMD

<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  &  Oleg @ dat.alets.ch ![CC-by](https://i.creativecommons.org/l/by/4.0/88x31.png "CC-by Jörg Berkel") Folien: https://hackmd.io/@jb/oed-progfx <font style="font-size:80%">:bulb: "Esc"-Taste in [reveal.js](https://github.com/hakimel/reveal.js/)-[Präsentation](https://hackmd.io)</font> Note: Pre-flight Checklist * Workshop Aufnehmen + ankündigen * geteilte Notizen "pasten" * Timekeeping :watch: Dieser PDF-Export wurde mit [decktape](https://github.com/astefanutti/decktape/) erstellt. Vorteile der [Onlineversion](https://hackmd.io/@jb/oed-progfx) dieser Präsentation: * Lizenzangaben zum Bildmaterial sind ersichtlich * Animierte GIFs unterstützt * Textrendering ist schöner ### :hear_no_evil: Announcements ![](https://i.imgur.com/G25mlVb.jpg) 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? ![](https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Processing_Logo_Clipped.svg/245px-Processing_Logo_Clipped.svg.png =80x80) **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? --- ![](https://p5js.org/assets/img/p5js.svg) * 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 ![image alt](https://nycdoe-cs4all.github.io/images/lessons/unit_1/1.1/coordinategrid.png =474x274) * 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 * Unbedingt **grossKlein**schreibung befolgen! * Ende von Befehlszeile bekommt ein **Semikolon;** * 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: ![image alt](https://user.fm/files/v2-7ef1dd104551312bc0d4610c7e58a94e/p5js-blockly-gross.png =300x500) ---- ### :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 * ... 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/ * 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) * im 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 * 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://user.fm/files/v2-4edcea196d5eb8064f533dfe9d919168/echtzeit_logo.png =204x256) https://www.echtzeitkultur.org/ Note: Post-flight Checklist * hackmd öffentlich / robots: noindex, nofollow entfernen * OLEG twittert: Tagge @p5xjs für Bekanntmachung der Folien * decktape-pdf für oed-website ---- #### 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> Note: # OED 2021 https://openeducationday.ch/call-for-speakers/ Graffathon edition: https://hackmd.io/Qj58NDgxRF69wiCVdYHdhA Titel: **Spielerisch-experimentell 2D-Grafikprogrammierung und -Animation kennenlernen** Abstrakt (400 bytes): Durch vorgegebene Programmbeispiele und Codeschnipsel bieten wir einen Baukasten um individuelle Kunstwerke auf dem Bildschirm erstellen zu können. Dazu verwenden wir im Webbrowser (unter anderem) einen Editor für [p5js.org](https://p5js.org) (modernere Variante von "Processing"). Neben einer statischen Choreografie aus Farbe, Bewegung und Grössenskalierung lassen sich auch Zufall und Interaktion z.B. mit den Mauszeiger einbeziehen. Kurzbio (2-3 Sätze): Jörg Berkel ist in der Medienbildung an der PHBern tätig, bietet das Wahlmodul "Programmieren mit Kindern an" und wirkt in Projekten wie [Jugend hackt](https://jugendhackt.ch) mit. Oleg Lavrovsky ist selbständiges Dateningenieur spezalisiert im Open Source und Open Data, engagiert seit Jahren beim CH Open, DINAcon und Opendata.ch, arbeitet im Moment primar als Mitgründer des "civic tech" Startups [Cividi GmbH](https://cividi.ch) und als Gastdozent und auf Forschungsprojekte bei der Berner Fachhochschule. Beide engagieren sich für den Verein [Echtzeit - Digitale Kultur](https://www.echtzeitkultur.org/). ### Zielgruppe: Alle die sich für Computergrafik und -kunst interessieren, keine Angst vor Mathematik, sondern Spass am Experimentieren damit haben. (Abgewandelt für den Unterricht ab 6. Klasse verwendbar.) Zyklus 2, 3, Sek 2 Max. Anzahl Teilnehmende? 20 Dürfen wir Ihren Beitrag aufzeichnen und auf der Website publizieren? *Ja, Unbedingt!* 6. Medien und Informatik Workshop (90min) - vor Ort* Eignet sich Ihr Beitrag auch für eine virtuelle Übertragung oder Teilübertragung (z.B. Theorieteil)? *Ja* Sollte eine physische Durchführung nicht möglich sein, können/möchten Sie mit Ihrem Beitrag auch "rein" virtuell dabei sein? *Ja, das wäre auch machbar* In welcher Sprache ist Ihr Beitrag: *Deutsch* ![](https://cables.gl/press_files/img/photo1.jpg) #### Idee Einfaches experimentieren mit vorgegebenem Programmcode oder -schnipseln um, mit **Farbe, Bewegung und Skalierung** individuelle Kunstwerke zu erstellen. Wir werden in Paaren und kleine Teams projekte initiieren, auf eine gemeinsame Open Source Plattform publizieren, und am schluss gemeinsam Präsentieren und Bestaunen. #### Notizen * Pair-Programming (vor Ort oder mit AtomPair) * Dabei Platz zum Flexibilisieren für Erfahrene nach oben offen - siehe [MIT - Designing for Tinkerability](http://www.media.mit.edu/~mres/papers/designing-for-tinkerability.pdf) * Möglichkeit localization? * Modularer Baukasten -> Material Graffathon * E-Learning/Begleitung zum Weiterdranbleiben * [Dribdat](https://dribdat-test.herokuapp.com/) für Teamarbeit zur Verfügung stellen mit Bestuften Toolbox Mögliche niederschwellige Werkzeug: * p5js.org * https://github.com/ffd8/P5LIVE Livecoding!! * https://nodes.io/playground/generative-identity/ * https://makecode.microbit.org/ * https://scratch.mit.edu/explore/projects/all * https://projects.raspberrypi.org/en/projects/astro-pi-mission-zero * processing.org (leider umfangreiche IDE) // processingJS is dead * openprocessing.org * https://www.dwitter.net/ * https://tixy.land/ * ... ## Vorhandene Materialien und Inspiration * [Coder Dojo 2016](https://blog.datalets.ch/012/) * [Jugend Hackt](https://blog.datalets.ch/024/) * [Demonights Workshop 2018](https://forum.opendata.ch/t/27-4-realtime-content-production-workshop/383/3) * Martin (hat das Thema auch schon vermittelt): https://www.flickr.com/photos/birdy1976/albums/72157669136046923 / https://github.com/birdy1976/creative-coding * https://www.openprocessing.org/learn/ * [Instructions for p5.js on Moodle](https://elearn.ellak.gr/mod/page/view.php?id=5487&forceview=1) * https://swisseduc.ch/informatik/120-lektionen/programmier-projekt-processing/ * https://processing.org/tutorials/ * Programmieren lernen mit Computergrafik und Processing: https://www.ningelgen.eu/index.html * kreative Pause/Inspiration mit https://patatap.com ( https://github.com/jonobr1/Neuronal-Synchrony ) * GLSL schwierig aber schön: https://patriciogonzalezvivo.github.io/PixelSpiritDeck/ * Blockly-style with rigglin: https://github.com/jtnimoy/rigglin [Referenz Custom-Blocks](https://developers.google.com/blockly/guides/create-custom-blocks/overview) ) * ~~Scaling Squares: https://docs.google.com/document/d/11Pr_wuurUNQ-7vSR8bmoHtaA-7doQ-apWCENcIB7yZc/edit ~~ * pixelDensity(1); //takes care of hi-res retina displays * Every browser has a console. You can output data in the console to see problems in the code by writting console.log(myVariableArray) * Englisch, gute Referenz http://dusie.ch/topics/p5js/ * https://wp.nyu.edu/ltt2021/schedule/ Learning To Teach Creative Technologies Remotely (A Virtual UnSymposium on 22-23 Jan 2021 hosted by Integrated Digital Media at NYU) * https://www.penguinrandomhouse.com/books/669487/code-as-creative-medium-by-golan-levin-and-tega-brain/ * https://medium.com/processing-foundation/zoom-teaching-p5-js-to-children-grades-3-6-54a0955c0ba5 #### ... für später: andere grafische Experimente * https://www.dwitter.net/ (kommentar) * https://tixy.land/ (kommentar) * https://nodes.io/playground/generative-identity/ * https://cables.gl/edit/TR7GwR (gratis, aber nicht frei) ### Intro für / Feedback von Laurin * Die Einführung Aufzeichnen * Zielgruppe Lehrpersonen mit Erfahrung * Weiteres Ziel: Vorbereitung auf [Graffathon-Template](https://github.com/anttihirvonen/demoscene-starter-kits/tree/master/processing/Processing_01_Basics) * Intro/Codesammlung: https://ige.li/p5 * andere leichte & gute Beispiele ergänzen?? * auf https://db.schoolofdata.ch/project/120 dokumentierbar :bulb: