Processing

1 / 21

# Processing - PowerPoint PPT Presentation

Processing. Lecture.2 Mouse and Keyboard lbg@dongseo.ac.kr. INDEX Base structure Mouse &amp; Keyboard Do it : Simple example Homework. Homework solution. Lecture plan. Base structure. Base structure. setup() Runs first one time Initialize the options

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about 'Processing' - kay

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Processing

Lecture.2

Mouse and Keyboard

lbg@dongseo.ac.kr

INDEX

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

Homework

solution

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

Block

Draw

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

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 code

void 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 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);

}

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

}

Homework

Input : Keyboard Left & Right button

Right : Red->Orange->…->Purple->Red

Left : Opposite color

Homework

Input : Mouse left button

Click region = white rectangle

Homework

Input : Mouse X position

Left side = black(0);

Right side = white(255);

Use “float” variable

Normalize = (Mouse X position/400)*255;