Processing=008=photograph

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