Embed Size (px)
DESCRIPTION
A_Little_Bit_Processing_Tutorial
Citation preview
Processing
PhotoGraph
08照片圖
Transform the images into 3D form
將圖像轉成3D
Prepare a ImageAround
300 x 300pixel
準備一張300 x 300的照片
Put the image in the folder of your sketch將照片放在你新創存檔的資料夾中
import processing.opengl.*;
import peasy.test.*;
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;
import processing.dxf.*;
boolean record = false;
PeasyCam cam;
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
}
void draw() {
background(0);
if (record == true) {
beginRaw(DXF, "output.dxf"); // Start recording to the file
}
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;
}
}
Your Photo Name
你照片的名字
resolution
解析度
Use this opportunity to set up the
“GUI”together運用這個機會
練習一下使用者介面八
Open a new tag and name it “GUI”
開啟一個tag叫他 GUI
import peasy.*;
import controlP5.*;
PeasyCam cam;
ControlP5 controlP5;
PMatrix3D currCameraMatrix;
PGraphics3D g3;
void setup() {
size(800,800,P3D);
g3 = (PGraphics3D)g;
cam = new PeasyCam(this, 800);
controlP5 = new ControlP5(this);
initGUI();
controlP5.setAutoDraw(false);
}
void draw() {
if (controlP5.isMouseOver()) {
cam.setActive(false);
} else {
cam.setActive(true);
}
background(0);
fill(255,80,255);
stroke(0);
gui();
}
void gui() {
currCameraMatrix = new PMatrix3D(g3.camera);
camera();
controlP5.draw();
g3.camera = currCameraMatrix;
}
YOUR MAIN CODE
Still remember this?
Delete this
還記得我嗎?
Add this
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");
}
做一個initGUI() 的功能
name name location size Name to show
controlP5.addSlider (“speed", speed, 0, 200, 20, 20,100,10).setLabel("show speed");
If you have slider, it’s like this
name name value location size Name to
show
Make a init GUI() function
設定按鈕Setup buttons
設定slidersSetup 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
controlP5.addSlider (“speed", speed, 0, 200, 20, 20,100,10).setLabel("show speed");
If you have slider, it’s like this
name name value location size Name to
show
import peasy.*;
import controlP5.*;
PeasyCam cam;
ControlP5 controlP5;
PMatrix3D currCameraMatrix;
PGraphics3D g3;
void setup() {
size(800,800,P3D);
g3 = (PGraphics3D)g;
initGUI();
cam = new PeasyCam(this, 800);
controlP5 = new ControlP5(this);
controlP5.setAutoDraw(false);
}
void draw() {
if (controlP5.isMouseOver()) {
cam.setActive(false);
} else {
cam.setActive(true);
}
background(0);
fill(255,80,255);
stroke(0);
gui();
}
void gui() {
currCameraMatrix = new PMatrix3D(g3.camera);
camera();
controlP5.draw();
g3.camera = currCameraMatrix;
}
YOUR MAIN CODE
Jut want to move this to a new tag
單純要分割CODE
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();
}
…………………………
打開檔案試著加入這些按鈕
PhotoForm
