User Tools

Site Tools


courses:2010.11.12.intro_prototyping

nov 12: Processing: mouse and keyboard inputs

Mouse input

  • mouseButton accessible directly in the draw function mousePressed or in its own function mousePressed()
  • mouseReleased(), mouseMoved() and mouseDragged() also available
  • mouse coordinates: mouseX and mouseY
  • mouse coordinates of the previous frame: pmouseX and pmouseY
int rectSize;  // variable to store size of the rectangle
 
void setup() {
  size(400, 400);
  frameRate(15);   
 
  rectMode(CENTER);
  noFill();
  strokeWeight(1);
 
  rectSize = 20;
}
 
void draw() {
 
  // background color
  if(mousePressed) {
    println("mousePressed called");
    background(255, 0, 0); // rea background
  }
  else {
    background(255);
  }
 
  // rectangle follows mouse cursor
  rect(mouseX, mouseY, rectSize, rectSize);
 
  // line between previous mouse pos and current one
  line(mouseX, mouseY, pmouseX, pmouseY);
}
 
 
void mousePressed() {
  println("mousePressed fucntion called");
 
  if(mouseButton == RIGHT){
    // increment rectSize until a limit
    rectSize = rectSize + 10;
    if(rectSize > 200) {
      rectSize = 20;
    }
 
  }
}
 
void mouseDragged(){
  println("mouseDragged fucntion called");
  strokeWeight(4);
}
 
void mouseReleased(){
  println("mouseReleased fucntion called");
  strokeWeight(1);
}
Keystroke and drawing text
  • key vs keyCode
  • keyPressed() and keyReleased()
  • check the Processing reference for PFont, the font object for drawing/displaying text
  • load font using loadFont() or createFont()
  • set for use with textFont()
  • draw with text()
PFont myFont; // font object to load/use fonts
String displayTxt = "";  // string variable to store text to be displayed
 
 
void setup() {
  size(400, 400);
  frameRate(25);   
 
  noFill();
  strokeWeight(1);
  smooth();
 
  // Uncomment the following two lines to see the available fonts 
  // String[] fontList = PFont.list();
  // println(fontList);
 
  myFont = createFont("Helvetica", 64);  // load the font at size 64
  textFont(myFont); // set the drawing font for text
}
 
void draw() {
  // background
  background(100);
 
  // display text data
  text(displayTxt, 20, 50, 360, 300);
}
 
 
void keyPressed() {
 
  //displayTxt = str(key); // show one letter
  displayTxt = displayTxt + key; // add to string
 
  // if backspace key, we delete the whole string
  if(key == 8){
    displayTxt = "";
  }
 
  // debug 
  print("pressed key " + key + ", ASCII " + int(key)); 
  println(", displayTxt " + displayTxt   + ", length: " + displayTxt.length());
 
}
Homework for next session, due November 19
  • Create a typewriter sketch that can display your first name
  • Challenge #1: make it mistake-proof, if you press the wrong keys, it doesn't add it to your display
  • Challenge #2: display images of letter instead of regular text (hint: use PImage)
  • Challenge #3: autosize text displayed to fit the full size of the sketch, no matter how many letters are displayed
Upload your typewriter(s) below
courses/2010.11.12.intro_prototyping.txt · Last modified: 2010/12/12 17:51 by camille