No edit summary |
|||
(34 intermediate revisions by the same user not shown) | |||
Line 129: | Line 129: | ||
[[Image:image_slicer_720_405.png|left|400px]] | [[Image:image_slicer_720_405.png|left|400px]] | ||
https://waesch.000webhostapp.com/ablage/images/Image-Slicer.gif | |||
[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_II Processing v3.0.0 Quellcode] | [http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_II Processing v3.0.0 Quellcode] | ||
Line 138: | Line 138: | ||
[[Image:brush_animation_720_405.png|thumb|left|400px]] | [[Image:brush_animation_720_405.png|thumb|left|400px]] | ||
https://waesch.000webhostapp.com/ablage/images/Brush-Animation.gif | |||
[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_III Processing v3.0.0 Quellcode] | [http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_III Processing v3.0.0 Quellcode] | ||
Line 145: | Line 145: | ||
*Fotos und Videos im Schlosspark Belverdere: [https://www.flickr.com/photos/137226701@N06/albums/72157661120668650 Bild- & Video-Uploads auf Flickr] | *Fotos und Videos im Schlosspark Belverdere: [https://www.flickr.com/photos/137226701@N06/albums/72157661120668650 Bild- & Video-Uploads auf Flickr] | ||
== Proccesing - Workshop-Wochenende I - Video & Sound == | == Proccesing - Workshop-Wochenende I - Video & Sound == | ||
Sounds aus der Parkhöhle:<br><br> | Sounds aus der Parkhöhle:<br><br> | ||
Ventilation: <flashmp3 id="Park3.mp3"> | Ventilation: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park1.mp3</flashmp3> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Seismische Kammer: <flashmp3 id="Park3.mp3"> | Seismische Kammer: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park2.mp3</flashmp3> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Automatische Tür: <flashmp3 id="Park3.mp3"> | Automatische Tür: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park3.mp3</flashmp3> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
== Hausaufgabe | == Hausaufgabe IV == | ||
* Soundboard | * Soundboard | ||
Line 169: | Line 163: | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
[[Image:parkhoehle_.png|thumb|left|250px]] | [[Image:parkhoehle_.png|thumb|left|250px]] | ||
<videoflash type="youtube">jkKYZnJWWUQ|250|410|</videoflash> | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 177: | Line 174: | ||
Fotos bei der Mensa am Park: [https://www.flickr.com/photos/137226701@N06/albums/72157663612224255 Bild-Uploads auf Flickr] | Fotos bei der Mensa am Park: [https://www.flickr.com/photos/137226701@N06/albums/72157663612224255 Bild-Uploads auf Flickr] | ||
== Hausaufgabe V == | |||
* Pixel Sorting | * Pixel Sorting | ||
Line 182: | Line 180: | ||
Sortierung der Pixel nach Farbton | Sortierung der Pixel nach Farbton | ||
https://waesch.000webhostapp.com/ablage/images/Sorting_250.png | |||
https://waesch.000webhostapp.com/ablage/images/Tile-Sorting.gif | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 193: | Line 192: | ||
<br> | <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
https://waesch.000webhostapp.com/ablage/images/Video-Processing.gif | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
[ | [https://waesch.000webhostapp.com/ablage/video/walk.mp4 Original Video Download] | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 208: | Line 207: | ||
<br> | <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
https://waesch.000webhostapp.com/ablage/images/Dot-Webcam.gif | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Line 217: | Line 216: | ||
* Labyrinth | * Labyrinth | ||
... | Bei dem Labyrinth wird versucht, so schnell wie möglich einen einfachen Weg aus der Mitte ins Freie oder in die Mitte zu finden.<br>Im zweiten Versuch habe ich die Wände durchbrochen um ans Ziel zu kommen. | ||
<br style="clear:both;"> | |||
[[Image:labyrinth_1.jpg|thumb|left|350px]] | |||
[[Image:labyrinth_2.jpg|thumb|left|350px]] | |||
<br style="clear:both;"> | |||
[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_VIII Processing v3.0.1 Quellcode] | |||
== Finale Aufgabe == | == Finale Aufgabe == | ||
* Ink Image Animation | *Animation einer fließenden Farbe | ||
Für ein Website-Projekt habe ich versucht, mit den Farbwerten die dominante Farbe "fließen" zu lassen.<br>Damit die Hintergrund-Animation nicht zu dominant wirkt, und um den Kontrast zu erhöhen, wird das Bild in Schwarz/Weiß umgewandelt. | |||
<br> | |||
<br style="clear:both;"> | |||
Zunächst habe die farbige Malerei eingescannt: | |||
<br> | |||
<br style="clear:both;"> | |||
https://waesch.000webhostapp.com/ablage/images/Ink-Image.jpg | |||
<br style="clear:both;"> | |||
<br> | |||
Danach habe ich skizziert wie das Bild in Schwarz/Weiß analysiert werden soll. | |||
https://waesch.000webhostapp.com/ablage/images/Ink-Image-SW.jpg | |||
<br style="clear:both;"> | |||
Mit dem Processing-Code wird das Bild in Schwarz-/Weiß umgewandelt und der dunkelste Schwartwert ermittelt. | |||
https://waesch.000webhostapp.com/ablage/images/Ink-Image-Animation.gif | |||
<br> | <br> | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Zum Schluss habe ich die Animation als Hintergrund in die Website eingebunden. | |||
<br> | |||
<br style="clear:both;"> | |||
https://waesch.000webhostapp.com/ablage/images/Ink-Image-Animation-Website.gif | |||
<br> | |||
<br style="clear:both;"> | <br style="clear:both;"> | ||
[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Finale_Aufgabe Processing v3.0.1 Quellcode] | [http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Finale_Aufgabe Processing v3.0.1 Quellcode] |
Latest revision as of 09:57, 2 July 2017
Dirk Wäsch
Meine Seite zum Kurs "Processing im Park".
Ausflug - Ilmpark
Fotos im Ilmpark: Bild-Uploads auf Flickr
Hausaufgabe I
- Diese Fotos haben wir zunächst als Slideshow animiert.
Hausaufgabe II
- Image-Slicer
Hausaufgabe III
- Animierter Mauszeiger
Ausflug - Schlosspark Belvedere
- Fotos und Videos im Schlosspark Belverdere: Bild- & Video-Uploads auf Flickr
Proccesing - Workshop-Wochenende I - Video & Sound
Sounds aus der Parkhöhle:
Ventilation: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park1.mp3</flashmp3>
Seismische Kammer: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park2.mp3</flashmp3>
Automatische Tür: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park3.mp3</flashmp3>
Hausaufgabe IV
- Soundboard
Beim Spazieren durch die Weimarer Parkhöhle
<videoflash type="youtube">jkKYZnJWWUQ|250|410|</videoflash>
Proccesing - Workshop-Wochenende II - Video & Sound
Fotos bei der Mensa am Park: Bild-Uploads auf Flickr
Hausaufgabe V
- Pixel Sorting
Sortierung der Pixel nach Farbton
Hausaufgabe VI
- Video-Processing
Beim Spazieren im Schlosspark Belvedere habe ich meine Füße gefilmt, wie sie sich auf dem verschiedenen Untergrund bewegen.
Hausaufgabe VII
- Dot-Webcam
Die Kamera stellt die Bilder in Punkten dar.
Hausaufgabe VIII
- Labyrinth
Bei dem Labyrinth wird versucht, so schnell wie möglich einen einfachen Weg aus der Mitte ins Freie oder in die Mitte zu finden.
Im zweiten Versuch habe ich die Wände durchbrochen um ans Ziel zu kommen.
Finale Aufgabe
- Animation einer fließenden Farbe
Für ein Website-Projekt habe ich versucht, mit den Farbwerten die dominante Farbe "fließen" zu lassen.
Damit die Hintergrund-Animation nicht zu dominant wirkt, und um den Kontrast zu erhöhen, wird das Bild in Schwarz/Weiß umgewandelt.
Zunächst habe die farbige Malerei eingescannt:
Danach habe ich skizziert wie das Bild in Schwarz/Weiß analysiert werden soll.
Mit dem Processing-Code wird das Bild in Schwarz-/Weiß umgewandelt und der dunkelste Schwartwert ermittelt.
Zum Schluss habe ich die Animation als Hintergrund in die Website eingebunden.