![Page 2: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/2.jpg)
INDEX
• Base structure
• Mouse & Keyboard
• Do it : Simple example
• Homework
![Page 3: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/3.jpg)
Homeworksolution
![Page 4: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/4.jpg)
Lecture plan
• What is Processing + Simple drawing
• Mouse + Keyboard input event
• Loop and animation
• Processing + Kinect
• Flash + Kinect
![Page 5: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/5.jpg)
Base structure
![Page 6: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/6.jpg)
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
![Page 7: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/7.jpg)
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
Draw
Block
![Page 8: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/8.jpg)
Mouse & Keyboard
![Page 9: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/9.jpg)
Mouse & Keyboard
• If, else if, else– Select the condition
• if(condition1){process1)• else if(condition){process2}• else{process3)
Condition 1Yes
No
Condition 2
No
Initialize
Yes
Yes
Process 1
Process 2
Process 3
Quit
![Page 10: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/10.jpg)
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()
![Page 11: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/11.jpg)
Mouse & Keyboard
• Sample codevoid setup(){ size(200, 200);}
void draw(){ stroke(0); fill(175); rectMode(CENTER); rect(mouseX, mouseY, 100, 100);}
![Page 12: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/12.jpg)
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()
![Page 13: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/13.jpg)
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));
}
![Page 14: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/14.jpg)
Do it : Simple example
![Page 15: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/15.jpg)
Do it: Simple example(Mouse)
• Mouse eventint scrWidth = 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);}
![Page 16: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/16.jpg)
Do it: Simple example(Keyboard)
• Keyboard eventint scrWidth = 400, scrHeight = 400;int keyPosX = 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; }}
![Page 17: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/17.jpg)
Homework
![Page 18: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/18.jpg)
Homework
Input : Keyboard Left & Right button
Right : Red->Orange->…->Purple->RedLeft : Opposite
color
![Page 19: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/19.jpg)
Homework
Input : Mouse left button
Click region = white rectangle
![Page 20: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/20.jpg)
Homework
Input : Mouse X positionLeft side = black(0);
Right side = white(255);
Normalize = (Mouse X position/400)*255;
Use “float” variable
![Page 21: Processing Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr](https://reader031.vdocuments.net/reader031/viewer/2022032709/56649ebf5503460f94bca936/html5/thumbnails/21.jpg)
Q&A