Differences

This shows you the differences between two versions of the page.

--- ba:design_basics:sose24:14_05_24 [2024/05/13 11:24] – [Teil 3 – Projektbeispiele] Felix Hardmood Beck
+++ ba:design_basics:sose24:14_05_24 [2024/05/15 06:29] (current) – [Praktischer Teil] Felix Hardmood Beck
@@ Line 7: / Line 7: @@
 ----
-<WRAP center round box 100%> Thema heute: **Autoaktivität, Reaktiviert, Interaktivität** \\ \\ Start um 12 Uhr s.t. </WRAP>
+<WRAP center round box 100%> Thema heute: **Autoaktivität, Reaktivität, Interaktivität** \\ \\ Start um 12 Uhr s.t. </WRAP>
   - Anwesenheitsliste
+  - Besprechung der Ergebnisse der Hausaufgaben: Vogelfederzeichnungen:
+    - Scan der analogen Zeichnung, sowie eine *.svg-Datei der Vektor-Zeichnung an felix.beck@fh-muenster.de !?
+    - Zeichnung dreier Vogelfedern auf einem DIN A3 Blatt.
+    - Übersetzung der Feder in Zeichenprogramm Ihrer Wahl => //Pfadtool// und gegebenenfalls weitere Werkzeuge
-===== Besprechung der Ergebnisse der Hausaufgaben: Vogelfederzeichnungen =====
+===== Praktischer Teil =====
-  - Scan der analogen Zeichnung, sowie eine *.svg-Datei der Vektor-Zeichnung an felix.beck@fh-muenster.de !?
+      * Download and install [[https://inkscape.org/release/1.3.2/|InkScape]]
-  - Zeichnung dreier Vogelfedern auf einem DIN A3 Blatt.
+      * Install [[https://wiki.evilmadscientist.com/Axidraw_Software_Installation|Axidraw]]
-  - Übersetzung der Feder in Zeichenprogramm Ihrer Wahl => //Pfadtool// und gegebenenfalls weitere Werkzeuge
+      * Zeichnung von Feder mit AxiDraw Tool \\ {{:ba:design_basics:axidraw_v3.jpg?direct&400|}} {{:ba:design_basics:axidraw_v3_feather-example.jpg?direct&400|}}
+<WRAP center round box 50%> Pause 10 min</WRAP>
-==== Praktischer Teil ====
-      * Zeichnung von Feder mit AxiDraw Tool
 ===== Lineare Medien ≠ Non-lineare Medien =====
-==== Teil 1 ====
-Es gibt viele verschiedene Möglichkeiten und Techniken um Animationen zu erzeugen. Oftmals entstehen Animationen auch durch die Kombination verschiedener Prozesse und Werkzeuge.
-Welche Tools zur Erzeugung von Animationen kennen Sie?
-  * [[https://www.adobe.com/de/products/animate.html|Adobe Animate]] zur Erstellung von HTML5- und Flash-Animationen ([[https://www.youtube.com/watch?v=-woaDyBXkyU|Kurs auf Youtube]] (Dauer ca. 3 Stunden))
-  * [[https://www.piskelapp.com|Piskel App]] – A free online editor for animated sprites & pixel art (https://www.piskelapp.com) \\ {{:piskel_animation_tool_ui_screenshot.png?nolink&400|}} => {{:piskel_animation_tool_animated_blink.gif?nolink|}}
-  * Photoshop Puppet Warp Tool => [[https://www.youtube.com/watch?v=DTuMvlsJQ3U|Youtube Tutorial]] \\ {{:photoshop_puppet_warp_screenshot.png?direct&200|}}
-  * [[https://www.adobe.com/de/products/character-animator.html?promoid=4SC9977P&mv=other|Adobe Character Animator]] \\ {{:adobe_character_screenshot_rig.png?nolink&182|}} {{:adobe_character_screenshot.jpg?nolink&400|}}
-  * Blender with Grease Pencil ([[https://www.youtube.com/watch?v=tOAPiPeGIWw|Youtube Tutorial]])
-  * [[https://www.adobe.com/de/products/aftereffects.html?promoid=2K4PCGG9&mv=other|After Effects]] (Special Effects und Animation)
-Animationsarten ((https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen)))
-    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/kind.gif|Einzelbild-Animation]]
-    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/auto_normal.gif|Schlüsselbild-Animation]]
-    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/laufen.gif|Kombination aus Einzel- und Schlüsselbild-Animation]])
-    * Pfad Animation: [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/ball_eck.gif|Beispiel 1]] (Ball über Eck), [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/ball_pfad.gif|Beispiel 2]] (Pfad mithilfe einer Kurve), [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/dude_pfad.gif|Beispiel 3]] (Pfad und Rotation)
-==== Teil 2 ====
   - //Lineare Medien ≠ Non-lineare Medien//: Normalerweise versteht man unter einem linearen Medium einen direkt-ausgestrahlten und unvermittelbar-empfangbaren Inhalt (z.B. Fernsehen, Radio, Film der in einer Ausstellung autoaktiv abgespielt wird). Hier muss man zu einem bestimmten Zeitpunkt einschalten/da sein, um eine dargestellte Geschichte von Anfang bis zum Ende zu konsumieren und zu verstehen. Non-lineare Medien hingegen lassen eine zeitversetzte Nutzung zu; hier kann man zu jeder Zeit ein- und wieder aussteigen.
@@ Line 65: / Line 47: @@
 Eine solche Art von Spannungsbogen lässt sich auch in einer indirekteren Form für //klassische Medien// oder //Produktdesign// darstellen. Erklären Sie diesen Gedankengang zu einer //objekthaften Dramaturgie//.
-<WRAP center round box 50%> Pause 10 min</WRAP>
+Es gibt viele verschiedene Möglichkeiten und Techniken um Animationen zu erzeugen. Oftmals entstehen Animationen auch durch die Kombination verschiedener Prozesse und Werkzeuge.
-==== Teil 3 – Projektbeispiele====
+Welche Tools zur Erzeugung von Animationen kennen Sie?
+  * [[https://www.adobe.com/de/products/animate.html|Adobe Animate]] zur Erstellung von HTML5- und Flash-Animationen ([[https://www.youtube.com/watch?v=-woaDyBXkyU|Kurs auf Youtube]] (Dauer ca. 3 Stunden))
+  * [[https://www.piskelapp.com|Piskel App]] – A free online editor for animated sprites & pixel art (https://www.piskelapp.com)
+  * Photoshop Puppet Warp Tool => [[https://www.youtube.com/watch?v=DTuMvlsJQ3U|Youtube Tutorial]]
+  * [[https://www.adobe.com/de/products/character-animator.html?promoid=4SC9977P&mv=other|Adobe Character Animator]]
+  * Blender with Grease Pencil ([[https://www.youtube.com/watch?v=tOAPiPeGIWw|Youtube Tutorial]])
+  * [[https://www.adobe.com/de/products/aftereffects.html?promoid=2K4PCGG9&mv=other|After Effects]] (Special Effects und Animation)
+Animationsarten ((https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen)))
+    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/kind.gif|Einzelbild-Animation]]
+    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/auto_normal.gif|Schlüsselbild-Animation]]
+    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/laufen.gif|Kombination aus Einzel- und Schlüsselbild-Animation]])
+    * Pfad Animation: [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/ball_eck.gif|Beispiel 1]] (Ball über Eck), [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/ball_pfad.gif|Beispiel 2]] (Pfad mithilfe einer Kurve), [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/dude_pfad.gif|Beispiel 3]] (Pfad und Rotation)
+<WRAP center round box 50%> Pause 10 min</WRAP>
-{{:gravel_02_2018_NTSI-LAB.jpg?nolink|}}
+==== Projektbeispiele====
-**Gravel**, Abu Dhabi, 2019 \\ http://www.felix-beck.de/?/media/gravel/ (© by NTSI Lab, [[https://quinnhe.github.io/about.html|Quinn He]], [[https://github.com/Zoetic-Zephyr|Jack Zhang]])
-{{:etihad-photowall-neoanalog-title-1024x512.jpg?nolink|}}
+**Gravel**, Abu Dhabi, 2019 \\ https://www.felix-beck.de/research_projects/gravel.html (© by NTSI Lab, Quinn He, [[https://github.com/Zoetic-Zephyr|Jack Zhang]])
-**Reactive Photowall**, Etihad Museum, Dubai, 2020 \\ https://neoanalog.io/photowall/ (© by NeoAnalog, Felix Hardmood Beck (concept), [[https://cargocollective.com/iljaburzev|Ilja Burzev]] (Software), [[http://antiboringunits.de|antiboring units]] (mechatronics))
-{{:formation_of_hamburg_artcom_mediatable.jpg?nolink|}}
+**Media Table, Formation of Hamburg**, Museum für die Geschichte von Hamburg, 2012 \\ https://www.felix-beck.de/professional_projects/formation-of-hamburg.html (© by [[http://www.artcom.de|ART+COM Studios]])
-**Media Table, Formation of Hamburg**, Museum für die Geschichte von Hamburg, 2012 \\ http://www.felix-beck.de/?/media/hamburg/ (© by [[http://www.artcom.de|ART+COM Studios]])
+**Museum of Infrastructure Development**, 2018 \\ https://www.felix-beck.de/professional_projects/museum-of-infrastructure-development.html
+===== Hausaufgaben =====
+  - Schauen Sie zur Einleitung folgende Präsentation auf Youtube: [[https://www.youtube.com/watch?v=CY9xwOA5cmQ|Making Interactive Virtual Reality & Augmented Reality Prototypes from Paper]] (Michael Nebeling, Katy Madier, CHI '19: ACM CHI Conference on Human Factors in Computing Systems, Session: Look, Smell, Draw)
+  - Lesen Sie nun den Blogartikel [[https://blog.prototypr.io/vr-paper-prototyping-9e1cab6a75f3|VR Paper Prototyping]], Saara Kamppari-Miller, 2017
+  - Basierend auf der Vorlage [[https://www.dropbox.com/s/b81o5ke92fejqiv/VR%20Sketch%20Sheets%20and%20Paper%20Prototype%20Public.pdf?dl=0|VR Sketch Sheets 2.0]] (siehe Seite 3) erstellen Sie die Skizze Ihres Zimmer (mit möglichst vielen Details). Machen Sie ein Foto Ihrer Zeichnung und bearbeiten Sie dieses nach (Tonwert Korrektur => weiß=weiß!). Drucken Sie Ihr Bild auf DINA 3 aus und legen Sie dieses in Ihre Dokumentationsbox-Box.
+  - Finden Sie für die Plattform Ihrer Wahl eine Möglichkeit Ihre Zeichnung als 360° Ansicht anzuzeigen. Bspw mithilfe von
+    - https://momento360.com/
+    - https://photo-sphere-viewer.js.org
+    - …
+  - Finden Sie eine Möglichkeit Ihre Zeichnung als Stereoskopisches Bild auf einem HMD anzuschauen.