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
Processing v3.0.0 Quellcode:
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];
// 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);
}
Ausflug - Schlosspark Belvedere
- Fotos und Videos im Schlosspark Belverdere: Bild- & Video-Uploads auf Flickr
Hausaufgabe IV
- Pixel
Inhalt folgt später.
Proccesing - Workshop-Wochenende I - Video & Sound
Sounds aus der Parkhöhle:
Ventilation: <flashmp3 id="Park3.mp3">http://waesch.host56.com/ablage/sound/Park1.mp3</flashmp3>
Seismische Kammer: <flashmp3 id="Park3.mp3">http://waesch.host56.com/ablage/sound/Park2.mp3</flashmp3>
Automatische Tür: <flashmp3 id="Park3.mp3">http://waesch.host56.com/ablage/sound/Park3.mp3</flashmp3>
Hausaufgabe V
- Soundboard
Beim Spazieren durch die Weimarer Parkhöhle
Processing v2.1.1 Quellcode:
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() {
minim = new Minim(this);
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() {
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();
}
}
Proccesing - Workshop-Wochenende II - Video & Sound
Fotos bei der Mensa am Park: Bild-Uploads auf Flickr
- Pixel Sorting
Sortierung der Pixel nach Farbton
Processing v3.0.1 Quellcode:
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;
}
Hausaufgabe VI
- Butterfly-Webcam
Die Kamera wird in der Mitte gespiegelt
VIDEO
Processing v2.1.1 Quellcode:
code
Hausaufgabe VII
- Video-Processing
Beim Spazieren im Schlosspark Belvedere habe ich meine Füße gefilmt, wie sie sich auf dem verschiedenen Untergrund bewegen.
VIDEO
Processing v2.1.1 Quellcode:
code
Hausaufgabe VIII
- Labyrinth
VIDEO
Processing v2.1.1 Quellcode:
code