slide1
Download
Skip this Video
Download Presentation
Processing

Loading in 2 Seconds...

play fullscreen
1 / 21

Processing - PowerPoint PPT Presentation


  • 129 Views
  • Uploaded on

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

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

PowerPoint Slideshow about ' Processing' - kay


An Image/Link below is provided (as is) to download presentation

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
slide1

Processing

Lecture.2

Mouse and Keyboard

[email protected]

slide2

INDEX

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

Homework

solution

slide6

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
slide7

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

slide9

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

slide10

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

Mouse & Keyboard

  • Sample code

void setup(){

size(200, 200);

}

void draw(){

stroke(0);

fill(175);

rectMode(CENTER);

rect(mouseX, mouseY, 100, 100);

}

slide12

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

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

}

slide14

Do it :

Simple example

slide15

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

}

slide16

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

}

slide18

Homework

Input : Keyboard Left & Right button

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

Left : Opposite color

slide19

Homework

Input : Mouse left button

Click region = white rectangle

slide20

Homework

Input : Mouse X position

Left side = black(0);

Right side = white(255);

Use “float” variable

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

ad