Processing

1. Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr

2. INDEX • Base structure • Mouse & Keyboard • Do it : Simple example • Homework

3. Homework solution

4. Lecture plan

5. Base structure

6. Base structure • setup() • Runs first one time • Initialize the options • size() function should always at the first line • Processing will not be able to do anything before the window size if specified • draw() • draw() loops continuously until you close the sketch window • draw the figures every frame

7. Base structure • size(200, 200); • ellipseMode(CENTER); • rectMode(CENTER); • stroke(0); • fill(150); • rect(100, 100, 20, 100); • fill(255); • ellipse(100, 70, 60, 60); • fill(0); • ellipse(81, 70, 16, 32); • ellipse(119, 70, 16, 32); • stroke(0); • line(90, 150, 80, 160); • line(110, 150, 120, 160); setup(){ size(200, 200); } draw(){ ellipseMode(CENTER); rectMode(CENTER); stroke(0); fill(150); rect(100, 100, 20, 100); fill(255); ellipse(100, 70, 60, 60); fill(0); ellipse(81, 70, 16, 32); ellipse(119, 70, 16, 32); stroke(0); line(90, 150, 80, 160); line(110, 150, 120, 160); } Setup Block Draw

8. Mouse & Keyboard

9. Mouse & Keyboard • If, else if, else • Select the condition • if(condition1){process1) • else if(condition){process2} • else{process3) Initialize Condition 1 Yes Process 1 No Condition 2 Yes Process 2 No Yes Process 3 Quit

10. Mouse & Keyboard • Mouse event • Mouse point’s position • mouseX, mouseY • Mouse click • mousePressed == true or false • Mouse button • mouseButton == LEFT or RIGHT • Mouse clicked • mouseClicked() • Mouse moved • mouseMoved() • Mouse over • mouseOver() & mouseOut()

11. Mouse & Keyboard • Sample code void setup(){ size(200, 200); } void draw(){ stroke(0); fill(175); rectMode(CENTER); rect(mouseX, mouseY, 100, 100); }

12. Mouse & Keyboard • Keyboard event • Key code • keyCode== BACKSPACE, DOWN, UP, etc… • key == ‘b’ • Key pressed • Call function or use variable • keyPressed() • keyPressed == true or false • Key typed • Push same key, then call this function • keyTyped() • Key released • Call function • keyReleased()

13. Mouse & Keyboard • Keyboard event void draw() { } // Empty draw() needed to keep the program running void keyPressed() { println("pressed " + char(key) + " " + char(keyCode)); } void keyTyped() { println("typed " + char(key) + " " + char(keyCode)); } void keyReleased() { println("released " + char(key) + " " + char(keyCode)); }

14. Do it : Simple example

15. Do it: Simple example(Mouse) • Mouse event intscrWidth = 400, scrHeight = 400; void setup(){ size(scrWidth, scrHeight); } void draw(){ background(0); rectMode(CENTER); if(mousePressed== true && mouseButton == LEFT){ fill(255, 255, 0); } else{ fill(128, 128, 128); } rect(mouseX, mouseY, 100, 100); }

16. Do it: Simple example(Keyboard) • Keyboard event intscrWidth = 400, scrHeight = 400; intkeyPosX = scrWidth/2, keyPosY =scrHeight/2; void setup(){ size(scrWidth, scrHeight); } void draw(){ background(0); rectMode(CENTER); fill(255); rect(keyPosX, keyPosY, 100, 100); } void keyPressed(){ if(keyCode == LEFT){ if(keyPosX-10 > 0 )keyPosX -= 10; } if(keyCode == UP){ if(keyPosY-10 > 0 )keyPosY -= 10; } if(keyCode == RIGHT){ if(keyPosX+10 < scrWidth )keyPosX += 10; } if(keyCode == DOWN){ if(keyPosY+10 < scrHeight )keyPosY += 10; } }

17. Homework

18. Homework Input : Keyboard Left & Right button Right : Red->Orange->…->Purple->Red Left : Opposite color

19. Homework Input : Mouse left button Click region = white rectangle

20. Homework Input : Mouse X position Left side = black(0); Right side = white(255); Use “float” variable Normalize = (Mouse X position/400)*255;

21. Q& A