Februar 23, 2012
Bei dieser Aufgabe habe ich die Farbwerte eines Bildes in Farbpunkte aufgerastert (wie Zeitungsdruck). Das Raster lässt mit der Mausbewegung vergrössern und verkleinern. Ein Rasterpunkt besteht aus einem roten, grünen und blauen Kreis die leicht verschoben dargestellt werden. Jeder Rasterpunkt ist ein Objekt der Colordot-Klasse und beinhaltet die Farbwerte, Grösse, Abstand zur Maus etc.Processing
Main
PImage myImage; import processing.opengl.*; int greenUpdate; int greenAnim=1; int blueUpdate; int blueAnim=1; int redUpdate; int redAnim=1; float mouseInputX; float wheelInput; float zoom; PVector startPos = new PVector(); PVector endPos = new PVector(); ArrayList data= new ArrayList(); // circles int circleMaxWidth=40; int circleMinWidth=3; String[] images = { "henry.jpg", "seed-bomb-poster.jpg", "nose-portrait-i2.jpg", "172682_f520.jpg", "music galloway 2-3L-jonhuck.com-breakfast-.jpg", "sam-alfano.jpg", "tiger01_ cargocollective_com_ mattstevens.jpg" }; int imageIndex=0; void setup() { /*addMouseWheelListener(new java.awt.event.MouseWheelListener() { public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) { mouseWheel(evt.getWheelRotation()); }}); */ smooth(); imageMode(CENTER); myImage = loadImage(images[imageIndex]); reset(); size(800, 600, OPENGL); } void reset() { data= new ArrayList(); myImage.loadPixels(); // make dots objects for (int i = 0; i < myImage.pixels.length;i++ ) { // get image color float r = red(myImage.pixels[i]); float g = green(myImage.pixels[i]); float b = blue(myImage.pixels[i]); // add dot object to arraylist Colordot tmp = new Colordot(r, g, b); data.add(tmp); } } void draw() { background(0); // control lines mouse movement fill(204); rect(width/2,0,1,8); rect(width/2,height-8,1,8); rect(0,height/2,8,1); rect(width-8,height/2,8,1); rect(mouseX,8,1,8); rect(mouseX,height-16,1,8); rect(8,mouseY,8,1); rect(width-16,mouseY,8,1); pushMatrix(); translate((width-myImage.width)/2,(height-myImage.height)/2); // Loop through every pixel for (int x = 0; x < myImage.width; x++ ) { // We can get the length of the pixels array just like with any array. for (int y = 0; y < myImage.height; y++ ) { int loc = x + y * myImage.width; // The location in the pixel array is calculated via our formula: 1D pixel location = x + y * width // access dot object Colordot tmp = (Colordot) data.get(loc); float mouseDistance = (width/2)-mouseX; // mouse distance image center startPos.set(mouseX,mouseY,0); endPos.set(width/2,height/2,0); PVector dir = PVector.sub(endPos,startPos); mouseDistance = dir.mag(); // mouse distance dot startPos.set(mouseX,mouseY,0); endPos.set(x,y,0); PVector dir2 = PVector.sub(endPos,startPos); float mouseDistanceCircle = dir2.mag(); if (mouseDistance>(width/2)) { mouseInputX = map(mouseDistance, 0, -1*(width/2), circleMinWidth, circleMaxWidth); } else { mouseInputX = map(mouseDistance, (width/2), 0, circleMaxWidth, circleMinWidth); } if (abs(mouseInputX) draw dots tmp.setPos(x,y); tmp.setMouseDistance(mouseDistanceCircle); tmp.draw(mouseInputX); } } } popMatrix(); } void keyPressed() { switch(key) { case 'a': // load next image imageIndex++; if (imageIndex>=images.length) imageIndex=0; myImage = loadImage(images[imageIndex]); reset(); break; // save screenshot case 'p': save("screen/screen_"+year()+"-"+month()+""+day()+"_"+hour()+"-"+minute()+"-"+second()); break; default: break; } // switch }
Class Colordot
class Colordot { float r; float g; float b; float x; float y; float circleMaxDiv = 1.2; float mouseInputX; float mouseDistance; Colordot(float _r, float _g, float _b) { r=_r; g=_g; b=_b; ellipseMode(CENTER); } void setPos(float _x, float _y) { x=_x; y=_y; } void setMouseDistance(float _m) { mouseDistance=_m; } void draw(float _mouseInputX) { mouseInputX=_mouseInputX; // + mouseDistance/20 noStroke(); // Red Dot fill(255,0,0,map(r,0,255,51,255)); ellipse(x,y,map(r,0,255,0,mouseInputX/circleMaxDiv),map(r,0,255,0,mouseInputX/circleMaxDiv)); // Gren Dot fill(0,255,0,map(g,0,255,51,255)); ellipse(x+mouseInputX/2,y,map(g,0,255,0,mouseInputX/circleMaxDiv),map(g,0,255,0,mouseInputX/circleMaxDiv)); // BLue Dot fill(0,0,255,map(b,0,255,51,255)); ellipse(x+mouseInputX/4,y+mouseInputX/2,map(b,0,255,0,mouseInputX/circleMaxDiv),map(b,0,255,0,mouseInputX/circleMaxDiv)); //println(r+"-"+g+"-"+b); } }