GMU:Processing im Park/Dirk Wäsch: Difference between revisions

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.

Processing v3.0.0 Quellcode

Hausaufgabe II

Image-Slicer

Processing v3.0.0 Quellcode

Hausaufgabe III

Animierter Mauszeiger

Processing v3.0.0 Quellcode

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>

Processing v2.1.1 Quellcode

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

Processing v3.0.1 Quellcode

Hausaufgabe VI

Video-Processing

Beim Spazieren im Schlosspark Belvedere habe ich meine Füße gefilmt, wie sie sich auf dem verschiedenen Untergrund bewegen.

Original Video Download

Processing v2.1.1 Quellcode

Hausaufgabe VII

Dot-Webcam

Die Kamera stellt die Bilder in Punkten dar.

Processing v2.1.1 Quellcode

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.

Processing v3.0.1 Quellcode

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.

Processing v3.0.1 Quellcode

@@ Line 121: / Line 121: @@
 <br style="clear:both;">
-<br>
-[http://waesch.host56.com/ablage/processing/interactivepark/interactivepark.html Beispiel in ProcessingJS]
 [http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_I Processing v3.0.0 Quellcode]
@@ Line 131: / Line 129: @@
 [[Image:image_slicer_720_405.png|left|400px]]
-http://cdn.makeagif.com/media/1-21-2016/Wxy0e-.gif
+https://waesch.000webhostapp.com/ablage/images/Image-Slicer.gif
-<br style="clear:both;">
 [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 142: / Line 138: @@
 [[Image:brush_animation_720_405.png|thumb|left|400px]]
-http://cdn.makeagif.com/media/1-21-2016/ta1xeo.gif
+https://waesch.000webhostapp.com/ablage/images/Brush-Animation.gif
-<br style="clear:both;">
 [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 151: / Line 145: @@
 *Fotos und Videos im Schlosspark Belverdere: [https://www.flickr.com/photos/137226701@N06/albums/72157661120668650 Bild- & Video-Uploads auf Flickr]
-== Hausaufgabe IV ==
-* Pixel
-Inhalt folgt später.
 == Proccesing - Workshop-Wochenende I - Video & Sound ==
 Sounds aus der Parkhöhle:<br><br>
-Ventilation: <flashmp3 id="Park3.mp3">http://waesch.host56.com/ablage/sound/Park1.mp3</flashmp3>
+Ventilation: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park1.mp3</flashmp3>
 <br style="clear:both;">
-Seismische Kammer: <flashmp3 id="Park3.mp3">http://waesch.host56.com/ablage/sound/Park2.mp3</flashmp3>
+Seismische Kammer: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park2.mp3</flashmp3>
 <br style="clear:both;">
-Automatische Tür: <flashmp3 id="Park3.mp3">http://waesch.host56.com/ablage/sound/Park3.mp3</flashmp3>
+Automatische Tür: <flashmp3 id="Park3.mp3">https://waesch.000webhostapp.com/ablage/sound/Park3.mp3</flashmp3>
 <br style="clear:both;">
-== Hausaufgabe V ==
+== Hausaufgabe IV ==
 * Soundboard
@@ Line 175: / Line 163: @@
 <br style="clear:both;">
 [[Image:parkhoehle_.png|thumb|left|250px]]
+<videoflash type="youtube">jkKYZnJWWUQ|250|410|</videoflash>
 <br style="clear:both;">
@@ Line 183: / Line 174: @@
 Fotos bei der Mensa am Park: [https://www.flickr.com/photos/137226701@N06/albums/72157663612224255 Bild-Uploads auf Flickr]
+== Hausaufgabe V ==
 * Pixel Sorting
@@ Line 188: / Line 180: @@
 Sortierung der Pixel nach Farbton
-http://waesch.host56.com/ablage/images/Sorting_250.png
+https://waesch.000webhostapp.com/ablage/images/Sorting_250.png
+https://waesch.000webhostapp.com/ablage/images/Tile-Sorting.gif
 <br style="clear:both;">
+[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Workshop_II Processing v3.0.1 Quellcode]
-Processing v3.0.1 Quellcode:
-<br>
-<source lang="java">
-PImage img;
-int d = 50;
-PImage[] tiles;
-int rows, cols, n;
-void setup() {
-  size(1000, 500);
-  img = loadImage("https://c2.staticflickr.com/2/1449/24331989911_1044424084_k.jpg");
-  cols = (img.width/d);
-  rows = (img.height/d);
-  n = cols * rows;
-  tiles = new PImage[n];
-  for (int i = 0; i < n; i++) {
-    int x = d * (i % cols);
-    int y = d * (i / cols);
-    tiles[i] = img.get(x, y, d, d);
-  }
-}
-void draw() {
-   sort(tiles);
-   // show tiles
-   for(int i = 0; i < n; i++) {
-     PImage tile = tiles[i];
-     int y = d * (i / cols);
-     int x = d * (i % cols);
-     image(tile, x, y, d, d);
-   }
-}
-void sort(PImage[] tiles) {
-  for(int y = 0; y < rows; y++) {
-    for(int x = 0; x < cols-1; x++) {
-      int pos1 = y * cols + x;
-      int pos2 = y * cols + (x+1);
-      PImage tile1 = tiles[pos1];
-      PImage tile2 = tiles[pos2];
-      if( hue(average(tile1)) - hue(average(tile2)) > mouseX ) {
-        PImage tmptile = tiles[pos1];
-        tiles[pos1] = tiles[pos2];
-        tiles[pos2] = tmptile;
-      }
-    }
-  }
-}
-color average(PImage img) {
-  img.loadPixels();
-  color[] pxls = img.pixels;
-  float r = 0, g = 0, b = 0;
-  int n = pxls.length;
-  for(int i = 0; i < n; i++) {
-    color c = pxls[i];
-    r += red(c);
-    g += green(c);
-    b += blue(c);
-  }
-  color average = color(r/n, g/n, b/n);
-  return average;
-}
-</source><br>
 == Hausaufgabe VI ==
 * Video-Processing
 Beim Spazieren im Schlosspark Belvedere habe ich meine Füße gefilmt, wie sie sich auf dem verschiedenen Untergrund bewegen.
+<br>
 <br style="clear:both;">
-VIDEO
+https://waesch.000webhostapp.com/ablage/images/Video-Processing.gif
+<br style="clear:both;">
+[https://waesch.000webhostapp.com/ablage/video/walk.mp4 Original Video Download]
 <br style="clear:both;">
@@ Line 283: / Line 202: @@
 == Hausaufgabe VII ==
-* Butterfly-Webcam
+* Dot-Webcam
-Die Kamera wird in der Mitte gespiegelt
+Die Kamera stellt die Bilder in Punkten dar.
+<br>
 <br style="clear:both;">
-VIDEO
+https://waesch.000webhostapp.com/ablage/images/Dot-Webcam.gif
 <br style="clear:both;">
@@ Line 296: / Line 216: @@
 * Labyrinth
-Wie man aus dem Labyrinth entkommt.
+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;">
-VIDEO
+[[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 ==
+*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 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;">
+[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]