hardmood.info

A DokuWiki flirting with bilingualism to chronicle Prof. Felix Beck's courses and academic antics.

User Tools

Site Tools

Trace: • 21_05_24 • 09_04_24 • 16_04_24 • 07_05_24 • 04_06_24 • 30_04_24 • 14_05_24 • 19_03_24
ba:design_basics:sose24:14_05_24

Differences

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

Link to this comparison view

Next revision		Previous revision
ba:design_basics:sose24:14_05_24 [2024/03/08 15:05] – created Felix Hardmood Beckba:design_basics:sose24:14_05_24 [2024/06/28 19:09] (current) – external edit 127.0.0.1
Line 1: Line 1:
-  * Vorstellung Adobe Aero+====== Design Basics ====== 
 + 
 +Praktische Grundlagen der Gestaltung mit digitalen Medien \\  
 +Bachelor Elektrotechnik, Bachelor Informatik, Bachelor Wirtschaftsingenieurwesen Elektrotechnik \\  
 +Prof. Felix Hardmood Beck  
 + 
 +---- 
 + 
 +<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 
 + 
 +===== Praktischer Teil ===== 
 +      * Download and install [[https://inkscape.org/release/1.3.2/|InkScape]] 
 +      * Install [[https://wiki.evilmadscientist.com/Axidraw_Software_Installation|Axidraw]] 
 +      * 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> 
 + 
 + 
 +===== Lineare Medien ≠ Non-lineare Medien ===== 
 + 
 +  - //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. 
 +    - **Spannungskurve**((https://de.wikipedia.org/wiki/Spannungskurve))/Spannungsbogen im Storytelling (steigende Handlung/fallende Handlung) 
 +      - **Einführung** 
 +        - Setting: Zeit, Ort 
 +        - Protagonist (mit einem Ziel), Antagonist 
 +        - Einführung in Konfliktsituation (Konflikt, Problem = Hindernis für Zielsetzung) 
 +      - **Hauptteil** 
 +        - Reihe von Ereignissen, Aufbau der Spannung, Komplikationen, Hürden denen der Held ausgesetzt ist 
 +        - Emotionaler Höhepunkt: Zeitpunkt kurz vor der Erkenntnis, wie die Story enden könnte 
 +        - Abfall der Spannung 
 +      - **Schlussteil** 
 +        - Ende mit Auflösung des Konfliktes/Lösung des Problems 
 + 
 +                Höhepunkt  
 +                .    Retardierendes Moment  
 +               . .   . 
 +              .   . . . abklingend 
 +             .         .  
 +            . steigend   .  Schlussteil  
 +         . .                 . . 
 +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//. 
 + 
 + 
 +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) 
 +  * 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> 
 + 
 + 
 +==== Projektbeispiele==== 
 + 
 +**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]]) 
 + 
 +**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]]) 
 + 
 +**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. 
/var/www/vhosts/hardmood.info/httpdocs/data/attic/ba/design_basics/sose24/14_05_24.1709910334.txt.gz · Last modified: 2024/06/28 19:08 (external edit)