Processing
08 PhotoGraph 照片圖
Transform the images into 3D form 將圖像轉成3D
Prepare a Image Around 300 x 300 pixel 準備一張 300 x 300 的照片
Put the image in the folder of your sketch 將照片放在你新創存檔的資料夾中
import processing.opengl.*;
void draw() { background(0);
import peasy.test.*; import peasy.org.apache.commons.math.*; import peasy.*; import peasy.org.apache.commons.math.geometry.*;
if (record == true) { beginRaw(DXF, "output.dxf"); // Start recording to the file }
import processing.dxf.*; boolean record = false; PeasyCam cam;
resolution 解析度
PImage img; // The source image int cellsize = 2; // Dimensions of each cell in the grid int cols, rows; // Number of columns and rows in our system
void setup() { size(700, 700, OPENGL); cam = new PeasyCam(this, 100,100,100,1500); cam.setMaximumDistance(2550); cam.setMinimumDistance(10); img = loadImage("Bergson.jpg"); // Load the image cols = img.width/cellsize; // Calculate # of columns rows = img.height/cellsize; // Calculate # of rows }
Your Photo Name 你照片的名字
loadPixels(); // Begin loop for columns for ( int i = 0; i < cols;i++) { // Begin loop for rows for ( int j = 0; j < rows;j++) { int x = i*cellsize + cellsize/2; // x position int y = j*cellsize + cellsize/2; // y position int loc = x + y*img.width; // Pixel array location color c = img.pixels[loc]; // Grab the color // Calculate a z position as a function of mouseX and pixel brightness //float z = (100/(float)width) * brightness(img.pixels[loc]) - 100.0); // Translate to the location, set fill and stroke, and draw the rect //fill(c); noStroke(); float m =brightness(img.pixels[loc]); pushMatrix(); translate(x,y,m/2); fill(c); //fill(x,y,m/2); //rectMode(CENTER); //sphere(brightness(img.pixels[loc])/100); //box(cellsize); strokeWeight(2); stroke(c); point(0,0,0); //rect(0,0,cellsize,cellsize); popMatrix(); } } } void keyPressed() { if (key == 'R' || key == 'r') { // Press R to save the file record = true; } }
Use this opportunity to set up the “GUI” together 運用這個機會 練習一下 使用者介面八
Open a new tag and name it “GUI”
開啟一個tag叫他 GUI
Still remember this? 還記得我嗎? import peasy.*; import controlP5.*;
void draw() { if (controlP5.isMouseOver()) { cam.setActive(false); } else { cam.setActive(true); }
PeasyCam cam; ControlP5 controlP5;
background(0); fill(255,80,255); stroke(0);
PMatrix3D currCameraMatrix; PGraphics3D g3;
YOUR MAIN CODE
void setup() { size(800,800,P3D); g3 = (PGraphics3D)g; cam = new PeasyCam(this, 800); controlP5 = new ControlP5(this); initGUI();
Add this
controlP5.setAutoDraw(false); }
gui();
Delete this } void gui() { currCameraMatrix = new PMatrix3D(g3.camera); camera(); controlP5.draw(); g3.camera = currCameraMatrix; }
Make a init GUI() function
做一個 initGUI() 的功能
void initGUI() { controlP5 = new ControlP5(this); controlP5.addToggle("showOrigin",showOrigin,20,50,20,20).setLabel("show Original"); controlP5.addToggle("showPoint",showPoint,20,80,20,20).setLabel("show Points"); controlP5.addToggle("showLine",showLine,20,110,20,20).setLabel("show Lines"); controlP5.addToggle("showBox",showBox,20,140,20,20).setLabel("show Boxes"); controlP5.addToggle("showRect",showRect,20,170,20,20).setLabel("show Rectangle"); controlP5.addToggle("showBar",showBar,20,200,20,20).setLabel("show boxBar"); }
name
name location size
Name to show 設定按鈕
Setup buttons If you have slider, it’s like this
controlP5.addSlider (“speed", speed, 0, 200, 20, 20,100,10).setLabel("show speed");
name
name value location Setup sliders
size
Name to show 設定sliders
void initGUI() { controlP5 = new ControlP5(this); controlP5.addToggle("showOrigin",showOrigin,20,50,20,20).setLabel("show Original"); controlP5.addToggle("showPoint",showPoint,20,80,20,20).setLabel("show Points"); controlP5.addToggle("showLine",showLine,20,110,20,20).setLabel("show Lines"); controlP5.addToggle("showBox",showBox,20,140,20,20).setLabel("show Boxes"); controlP5.addToggle("showRect",showRect,20,170,20,20).setLabel("show Rectangle"); controlP5.addToggle("showBar",showBar,20,200,20,20).setLabel("show boxBar"); }
name
name location size
Name to show
If you have slider, it’s like this
controlP5.addSlider (“speed", speed, 0, 200, 20, 20,100,10).setLabel("show speed");
name
name value location
size
Name to show
void draw() {
import peasy.*; import controlP5.*;
if (controlP5.isMouseOver()) { cam.setActive(false); } else { cam.setActive(true); }
PeasyCam cam; ControlP5 controlP5;
background(0); fill(255,80,255); stroke(0);
PMatrix3D currCameraMatrix; PGraphics3D g3;
YOUR MAIN CODE
void setup() { size(800,800,P3D); g3 = (PGraphics3D)g;
gui();
initGUI();
}
cam = new PeasyCam(this, 800); controlP5 = new ControlP5(this); controlP5.setAutoDraw(false); }
Jut want to move this to a new tag 單純要分割CODE
void gui() { currCameraMatrix = new PMatrix3D(g3.camera); camera(); controlP5.draw(); g3.camera = currCameraMatrix; }
打開檔案試著加入這些按鈕 Open the file and try to set up the controller import controlP5.*; import processing.opengl.*; ………………………… boolean showOrigin = true; boolean showPoint = false; boolean showLine = false; boolean showBox = false; boolean showRect = false; boolean showBar = false; …………………………..
void setup() { ……………………….. } void draw() { if(showOrigin){ pushMatrix(); stroke(c); strokeWeight(5); translate(x,y,0); point(0,0); popMatrix(); }
if(showPoint){ pushMatrix(); fill(c); strokeWeight(5); stroke(c); translate(x,y,m/2); point(0,0); popMatrix(); } if(showLine){ pushMatrix(); stroke(c); strokeWeight(0.2); translate(x,y,m/2); line(0,0,0,0,0,-m/2); popMatrix(); } if(showBox){ pushMatrix(); noStroke(); //stroke(255); strokeWeight(0.2); fill(c); translate(x,y,m/4); box(cellsize,cellsize,-m/2); popMatrix(); }
if(showRect){ pushMatrix(); //stroke(255); //strokeWeight(0.5); noStroke(); translate(x,y,m/2); fill(255-x,255-y,255-m); //rectMode(CENTER); rect(0,0,cellsize,cellsize); //box(cellsize,cellsize,cellsize); popMatrix(); }
if(showBar){ pushMatrix(); noStroke(); translate(x,y,m/4); fill(255-x,255-y,255-m/2); box(cellsize,cellsize,-m/2); popMatrix(); } } } gui(); mm.addFrame(); } …………………………
Photo Form