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.
Quellcode auf OpenProcessing: sketch247448.pde
Processing 3.0 Quellcode:
int numFrames = 9; // The number of frames in the animation
int frame = 0;
PImage[] images = new PImage[numFrames];
void setup()
{
size(720, 405);
background(0, 0, 0);
images[0] = loadImage("bridge.jpg");
images[1] = loadImage("bridge_water.jpg");
images[2] = loadImage("bridge-down.jpg");
images[3] = loadImage("leaves.jpg");
images[4] = loadImage("park.jpg");
images[5] = loadImage("river.jpg");
images[6] = loadImage("sky_leaves.jpg");
images[7] = loadImage("sky_pinetree.jpg");
images[8] = loadImage("water.jpg");
frameRate(0.75);
}
void draw()
{
frame = (frame) % numFrames; // Use % to cycle through frames
image(images[frame], 0, 0, 720, 405);
if (frame<9)
{ frame++;
}
else frame = 0;
}
- Danach wurden die Fotos in ein Raster gesetzt.
Quellcode auf OpenProcessing: sketch267716.pde
Processing 3.0 Quellcode:
size(300, 300);
PImage image1 = loadImage("sky_leaves.jpg");
PImage image2 = loadImage("bridge.jpg");
PImage image3 = loadImage("tree.jpg");
PImage image4 = loadImage("water.jpg");
PImage image5 = loadImage("hole.jpg");
PImage image6 = loadImage("bridge.jpg");
PImage image7 = loadImage("leaves.jpg");
PImage image8 = loadImage("park.jpg");
PImage image9 = loadImage("river.jpg");
image(image1, 0, 0, 100, 100);
image(image2, 0, 100, 100, 100);
image(image3, 0, 200, 100, 100);
image(image4, 100, 0, 100, 100);
image(image5, 100, 100, 100, 100);
image(image6, 100, 200, 100, 100);
image(image7, 200, 0, 100, 100);
image(image8, 200, 100, 100, 100);
image(image9, 200, 200, 100, 100);
saveFrame("my_park_grid.jpg");
Hausaufgabe II
- Image-Slicer
Quellcode auf OpenProcessing: sketch267719.pde
Processing 3.0 Quellcode:
// number of max slices
int maxSlices = 256;
Slice[] slice = new Slice[maxSlices];
// number of start slices
int n = 16;
float step = 2;
PImage img;
void setup() {
smooth();
// background colour
background(0);
// load Image
img = loadImage("park_008.jpg");
// window size
size(720,405);
for (int i = 0; i < n; i++) {
slice[i] = new Slice(int(i*img.width/n),int(img.width/n),img);
}
println(width);
println(height);
}
void draw() {
// background colour
fill(0);
// create rectangle with width and height of the image
rect(0,0,width,height);
for (int i = 0; i < n; i++) {
slice[i].paint();
}
}
void mousePressed() {
save("pic.jpg");
n = int(n*step);
if(n > maxSlices | n < 4){
step = 1/step;
n = int(n*step*step);
}
for (int i = 0; i < n; i++) {
slice[i] = new Slice(int(i*img.width/n),int(img.width/n),img);
}
}
class Slice {
int xini;
int xSize;
PImage img;
PImage imgSlice;
float vel;
float xVel;
float xPos;
float sign;
float seed;
float iter = 0;
float t = 100;
Slice(int xiniTemp, int xSizeTemp, PImage imgTemp) {
xini = xiniTemp;
xSize = xSizeTemp;
img = imgTemp;
imgSlice = createImage(xSize,img.height,ARGB);
vel = 0;
xVel = 0;
sign = random(-1,1);
sign = sign/abs(sign);
seed = random(0,100);
xPos = 0.5*(width-img.width) + xini + xVel + sign*noise(seed)*img.width/3;
int p = 0;
for (int i = 0; i < img.height; i++) {
for (int j = 0; j < img.width; j++) {
if((j >= xini) & (j < xini + xSize)){
imgSlice.pixels[p] = img.pixels[j + i*img.width];
p +=1;
}
}
}
}
// create sliced image
void paint() {
image(imgSlice,xPos,0);
}
}
Hausaufgabe III
- Animierter Mauszeiger
Quellcode auf OpenProcessing: sketch267720.pde
Processing 3.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
// As a result the dark parts of the image will become more transparent
// Nota Bene: This is a hack :)
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
- Video-Einbindung
Inhalt folgt später.
Proccesing - Workshop-Wochenende
Inhalt folgt später.