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]
-<br>
 == Hausaufgabe II ==
@@ Line 133: / 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 144: / 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;">
-Processing v3.0.0 Quellcode:
-<source lang="java">
-int n = 10;
-// list of flickr urls, containing my images
-String[] urls = {
-  "https://c1.staticflickr.com/1/583/23143686064_f334ac29d3_c.jpg",
-  "https://c1.staticflickr.com/1/744/23145048033_5e4ca63da7_c.jpg",
-  "https://c1.staticflickr.com/6/5774/23771836845_a9bfd0e883_c.jpg",
-  "https://c1.staticflickr.com/6/5715/23403900079_6d7e2fbd96_c.jpg",
-  "https://c1.staticflickr.com/6/5815/23663367172_c647395930_c.jpg",
-  "https://c1.staticflickr.com/1/721/23663365892_fa35e2156a_c.jpg",
-  "https://c1.staticflickr.com/6/5654/23476155410_dfaa2d34e5_c.jpg",
-  "https://c1.staticflickr.com/1/781/23689409061_eb23a1cfd3_c.jpg",
-  "https://c1.staticflickr.com/1/614/23403891279_54d675d8db_c.jpg",
-  "https://c1.staticflickr.com/6/5695/23403888729_3caefaf24a_c.jpg"
-};
-PImage[] images = new PImage[n];
+[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]
-// offset to the reference point
-int dx = 100;
-int dy = 200;
-// factor to slow our animation down
-int slowdown = 4;
-// zoom factor for our image
-float zoom = 0.25;
-// speed of rotation
-float speed = 0.005;
-void setup() {
-  // canvas size
-  size(600, 400);
-  // start out with a white background
-  background(255);
-  // load images into the array using a loop
-  for(int i=0; i < n; i++) {
-    // load the image
-    images[i] = loadImage(urls[i]);
-    // Use the brightness of the image as its own alpha channel)
-    images[i].mask(images[i]);
-    noCursor();
-  }
-}
-void draw() {
-  // let's set a transparent tint, for extra effect
-  tint(255, 35);
-  // save the current transformation matrix
-  pushMatrix();
-  // restore the previous transformation matrix
-  popMatrix();
-  // pick the index of an image
-  int pick = (frameCount / slowdown) % n;
-  // move to the mouse position
-  translate(mouseX , mouseY);
-  // scale the image
-  scale(zoom);
-  // move to the reference point
-  translate(-dx, -dy);
-  // get image from the array and display it
-  image(images[pick], 0, 0);
-}
-</source> <br>
 == Ausflug - Schlosspark Belvedere ==
 *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 262: / Line 163: @@
 <br style="clear:both;">
 [[Image:parkhoehle_.png|thumb|left|250px]]
-<br style="clear:both;">
-Processing v2.1.1 Quellcode:
-<br>
-<source lang="java">
-import ddf.minim.*;
-Minim minim;
-PImage img1;
-int n=3;
-int activeLocation = -1;
-AudioPlayer[] players = new AudioPlayer[n];
-int[][] locations = {
-  {355, 40, 20},
-  {335, 165, 20},
-  {210, 320, 20},
-};
-void setup() {
+<videoflash type="youtube">jkKYZnJWWUQ|250|410|</videoflash>
- minim = new Minim(this);
+<br style="clear:both;">
- size(400,600);
- img1 = loadImage("https://c2.staticflickr.com/2/1686/24438648251_853287b12c_z.jpg");
-  for(int i=0; i<n; i++){
-   players[i] = minim.loadFile("http://waesch.host56.com/ablage/sound/Park" + (i+1) + ".mp3");
-  }
-}
-void draw() {
+[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_V Processing v2.1.1 Quellcode]
-  image(img1,0,0,400,600);
-  fill(225,150);
-  noStroke();
-  for(int i=0; i < locations.length; i++){
-   int[] loc =locations[i];
-  int x= loc[0];
-  int y= loc[1];
-  int r= loc[2];
- if(atLocation(x,y,r)){
-   activeLocation = i;
-    ellipse(x, y, 2*r, 2*r);
-   }
-   if(playingLocation(i)){
-    ellipse( x,y,2*r,2*r);
-   }
-  }
-}
-boolean atLocation(int x, int y, int r){
-      return dist(x,y,mouseX,mouseY)<r;
-}
-boolean playingLocation(int i){
-   return players[i].isPlaying();
-}
-void mousePressed(){
- if(activeLocation !=-1){
-  for (int i=0; i<n; i++) {
-   players[i].pause();
-  }
-  println("Sound " + (activeLocation + 1));
-  println(mouseX, mouseY);
-  players[activeLocation].rewind();
-  players[activeLocation].play();
- }
-}
-void keyPressed(){
-  for(int i=0; i<n; i++){
-    players[i].pause();
-  }
-  int i = (key - '1');
-  if(i>= 0 && i<n){
-  println("Sound " + (i+1));
-  players[i].rewind();
-  players[i].play();
-  }
-}
-</source><br>
 == Proccesing - Workshop-Wochenende II - Video & Sound ==
@@ Line 348: / 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 353: / 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]
+== Hausaufgabe VI ==
-Processing v3.0.1 Quellcode:
+* Video-Processing
+Beim Spazieren im Schlosspark Belvedere habe ich meine Füße gefilmt, wie sie sich auf dem verschiedenen Untergrund bewegen.
 <br>
-<source lang="java">
+<br style="clear:both;">
-PImage img;
+https://waesch.000webhostapp.com/ablage/images/Video-Processing.gif
-int d = 50;
+<br style="clear:both;">
-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() {
+[https://waesch.000webhostapp.com/ablage/video/walk.mp4 Original Video Download]
-   sort(tiles);
+<br style="clear:both;">
-   // 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) {
+[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_VI Processing v2.1.1 Quellcode]
-  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 ==
+== 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;">
-Processing v2.1.1 Quellcode:
+[http://www.uni-weimar.de/medien/wiki/index.php5?title=GMU:Processing_im_Park/Dirk_Wäsch/Code_Hausaufgabe_VII Processing v2.1.1 Quellcode]
-<br>
-<source lang="java">
-code
-</source><br>
-== Hausaufgabe VII ==
+== Hausaufgabe VIII ==
-* Video-Processing
+* Labyrinth
-Beim Spazieren im Schlosspark Belvedere habe ich meine Füße gefilmt, wie sie sich auf dem verschiedenen Untergrund bewegen.
+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;">
-Processing v2.1.1 Quellcode:
+[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>
-<source lang="java">
+<br style="clear:both;">
-code
+https://waesch.000webhostapp.com/ablage/images/Ink-Image.jpg
-</source><br>
+<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
-== Hausaufgabe VIII ==
+<br style="clear:both;">
+Mit dem Processing-Code wird das Bild in Schwarz-/Weiß umgewandelt und der dunkelste Schwartwert ermittelt.
-* Labyrinth
+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;">
-VIDEO
+https://waesch.000webhostapp.com/ablage/images/Ink-Image-Animation-Website.gif
+<br>
 <br style="clear:both;">
-Processing v2.1.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]
-<br>
-<source lang="java">
-code
-</source><br>