344
edits
GMU:Processing im Park/Dirk Wäsch (view source)
Revision as of 00:31, 16 December 2015
, 16 December 2015no edit summary
No edit summary |
No edit summary |
||
| Line 15: | Line 15: | ||
<br style="clear:both;"> | <br style="clear:both;"> | ||
Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/247448 sketch247448.pde] | Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/247448 sketch247448.pde] <br> | ||
<br> | Processing 3.0 Source Code | ||
<source lang="java"> | |||
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; | |||
} | |||
</source> <br> | |||
* Danach wurden die Fotos in ein Raster gesetzt. | * Danach wurden die Fotos in ein Raster gesetzt. | ||
| Line 26: | Line 61: | ||
Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/267716 sketch267716.pde] <br> | Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/267716 sketch267716.pde] <br> | ||
Processing 3.0 Source Code | |||
<source lang="java"> | |||
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"); | |||
</source> <br> | |||
== Hausaufgabe II == | == Hausaufgabe II == | ||
| Line 36: | Line 100: | ||
Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/267719 sketch267719.pde] <br> | Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/267719 sketch267719.pde] <br> | ||
Processing 3.0 Source Code | |||
<source lang="java"> | |||
// 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); | |||
} | |||
} | |||
</source> <br> | |||
== Hausaufgabe III == | == Hausaufgabe III == | ||
| Line 46: | Line 204: | ||
Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/267720 sketch267720.pde] <br> | Quellcode auf OpenProcessing: [http://www.openprocessing.org/sketch/267720 sketch267720.pde] <br> | ||
Processing 3.0 Source Code | |||
<source lang="java"> | |||
int n = 10; | |||
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("graffity_00" + i + ".png"); | |||
// 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]); | |||
} | |||
} | |||
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 == | == Ausflug - Schlosspark Belvedere == | ||