Flickr Image wall
in
Share your Work
•
3 years ago
Good day,
This is a 3d image wall sketch that i created. it uses the flickr api to get the last 100 added images and displays them.
I can't really think of that much to say about this project... basically i wanted to see how it was like to work with xml files in processing so i made this. I know these aren't anything new but i haven't seen one i processing so i thought i'd post it, also i haven seen many exhibition posts lately...
Copy-paste the code to try it :)
Controlls: use the mouse to move and the scroll to zoom
This is a 3d image wall sketch that i created. it uses the flickr api to get the last 100 added images and displays them.
I can't really think of that much to say about this project... basically i wanted to see how it was like to work with xml files in processing so i made this. I know these aren't anything new but i haven't seen one i processing so i thought i'd post it, also i haven seen many exhibition posts lately...
Copy-paste the code to try it :)
Controlls: use the mouse to move and the scroll to zoom
- //Processing Image Wall
- //By Gustav Bjordal
- import processing.opengl.*;
- class Photo{
- PImage img;
- float x;
- float y;
- float z;
- float smallWidth;
- float smallHeight;
- float currentWidth;
- float currentHeight;
- int id;
- boolean loading;
- public Photo(String url,float nx,float ny,int _id){
- img = requestImage(url);
- id = _id;
- loading = true;
- x = nx;
- y = ny;
- z = 0;
- }
- public void doneLoading(){
- loading = false;
- if(img.width > img.height){
- currentWidth = smallWidth = 120;
- currentHeight = smallHeight = img.height*(120/(float)img.width);
- }
- else{
- currentWidth = smallWidth = img.width*(120/(float)img.height);
- currentHeight = smallHeight = 120;
- }
- }
- public void drawImage(PGraphics g){
- g.translate(0,0,z);
- g.beginShape();
- g.texture(img);
- g.vertex(x*120 + (120-currentWidth)/2, y*120+(120-currentHeight)/2, 0, 0);
- g.vertex(x*120+currentWidth+(120-currentWidth)/2, y*120+(120-currentHeight)/2, 1, 0);
- g.vertex(x*120+currentWidth+(120-currentWidth)/2, y*120+currentHeight+(120-currentHeight)/2, 1, 1);
- g.vertex(x*120+(120-currentWidth)/2, y*120+currentHeight+(120-currentHeight)/2, 0, 1);
- g.endShape();
- g.translate(0,0,-z);
- }
- public void drawBuffer(PGraphics b){
- b.translate(0,0,z);
- b.beginShape();
- b.noStroke();
- b.fill(-(id + 2));
- b.vertex(x*120 + (120-currentWidth)/2, y*120+(120-currentHeight)/2);
- b.vertex(x*120+currentWidth+(120-currentWidth)/2, y*120+(120-currentHeight)/2);
- b.vertex(x*120+currentWidth+(120-currentWidth)/2, y*120+currentHeight+(120-currentHeight)/2);
- b.vertex(x*120+(120-currentWidth)/2, y*120+currentHeight+(120-currentHeight)/2);
- b.endShape(CLOSE);
- b.translate(0,0,-z);
- }
- }
- int NUMOFIMAGES = 100;
- PGraphics buffert;
- XMLElement xml;
- ArrayList photos;
- int worldWidth;
- int worldHeight;
- float worldX;
- float worldY = 100;
- float worldZ;
- float focusX;
- float focusY;
- float destZ = 100;
- float destY;
- float destX;
- float worldRotateX;
- float worldRotateY;
- float worldRotateDestX;
- float worldRotateDestY;
- void setup(){
- size(1920,800,OPENGL); //sorry about the size, feel free to change it to something that fits your screen
- buffert = createGraphics(width,height,P3D);
- photos = new ArrayList();
- xml = new XMLElement(this, "http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=99835d77b01b776f3115b56180c6c4f4&per_page="+NUMOFIMAGES);
- XMLElement photoList = xml.getChild(0);
- int childCount = photoList.getChildCount();
- int perRow = childCount/5;
- worldWidth = (perRow+1)*120;
- worldHeight = 6*120;
- int yPos = 0;
- for(int i = 0; i < childCount;i++){
- String farm = photoList.getChild(i).getAttribute("farm");
- String server = photoList.getChild(i).getAttribute("server");
- String id = photoList.getChild(i).getAttribute("id");
- String secret = photoList.getChild(i).getAttribute("secret");
- if(i%perRow == 0){
- yPos++;
- }
- photos.add(new Photo("http://farm"+farm+".static.flickr.com/"+server+"/"+id+"_"+secret+".jpg",i%perRow,yPos,i+1));
- }
- imageMode(CENTER);
- textureMode(NORMALIZED);
- noStroke();
- smooth();
- worldZ = 100;
- addMouseWheelListener(new java.awt.event.MouseWheelListener() {
- public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) {
- mouseWheel(evt.getWheelRotation());
- }
- }
- );
- }
- void draw(){
- background(0);
- if(worldZ < 300){
- worldRotateDestX = ((PI/2)*mouseY/height-PI/4);
- worldRotateDestY = ((PI/2)*mouseX/width-PI/4);
- destY = (height-worldHeight)/2-60;
- destY += -(mouseY-height/2)/2;
- }
- else{
- worldRotateDestX = 0;
- worldRotateDestY = 0;
- destY = -(mouseY-height/2);
- }
- worldY += (destY-worldY)/max((worldZ-100),25);
- worldZ += (destZ-worldZ)/50;
- worldX -= (mouseX-width/2)/max((worldZ-50),25);
- worldX = min(max(worldX,-worldWidth+width/2),width/2);
- worldY = min(max(worldY,-worldHeight+height/2),height/2);
- worldRotateX += (worldRotateDestX-worldRotateX)/15;
- worldRotateY += (worldRotateDestY-worldRotateY)/15;
- translate(width/2,height/2,0);
- rotateX(worldRotateX);
- rotateY(-worldRotateY);
- scale(worldZ/100);
- translate(-width/2,-height/2,-0);
- boolean toggled = false;
- translate(worldX,worldY,0);
- buffert.beginDraw();
- buffert.background(color(255));
- buffert.translate(width/2,height/2,0);
- buffert.rotateX(worldRotateX);
- buffert.rotateY(-worldRotateY);
- buffert.scale(worldZ/100);
- buffert.translate(-width/2,-height/2,-0);
- buffert.translate(worldX,worldY,0);
- for(int i = 0; i< photos.size();i++){
- Photo p = (Photo)photos.get(i);
- p.drawBuffer(buffert);
- }
- buffert.endDraw();
- for(int i = 0; i< photos.size();i++){
- Photo p = (Photo)photos.get(i);
- if(p.loading && p.img.width >0){
- p.doneLoading();
- }
- if(buffert.get(mouseX,mouseY) == -(p.id+2)){
- p.currentWidth = p.smallWidth*1.5;
- p.currentHeight = p.smallHeight*1.5;
- p.z =10;
- toggled = true;
- }
- else{
- p.currentWidth = p.smallWidth;
- p.currentHeight = p.smallHeight;
- p.z = 0;
- }
- p.drawImage(g);
- }
- }
- void mouseWheel(int delta) {
- destZ -= delta*30;
- if(destZ < 25){
- destZ = 25;
- }
- }
2
