Processing
Download
1 / 21

Processing - PowerPoint PPT Presentation


  • 128 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

Processing

Lecture.2

Mouse and Keyboard

[email protected]


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


Q&

A


ad