Hallo!
Das gerade geöffnete Script mit meinen Anmerkungen dazu als Film…
Matthias Edler-Golla
matthias.edler-golla@hm.edu
http://matthias-edler-golla.de
Corona-Krise
Temperaturkurve März 2020, Rosenheim
Wie schon durch das Dekanat kommuniziert, befinden wir uns offiziell noch bis zum 20. April in der vorlesungsfreien Zeit. Die Teilnahme an allen Online-Lehrangeboten ist somit für Euch freiwillig!
Aus diesem Grund habe ich Struktur, Inhalt und Reihenfolge des Kurses „Digitales Prototyping“ an diese für uns alle völlig neue Situation angepasst. In der Zeit bis zum 20. April ergibt sich so für Euch die Möglichkeit, etwas tiefer in das Programmieren (p5.js) einzusteigen und in diesem Zusammenhang auch Sachen aus dem 1. Semester (Interaction Design) und 3. Semester (Web Design) aufzufrischen und zu wiederholen.
Dazu habe ich im ersten Script für diesen Kurs zwei Aufgaben/Übungen vorbereitet, anhand derer Ihr schauen könnt, wie fit Ihr noch in den Bereichen „Web Design“ und „p5.js“ seid.
Für den Kurs „Digitales Prototyping“ ist es sehr sinnvoll, dass Ihr Euch mit p5.js auseinandersetzt, weil wir zum einen diese Programmiersprache nutzen werden, um z.B. Sensordaten des Arduino oder Raspberry Pi auszulesen, und zum anderen weil das Programmieren des Arduinos sehr ähnlich wie p5.js ist.
Matthias Horx: Das ist ein historischer Moment
Wir werden uns wundern, wie schnell sich plötzlich Kulturtechniken des Digitalen in der Praxis bewährten. Tele- und Videokonferenzen, gegen die sich die meisten Kollegen immer gewehrt hatten (der Business-Flieger war besser) stellten sich als durchaus praktikabel und produktiv heraus. Lehrer lernten eine Menge über Internet-Teaching. Das Homeoffice wurde für Viele zu einer Selbstverständlichkeit – einschließlich des Improvisierens und Zeit-Jonglierens, das damit verbunden ist.
Bitte lest den ganzen Artikel!
Themen heute
- Übersicht über Kursinhalte
- Definition „Phyiscal Computing“
- p5-Wiederholung
- Kombination aus Webdesign & p5.js (incl. Aufgabe dazu, z.B. Ostergruß)
- p5-Kurse von Dan Shiffman
- p5-Kurse bei linkedin/learning
Website zum Kurs
Moodle-Kurs
Das Passwort für den Moodle-Kurs lautet
IoT_2020Bitte tragt Euch dort mal ein – wir müssen sehen, ob wir Moodle nutzen werden oder nicht…
Unterricht „Interaction Design“
Innerhalb der ersten 4 Semester habt Ihr vier aufeinander aufbauende Module, die alle direkt oder indirekt mit Interaction Design zu tun haben:
- Semester: Interaktion Grundlagen ✔
- Semester: Interface Design – Gestaltung von Bildschirmoberflächen (Smartphone-Apps…) ✔
- Semester: Webdesign – Gestaltung und Programmierung einer Website (z.B. eigenes Portfolio zur Bewerbung fürs Praktikum…) ✔
- Semester: Digitales Prototyping – Erstellen von digitalen Prototypen; Kombination aus den drei anderen Kursen (Internet of Things-Anwendungen mit Arduino und Raspberry Pi…)
Modulbeschreibung „Digitale Prototyping“
Das Teilmodul Digitales Prototyping ist als Fortsetzung des Kurses 301.2 Webdesign für ID-Studierende zu sehen. Die im Webdesign vermittelten Kenntnisse im Bereich von HTML/CSS/Javascript werden in diesem Kurs mit Grundlagen des „Physical Computings“ kombiniert.
Mit HTML/CSS/Javascript ist es relativ einfach möglich, interaktive Prototypen von Smartphone- bzw. Tablet-Applicationen (kurz „Apps“ genannt) zu erstellen. Kombiniert man diese Web-Apps mit Sensoren, Aktoren und Daten z.b. von Microcontrollern (Arduino, Raspberry Pi …) entstehen mehr oder weniger komplexe Prototypen digitaler Produkte, mit denen die Interaktion zwischen Mensch & Maschine getestet werden kann.
Achtung
Der Kurs baut auf Sachen auf, die Ihr in den letzten 3 Semestern in den Kursen Interaction Design, Interface Design und Web Design erlernt habt!
Was lernt Ihr in diesem Kurs?
Bild von matthew venn
Ob wir es schaffen, alle unten aufgeführte Punkte durchzugehen, hängt davon ab, wie sich die Corona-Krise entwickelt und ob es möglich sein wird, Präsenz-Unterricht zu machen!
Am Ende des Kurses könnt Ihr folgendes realisieren:
- diverse Sensor-Daten mit Hilfe des Arduino auslesen
- Ausgabe der Sensor-Daten auf einem (lokalen) Webserver (u.a. auch mit p5.js)
- Aktoren wie LEDs oder (Servo-)Motoren ansteuern
- via VNC, SSH und FTP mit einem Raspberry Pi kommunizieren
- den Raspberry Pi dazu nützen, um z.B. Bilder stapelweise auf die richtige Größe zu bringen (Bash-Scripting)
- mit dem Kamera-Modul Zeitraffer-Filme erstellen
- mit Motion eine einfache Überwachungskamera erstellen und den Stream auf einem (lokalen) Webserver darstellen
- …
Physical Computing
Arduino Uno mit Ultraschall-Sensor, LCD-Display und Piezo-Modul
Physical Computing bedeutet im weitesten Sinne, interaktive, physische Systeme durch die Verwendung von Hardware und Software zu erstellen. Diese Systeme reagieren auf Ereignisse in der realen, analogen Welt und/oder wirken auf sie ein.
Wikipedia
Die Grundlagen in Processing bzw. p5.js sind ein guter Start ins Physical Computing – das Programmieren von Arduino verwendet fast die gleiche Entwicklungsumgebung und Programmiersprache…
Daten-Visualisierung (in Krisenzeiten)
Diese Website wurde von einem 17-jährigen (!) aus Seattle gestaltet und programmiert – sie ist eine der wichtigsten Informationsquelle in der aktuellen Corona-Krise und wird minütlich aktualisiert.
Daten-Visualisierung (in Krisenzeiten) 2
Für die Gesamtzahl pro Bundesland/Landkreis werden die den Gesundheitsämtern nach Infektionsschutzgesetz gemeldeten Fälle verwendet, die dem RKI bis zum jeweiligen Tag um 0 Uhr übermittelt wurden. Für die Darstellung der neuübermittelten Fälle pro Tag wird das Meldedatum verwendet – das Datum, an dem das lokale Gesundheitsamt Kenntnis über den Fall erlangt und ihn elektronisch erfasst hat.
Brackets: Plugin „Beautify“
Bei Brackets habt Ihr die Möglichkeit, via Plugins die Funktionalität des Programms zu erweitern.
Ein super-praktisches Plugin nennt sich Beautify: Damit könnt Ihr mit einem Mouse-Click Euren Code sauber formatieren und besser lesbar machen…
Bitte installiert dieses Plugin – es ist kostenlos!
Auffrischen von p5.js
Ihr findet die p5-Übungen auf meiner Website: https://scripte.matthias-edler-golla.de/wise18/interaction
Anwendungsbeispiele Datenvisualisierung p5.js
p5.js Tages-Temperatur-Aufnahmen 2019
Alle 15 min hat ein Paspberry Pi die Temperatur in der Nähe unserer Haustür gemessen. Mit Hilfe von p5.js wurden diese Werte dann visualisiert und animiert.
So hat jeder Tag ein eigenes „Temperatur-Gesicht“ und man kann gut sehen, wie sich die Temperaturen im Lauf des Jahres verändern.
Einzelbilder (Ausschnitt)
Der Prozess ist automatisiert!
p5 Sensorwerte Wochenansicht
An einem Raspberry Pi hängt sowohl ein Arduino (der die Helligkeit aufzeichnet) als auch ein BME280-Sensor, der Helligkeit, Luftdruck und Temperatur aufzeichnet.
Die damit ermittelten Sensorwerte werden via p5.js alle 15min visualisiert.
p5 Tutorials
p5 Online Tutorials mit Dan Shiffman
This online course focuses on the fundamentals of computer programming (variables, conditionals, iteration, functions & objects) using JavaScript. In particular it leverages the p5.js creative computing environment which is oriented towards visual displays on desktops, laptops, tablets or smartphones. The course is designed for computer programming novices.
Die Videos von Dan Shiffman sind sehr hilfreich, um Programmieren zu lernen!
Habt Ihr die Prinzipien verstanden, könnt Ihr mit wenig Aufwand auch z.B. Arduino-Code verstehen, anpassen und schreiben – was wir ja (hoffentlich) im zweiten Teil dieses Kurses machen werden! Bitte schaut Euch die Videos in Ruhe an und frischt damit auch noch mal Euer p5-Knowhow auf.
Hier eine Auswahl von Videos, die Ihr Euch für die nächsten Übungen unbedingt anschauen solltet:
Coding for Visual Learners – mit p5.js
Completely new to coding? This engaging course can help you pick up the popular JavaScript programming language, as well as a programming library called p5.js. As instructor Engin Arslan steps through the basics of JavaScript—discussing everything from operators to arrays—he focuses primarily on programming using JavaScript and p5.js and secondarily on creating visuals. And in contrast to many traditional coding courses, all of the content covered here is presented in a fun, compelling manner that helps visual learners grasp the material.
linkedin/learning
Bitte schaut Euch auch mal diesen Kurs an!
Dieser ist als Alternative der YouTube-Kurse von Dan Shiffmann (vorheriger Slide) zu verstehen.
typischer Aufbau einer Website mit p5.js
Schaut Euch die Demo an – oder ladet Euch das Paket herunter!
Ordner-Struktur
Bis auf das Einbinden des p5-Canvas ist das nichts anderes als eine normale HTML-Seite!
p5-Wiederholungsübung
Baut die oben im Video gezeigte Animation in p5.js nach!
Verwendet dazu das p5-template, das ich im vorherigen Slide vorgestellt habe
Briefing
- Canvas-Maße: 600 x 200
- frameRate: 30
- Kreisdurchmesser: 40
- Anfangs-Hintergrundfarbe: Schwarz
- Anfangs-Kreis-Farbe: 210;
- Die Animation soll erst starten, wenn man auf die Taste "S" auf der Tastatur gedrückt hat.
- Sie endet, sobald die Kreis-Farbe heller als 240 ist
Schaut Euch dazu auch noch mal die Übungen aus dem Wintersemester 18/19 an!
Webdesign und p5-Übung: Ein Ostergruß
Konzipiert und realisiert die einseitige Website so, dass Ihr den Link an Eure Freunde, Eltern, Großeltern (…) als Ostergruß verschicken könnt!
Briefing
Bitte erstellt innerhalb Eures Webspaces eine einseitige Website, die folgende Kriterien erfüllt:
- Responsive
- HTML/CSS und p5.js fürs Javascript
- Einsatz mind. eines Webfonts (z.B. via Google Fonts)
- Enthält einen p5-Canvas
- Animationen und/oder Interactionen finden innerhalb des p5-Canvas statt
- Optional: Einbindung eines Videos, was z.B. bei Vimeo oder YouTube gehostet ist
- Abgabe/Fertigstellung: Donnerstag, 9.4.2020 (mal sehen, wie Ihr uns das gegenseitig präsentieren könnt…)
-
Legt diese Mini-Website via FTP (Cyberduck…) in Eurem Webspace an unter:
// FTP-Pfad ("dp" steht für "digital protyping") meinWebspace > > dp > Ostern > index.html // URL http://fk12.org/ID1819/mustermann/Ostern/index.html
Webspace bei fk12.org nutzen!
Bitte nutzt für die Übungen Eure Website bei fk12.org – und ladet Eure Übungen in den Ordner "dp", den ich schon für Euch angelegt habt!
Danke
Ich melde mich nächsten Donnerstag (2.4.) mit weiteren Übungen bei Euch!
Bleibt gesund!