Embed Size (px)
Citation preview
INDEX
• Base structure
• Mouse & Keyboard
• Do it : Simple example
• Homework
Homeworksolution
Lecture plan
• What is Processing + Simple drawing
• Mouse + Keyboard input event
• Loop and animation
• Processing + Kinect
• Flash + Kinect
Base structure
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
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
Mouse & Keyboard
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
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()
Mouse & Keyboard
• Sample codevoid setup(){ size(200, 200);}
void draw(){ stroke(0); fill(175); rectMode(CENTER); rect(mouseX, mouseY, 100, 100);}
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()
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));
}
Do it : Simple example
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);}
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; }}
Homework
Homework
Input : Keyboard Left & Right button
Right : Red->Orange->…->Purple->RedLeft : Opposite
color
Homework
Input : Mouse left button
Click region = white rectangle
Homework
Input : Mouse X positionLeft side = black(0);
Right side = white(255);
Normalize = (Mouse X position/400)*255;
Use “float” variable
Q&A
