1 / 21

# Processing - PowerPoint PPT Presentation

Processing. Lecture.2 Mouse and Keyboard [email protected] INDEX Base structure Mouse & 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

Lecture.2

Mouse and Keyboard

[email protected]

• INDEX

• Base structure

• Mouse & Keyboard

• Do it : Simple example

• Homework

solution

• 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

• 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

• 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 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()

• Sample code

void setup(){

size(200, 200);

}

void draw(){

stroke(0);

fill(175);

rectMode(CENTER);

rect(mouseX, mouseY, 100, 100);

}

• 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()

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

}

Simple example

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

}

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

}

Input : Keyboard Left & Right button

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

Left : Opposite color

Input : Mouse left button

Click region = white rectangle

Input : Mouse X position

Left side = black(0);

Right side = white(255);

Use “float” variable

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

Q&

A