Processing=006=simple ui

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; }