changed 3 years ago  
Published Linked with GitHub
openprocessing.org/sketch/1175194

24. April 2021

2D-Grafikprogrammierung und -Animation

Spielerisch-experimentell kennenlernen

Joerg.Berkel @ phbern.ch  &  Oleg @ dat.alets.ch

CC-by Folien: https://hackmd.io/@jb/oed-progfx

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Aufzeichnung: direkt zum p5.js-Einstieg

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
"Esc"-Taste in reveal.js-Präsentation

Note:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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/

"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"

–

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
@seismist

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Bildungsorientierte Programmiersprachen

  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Scratch
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Logo
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    TigerJython?
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Robotik-Sets?
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Mikrocontroller?

Processing

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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: 🇫🇮 & 🇩🇪)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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 )

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Ideale Vorkenntnisse

  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Algorithmen = Abfolge von Befehlen
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Mathematik Grundwissen
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Englisch & phantasievolle Abkürzungen erkennen
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Copy & Paste beherrschen, Experimentieren
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    in Dokumentation nachschlagen
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Variablen?
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Schleifen?
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Zufall?

  • freie / Open Source Javascript Bibliothek (seit 2013)
  • https://editor.p5js.org/ (seit 2018)
    • benötigt nur Webbrowser (für Tablets geeignet)
      Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →
    • Beispiele überall einbettbar
  • stammt von "Processing" (seit 2001, Java)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Ä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()

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Anders als gewohnt

  • textbasiert und nur englisch
  • keine "Stiftmetapher", keine
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    zeichnet )
  • kein simples REPEAT (wie Logo & TigerJython)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Handwerkzeug

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
p5.js Grundlagen-Spickzettel auf deutsch
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
p5.js Cheat Sheet ausführlich (eng)
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Alle Befehle erläutert: https://p5js.org/reference/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Koordinatensystem vs. Raster

Grafik von Luisa Pereira aus nycdoe-cs4all.github.io

  • 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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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 */

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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)
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Und was passiert bei drei Parametern?

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Beispiel: Additive Farbmischung / Interaktion

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Demonstration, erster "Sketch"

Schematische Darstellung:
Screenshot von https://github.com/jtnimoy/rigglin von JT Nimoy

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Hands-on! mit Beispielen

  • zwei Gruppen: Blue Pill / Red Pill
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  • ein "Breakout"-Raum (Audio neu verbinden!) / Timer 20min
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Austausch: Feedback Erfahrungen / …

p5.js Basic-Tutorials (meist englisch)

p5.js Tutorials für Fortgeschrittenere

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Veranstaltungen

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
weitere Bildungsangebote?

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Weitere Links

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Dankeschön!

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Sei informiert via Slack-Kanal #you-should !
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
… oder kontaktiere uns via E-Mail!


https://www.echtzeitkultur.org/

Bonus:
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Cevian Raspberry von Vantage (CH)
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

Select a repo