Processing
06 Simple UI (User Interface) 使用者介面
First We have to download anther library “ControlP5” 首先 我們要下載 “ControlP5”
http://processing.org/reference/libraries/
http://www.sojamo.de/libraries/controlP5/
FOR
Whate verUser 不管你是誰
Unzip it And put it into your Processing Libraries folder 解壓縮放到Library Folder中 (不清楚請看005)
Very Simple Circle float circleSize = 200; void setup(){ size(800,800); smooth(); } void draw(){ background(0); ellipse(width/2,height/2,circleSize,circleSize); }
自己取名 import controlP5.*;
Name it yourself!!!
ControlP5 gcontrol; float circleSize = 50; void setup(){ size(800,800); smooth(); gcontrol = new ControlP5(this); gcontrol.addSlider("circleSize",0,800,10,10,200,20); } void draw(){ background(0); noStroke(); ellipse(width/2,height/2,circleSize,circleSize); }
gcontrol.Addslider(“name”, min, max, locX,locY,width,height);
自己取名 import controlP5.*;
Name it yourself!!!
ControlP5 gcontrol; float circleSize = 50; void setup(){ size(800,800); smooth(); gcontrol = new ControlP5(this); gcontrol.addSlider("circleSize",0,800,10,10,200,20); } void draw(){ background(0); noStroke(); ellipse(width/2,height/2,circleSize,circleSize); }
import controlP5.*; ControlP5 gcontrol; float circleSize = 50; float circleColorR = 50; float circleColorG = 50; float circleColorB = 50;
void setup(){ size(800,800); smooth(); gcontrol = new ControlP5(this); gcontrol.addSlider("circleSize",0,800,10,10,200,20); gcontrol.addSlider("circleColorR",0,255,10,40,200,20); gcontrol.addSlider("circleColorG",0,255,10,70,200,20); gcontrol.addSlider("circleColorB",0,255,10,100,200,20); } void draw(){ background(0); noStroke(); fill(circleColorR, circleColorG, circleColorB); ellipse(width/2,height/2,circleSize,circleSize); }
Try 3D 試試看3D
這些部分是為了避免 peasyCam跟ControlP5的衝突 void draw() { import peasy.*; import controlP5.*;
if (controlP5.isMouseOver()) { cam.setActive(false); } else { cam.setActive(true); }
PeasyCam cam; ControlP5 controlP5; PMatrix3D currCameraMatrix; PGraphics3D g3;
background(255); fill(255,255,0); stroke(0); box(boxSize);
float boxSize = 100; void setup() { size(800,800,P3D); g3 = (PGraphics3D)g; cam = new PeasyCam(this, 800); controlP5 = new ControlP5(this); controlP5.addSlider("boxSize",0,500,10,10,200,20); controlP5.setAutoDraw(false);
}
Add your Slider here
avoid interruption between peasyCam & controlP5
Put your Main code here
gui(); } void gui() { currCameraMatrix = new PMatrix3D(g3.camera); camera(); controlP5.draw(); g3.camera = currCameraMatrix; }
avoid interruption between peasyCam & controlP5 import peasy.*; import controlP5.*;
void draw() {
int c1 = 2; int c2 = 4; int c3 = 3;
if (controlP5.isMouseOver()) { cam.setActive(false); } else { cam.setActive(true); }
PeasyCam cam; ControlP5 controlP5; PMatrix3D currCameraMatrix; PGraphics3D g3;
background(0); fill(255,80,255); stroke(0);
void setup() { size(800,800,P3D); g3 = (PGraphics3D)g; cam = new PeasyCam(this, 800); controlP5 = new ControlP5(this); controlP5.addSlider("c1",0,10,10,10,200,20); controlP5.addSlider("c2",0,10,10,40,200,20); controlP5.addSlider("c3",0,10,10,70,200,20); controlP5.setAutoDraw(false); }
Add your Slider here
把你的CODE放這 Put your code here
for(float i=0; i<360; i+=1){ pushMatrix(); translate(200*cos(c1*i*PI/180), 200*sin(c2*i*PI/180), 200*sin(c3*i*PI/180)); box(i/10); popMatrix(); } gui(); } void gui() { currCameraMatrix = new PMatrix3D(g3.camera); camera(); controlP5.draw(); g3.camera = currCameraMatrix; }
Try to put these slider into the CODE we did before 試著放入先前練習 的CODE中
avoid interruption between peasyCam & controlP5 import peasy.*; import controlP5.*;
void draw() {
int c1 = 2; int c2 = 4; int c3 = 3;
if (controlP5.isMouseOver()) { cam.setActive(false); } else { cam.setActive(true); }
PeasyCam cam; ControlP5 controlP5; PMatrix3D currCameraMatrix; PGraphics3D g3;
background(0); fill(255,80,255); stroke(0);
void setup() { size(800,800,P3D); g3 = (PGraphics3D)g; cam = new PeasyCam(this, 800); controlP5 = new ControlP5(this); controlP5.addSlider("c1",0,10,10,10,200,20); controlP5.addSlider("c2",0,10,10,40,200,20); controlP5.addSlider("c3",0,10,10,70,200,20); controlP5.setAutoDraw(false); }
Add your Slider here
把你的CODE放這 Put your code here
for(float i=0; i<360; i+=1){ pushMatrix(); translate(200*cos(c1*i*PI/180), 200*sin(c2*i*PI/180), 200*sin(c3*i*PI/180)); box(i/10); popMatrix(); } gui(); } void gui() { currCameraMatrix = new PMatrix3D(g3.camera); camera(); controlP5.draw(); g3.camera = currCameraMatrix; }
You can also change the color of the GUI 你也可以改變GUI的顏色跟設定
avoid interruption between peasyCam & controlP5 import peasy.*; import controlP5.*;
void draw() {
int c1 = 2; int c2 = 4; int c3 = 3;
if (controlP5.isMouseOver()) { cam.setActive(false); } else { cam.setActive(true); }
PeasyCam cam; ControlP5 controlP5; PMatrix3D currCameraMatrix; PGraphics3D g3;
background(0); fill(255,80,255); stroke(0);
void setup() { size(800,800,P3D); g3 = (PGraphics3D)g; cam = new PeasyCam(this, 800); controlP5 = new ControlP5(this); controlP5.setColorForeground(0xffaa0000); controlP5.setColorBackground(0xff660000); controlP5.setColorLabel(0xffdddddd); controlP5.setColorValue(0xffff88ff); controlP5.setColorActive(0xffff0000);
Set Color Here controlP5.addSlider("c1",0,10,10,10,200,20); controlP5.addSlider("c2",0,10,10,40,200,20); controlP5.addSlider("c3",0,10,10,70,200,20); controlP5.setAutoDraw(false); }
Put your code here
for(float i=0; i<360; i+=1){ pushMatrix(); translate(200*cos(c1*i*PI/180), 200*sin(c2*i*PI/180), 200*sin(c3*i*PI/180)); box(i/10); popMatrix(); } gui(); } void gui() { currCameraMatrix = new PMatrix3D(g3.camera); camera(); controlP5.draw(); g3.camera = currCameraMatrix; }