Interactivity and GUI in Processing Content User input

Interactivity and GUI in Processing

Content • User input in Processing • Mouse • Keyboard • control. P 5, a GUI library • Bang • Button • Toggle • Radio buttons • Numberbox • Slider • Knob • Textfield • Textlabel / Departement of Industrial Design 25 -5 -2010 PAGE 1

User input in Processing Mouse • System variables: mouse. X and mouse. Y • contain the current coordinate of the mouse. • Load example: Mousemouse. Xmouse. Y: void draw(){ background(128); line(0, 0, mouse. X, mouse. Y); } / Departement of Industrial Design 25 -5 -2010 PAGE 3

User input in Processing Mouse • System variables: pmouse. X and pmouse. Y • contain the coordinate of the mouse in the frame previous to the current one. • Load example: Mousepmouse. Xpmouse. Y: void draw(){ background(204); line(mouse. X, 20, pmouse. X, 80); } / Departement of Industrial Design 25 -5 -2010 PAGE 4

User input in Processing Mouse • System variable: mouse. Pressed • true if a mouse button is pressed; false if a button is not pressed • Load example: Mousemouse. Pressed. Variable : void draw() { background(204); if (mouse. Pressed == true) { fill(0); } else { fill(255); } rect(mouse. X-10, mouse. Y-10, 20); } / Departement of Industrial Design 25 -5 -2010 PAGE 5

User input in Processing Mouse • System variable: mouse. Button • either LEFT, RIGHT, or CENTER depending on which button is pressed. • Load example: Mousemouse. Button : void draw() { background(204); if (mouse. Pressed == true && mouse. Button == LEFT) { fill(0, 255, 0); } else if (mouse. Pressed == true && mouse. Button == RIGHT) { fill(255, 0, 0); } else { fill(255, 255); } rect(mouse. X-10, mouse. Y-10, 20); } / Departement of Industrial Design 25 -5 -2010 PAGE 6

User input in Processing Mouse • Event: mouse. Pressed() • called once after every time a mouse button is pressed. • Load example: Mousemouse. Pressed. Event : void draw() { background(204); rect(mouse. X-10, mouse. Y-10, 20); } void mouse. Pressed(){ if (mouse. Button == LEFT) { fill(0, 255, 0); } else if (mouse. Button == RIGHT) { fill(255, 0, 0); } else { fill(255, 255); } } / Departement of Industrial Design Should have the same behavior as previous one. Something is different. 25 -5 -2010 PAGE 7

User input in Processing Mouse • Event: mouse. Released() • called every time a mouse button is released. • Load example: Mousemouse. Released : void draw() { background(204); rect(mouse. X-10, mouse. Y-10, 20); } void mouse. Pressed(){ if (mouse. Button == LEFT) { fill(0, 255, 0); } else if (mouse. Button == RIGHT) { fill(255, 0, 0); } } / Departement of Industrial Design void mouse. Released(){ fill(255, 255); } 25 -5 -2010 PAGE 8

User input in Processing Mouse • Event: mouse. Moved • called every time the mouse moves and a mouse button is not pressed. • Load example: Mousemouse. Moved : int value = 0; void draw() { fill(value); rect(25, 50, 50); } void mouse. Moved() { value = value + 5; if (value > 255) { value = 0; } } / Departement of Industrial Design 25 -5 -2010 PAGE 9

User input in Processing Mouse • Event: mouse. Dragged • called once every time the mouse moves and a mouse button is pressed. • Load example: Mousemouse. Dragged : int value = 0; void draw() { fill(value); rect(25, 50, 50); } void mouse. Dragged() { value = value + 5; if (value > 255) { value = 0; } } / Departement of Industrial Design 25 -5 -2010 PAGE 10

User input in Processing Keyboard System Variables key. Code: if(Key == CODED) key. Pressed „A‟, „B‟, …‟Z‟, „a‟, ‟b‟, …‟z‟, „ 0‟, ‟ 1‟, …‟ 9‟, „`‟, ‟~‟, ‟!‟, ‟@…‟ ‟? ‟ etc. BACKSPACE, TAB, ENTER, RETURN, ESC, DELETE, UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT. true false Events key. Pressed() key. Released() / Departement of Industrial Design 25 -5 -2010 PAGE 11

User input in Processing Keyboard • Load example: Keyboardkey. Pressed. Variable void draw() { if(key. Pressed) { if (key == 'b' || key == 'B') { fill(0); } } else { fill(255); } rect(25, 50, 50); } / Departement of Industrial Design 25 -5 -2010 PAGE 12

User input in Processing Keyboard • Load example: Keyboardkey. Pressed. Event int fill. Val = 126; void draw() { fill(fill. Val); rect(25, 50, 50); } void key. Pressed() { if (key == CODED) { if (key. Code == UP) { fill. Val = fill. Val<255 ? fill. Val+5 : 255; } else if (key. Code == DOWN) { fill. Val = fill. Val>0 ? fill. Val-5 : 0; } } else { fill. Val = 126; } } / Departement of Industrial Design 25 -5 -2010 PAGE 13

GUI in Processing Libraries • See http: //processing. org/reference/libraries/index. html#interface − control. P 5 : “highly recommended”. − Interfascia: Not really completed. − My. GUI: Poor documentation − Spring. GUI: Based on Java AWT. Problems in the “stage”. / Departement of Industrial Design 25 -5 -2010 PAGE 14

GUI in Processing Libraries • See http: //processing. org/reference/libraries/index. html#interface − control. P 5 : “highly recommended”. − Interfascia: Not really completed. − My. GUI: Poor documentation − Spring. GUI: Based on Java AWT. Problems in the “stage”. / Departement of Industrial Design 25 -5 -2010 PAGE 15

control. P 5 Framework //first import the control. P 5 library import control. P 5. *; //Define an Control. P 5 variable. Control. P 5 control. P 5; name. Of. The. Compoent: • identifies the component, • is the default label • defines the name of the callback function void setup() { //create a top level control manager control. P 5 = new Control. P 5(this); //add GUI components to the manager control. P 5. add<Component>(" name. Of. The. Component", param 1, param 2, . . . paramn); //and if necessary, change the default properties of the component control. P 5. controller("nameof. The. Component"). set. Label("This is the new label"); } void draw() { //draw as usual } // callback when an action is performed with the component "name. Of. The. Component“ void name. Of. The. Component([<Type> <value>]) { //do something. . . } / Departement of Industrial Design 25 -5 -2010 PAGE 16

control. P 5 Bang • add. Bang(the. Name, the. X, the. Y, the. Width, the. Height); • Load example: control. P 5first. Bang import control. P 5. *; Control. P 5 control. P 5; float x=200, y = 200; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Bang("first. Bang", 10, 40, 20 ); } void draw() { background(0); fill(255); ellipse(x, y, 40); } void first. Bang() { x=random(400); y=random(400); } / Departement of Industrial Design 25 -5 -2010 PAGE 17

control. P 5 Bang • Load example: control. P 5second. Bang import control. P 5. *; Control. P 5 control. P 5; color c = color(0, 0, 0); void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Bang("first. Bang", 10, 40, 20 ); control. P 5. add. Bang("second. Bang", 10, 60, 40, 20 ); control. P 5. controller("first. Bang"). set. Label("Red"); control. P 5. controller("second. Bang"). set. Label("Blue"); } void draw() { background(c); } void first. Bang() { c = color(255, 0, 0); } void second. Bang() { c = color(0, 0, 255); } / Departement of Industrial Design 25 -5 -2010 PAGE 18

control. P 5 Button • add. Button(the. Name, the. Value, the. X, the. Y, the. W, the. H); • Load example: control. P 5button import control. P 5. *; Control. P 5 control. P 5; int c = 128; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Button("black", 0, 10, 40, 20 ); control. P 5. add. Button("grey", 128, 10, 50, 40, 20); control. P 5. add. Button("white", 255, 10, 90, 40, 20 ); } void draw() { background(c); } void black(float value) { c = (int)value; } void grey(float value) { c = (int)value; } void white(float value){ c = (int)value; } / Departement of Industrial Design 25 -5 -2010 PAGE 21

control. P 5 Toggle • add. Toggle(the. Name, the. Default. Value, the. X, the. Y, the. Width, the. Height); • Load example: control. P 5toggle import control. P 5. *; Control. P 5 control. P 5; int c = 0; boolean is. Round = false; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Toggle("on", false, 10, 10 ); control. P 5. add. Toggle("round", false, 50, 10, 10 ); } void draw() { background(204); fill(c); if(is. Round) ellipse(200, 200); else rect(100, 200, 200); } / Departement of Industrial Design void on(boolean value) { if(value) c = 255; else c = 0; } void round(boolean value) { is. Round = value; } 25 -5 -2010 PAGE 22

control. P 5 Radio buttons • add. Radio(the. Name, the. X, the. Y); • Load example: control. P 5radio import control. P 5. *; Control. P 5 control. P 5; color c = color(255, 0, 0); void setup() { size(400, 400); control. P 5 = new Control. P 5(this); Radio r = control. P 5. add. Radio("myradio", 10); r. add. Item("red", 0); r. add. Item("green", 1); r. add. Item("blue", 2); } void draw() { fill(c); rect(100, 200, 200); } void myradio(int value) { switch(value){ case 0: c = color(255, 0, 0); break; case 1: c = color(0, 255, 0); break; case 2: c = color(0, 0, 255); break; } } / Departement of Industrial Design 25 -5 -2010 PAGE 23

control. P 5 Numberbox • add. Numberbox(the. Name, the. Default. Value, the. X, the. Y, the. Width, the. Height); • Load example: control. P 5numberbox import control. P 5. *; Control. P 5 control. P 5; int c = 128; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Numberbox("wierdbox", 128, 10, 80, 15); } void draw() { fill(c); rect(100, 200, 200); } void wierdbox(int value) { if(value>255) c = 255; else if(value<0) c = 0; else c = value; } / Departement of Industrial Design 25 -5 -2010 PAGE 24

control. P 5 Slider • add. Slider(the. Name, the. Min, the. Max, the. Default. Value, the. X, the. Y, the. W, the. H); • Load example: control. P 5slider import control. P 5. *; Control. P 5 control. P 5; int c = 128; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Slider("mygod", 0, 255, 128, 10, 200, 15); } void draw() { fill(c); rect(100, 200, 200); } void mygod(int value) { c = value; } / Departement of Industrial Design 25 -5 -2010 PAGE 25

control. P 5 Knob • add. Knob(the. Name, the. Min, the. Max, the. Default. Value, the. X, the. Y, the. Diameter); • Load example: control. P 5knob import control. P 5. *; Control. P 5 control. P 5; int c = 128; void setup() { size(400, 400); smooth(); control. P 5 = new Control. P 5(this); control. P 5. add. Knob("whoknows", 0, 255, 128, 175, 50); } void draw() { fill(c); rect(100, 200, 200); } void whoknows(int value) { c = value; } / Departement of Industrial Design 25 -5 -2010 PAGE 27

control. P 5 Textfield • add. Textfield(the. Name, the. X, the. Y, the. W, the. H); • Load example: control. P 5textfield import control. P 5. *; Control. P 5 control. P 5; int c = 128; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Textfield("eindhoven", 10, 200, 20); } void draw() { fill(c); rect(100, 200, 200); } void eindhoven(String value) { println(value); c = int(value); } / Departement of Industrial Design 25 -5 -2010 PAGE 28

control. P 5 Textlabel • add. Textlabel(the. Name, the. Text, the. X, the. Y); • Load example: control. P 5textlabel import control. P 5. *; Control. P 5 control. P 5; int c = 128; Textlabel; void setup() { size(400, 400); control. P 5 = new Control. P 5(this); control. P 5. add. Textfield("eindhoven", 10, 200, 20); label = control. P 5. add. Textlabel("delft", "Now, type something, or try a number", 10, } 60); void draw() { background(64); fill(c); rect(100, 200, 200); } void eindhoven(String value) { label. set. Value(value); c = int(value); } / Departement of Industrial Design 25 -5 -2010 PAGE 29