Visuelle Geschichten mit Code und Daten
Gestaltungsgrundlagen
Wintersemester 2022 / 2023
Der Kurs
Gestaltungsgrundlagen - 11EG-B Basics
Fachgruppe
Wann
Wo
Jeden Freitag, 10:00 – 13:00
Raum D223
Leistung / Aufwand
6 ETCs / ~10 Stunden/Woche inkl. Kurs
Kein L.v. am
23. Dezember (Weihnachten)
30. Dezember (Neujahr)
Letzte L.v. am
20. Januar
Kurz Über mich
- Aus 🇨🇭 und 🇨🇱
- Interface Design B.A. @FHP (2014 - 2019)
- In versch. Softwareunternehmen gearbeitet
- Ubermetrics: Media Intelligence KI Software
- Nexenio: Hochsichere Dropbox Alternative
- Aktuell
Frontend EntwicklerCreative Technologist 😎 @CityLAB- Entwicklung von Prototypen für die Stadtgesellschaft
Mit code formulieren wir aufgaben, die der computer liest und ausführt
Was mit code?
Input
Output
Code
Code
Skaliere dieses Bild!
Zeichne einen Kreis!
Input
Output
Ein großes Bild
Ein kleines Bild
Position, Radius, Farbe...
Ein Meisterwerk
Berechnungen
Wiederholung
Geometrie
Interaktion
Eine kleine Einführung
...in der Computer- und Digitale Kunstgeschichte
Erstmal...
Giphy
Vor den Computern
Photo by GVZ 42 on Unsplash
Jacopo Koushan. Photograph by Masoud Safarniya - Wikipedia
In , verwendete
1613
für die erste Mal
das Begriff
Richard Brathwait
COMPUTER
NASA/JPL-Caltech
https://en.wikipedia.org/wiki/Computer_(occupation)
Pye, Charles, 1777-1864, Folger Shakespeare Library Wikipedia
Die Leibniz’sche Rechenmaschine
NASA/JPL-Caltech
https://de.wikipedia.org/wiki/Gottfried_Wilhelm_Leibniz
Gottfried Wilhelm Leibniz, 1694
Museum Herrenhausen Palace - Wikipedia
Differenzmaschine
NASA/JPL-Caltech
https://de.wikipedia.org/wiki/Differenzmaschine
Charles Babbage, 1820er Jahre
Harper's new monthly magazine.
Band 30, Ausgabe 175, S.34 - Wikipedia
Science Museum London - Wikipedia
The Illustrated London
News - Wikipedia
Die Analytical Engine
https://de.wikipedia.org/wiki/Analytical_Engine
Charles Babbage
1830er Jahre
No Source - Wikipedia
Die Analytical Engine
https://de.wikipedia.org/wiki/Analytical_Engine
Charles Babbage
1830er Jahre
https://de.wikipedia.org/wiki/Ada_Lovelace
Margaret Sarah Carpenter
Wikipedia
http://www.sophiararebooks.com/pictures/3544a.jpg
Wikipedia
ADA
Lovelace
Tabelliermaschine
https://de.wikipedia.org/wiki/Herman_Hollerith
Herman Hollerith, 1880
Computer History Museum
Adam Schuster, Flickr
Library of Congress
Wikipedia
Tabulating Machine Company
https://en.wikipedia.org/wiki/
Computing-Tabulating-Recording_Company#Tabulating_Machine_Company
Herman Hollerith, 1896
Public domain - Wikipedia
IBM - Wikipedia
IBM - Wikipedia
Harvard Mark 1
https://de.wikipedia.org/wiki/Mark_I_(Computer)
IBM, 1944
PhotoQuest / Archive Photos / Getty Images
No source - Wikipedia
Relais
https://de.wikipedia.org/wiki/Relais
© Raimond Spekking
CC BY-SA 4.0 (via Wikimedia Commons)
Electronic Computing: Crash Course Computer Science #2
YouTube - CrashCourse
Elektronenröhre
https://de.wikipedia.org/wiki/Elektronenröhre
Christopher Schirner - Wikipedia
Departments of the Army and the Air Force Wikipedia
Transistoren
https://de.wikipedia.org/wiki/Elektronenröhre
clintonwhitehouse4.archives.gov
AT&T - Photo by Jack St. - Wikipedia
BC548 transistor
No source - Wikipedia
silicon valley
https://en.wikipedia.org/wiki/Silicon_Valley#Rise_of_Silicon
Mapbox 2022
Ab der 1960er
Purified silicon
Wikipedia
History San Jose - Calisphere
Wikipedia
Apple Park
Daniel L. Lu - Wikipedia
silicon valley
https://en.wikipedia.org/wiki/Silicon_Valley#Rise_of_Silicon
Mapbox 2022
Ab der 1960er
Chuck Painter / Stanford News Service
Wikipedia
Ab der 1960er
Shockely Semiconductors
Fairchild Semiconductors
Intel
Geschichte von programmierung
und computer Art
Eine kleine Zusammenfassung von der
In welchen gestalterisch Bereichen wird Code verwendet
Generative Gestaltung
Webdesign & -Entwicklung
Datenvisualisierung
Automatisierung
Kunst
Was haben wir vor?
- Wir verwenden Code als ein Werkzeug für Design und Kunst
- Wir nutzen dafür Javascript und lernen die Grundlagen
- Wir experimentieren mit Visuelle Strukturen und Chaos
- Wir spielen mit Interaktivität!
Visuelle Geschichten mit Code und Daten
By Lucas Vogel
