User Tools

Site Tools


courses:2010.11.12.intro_prototyping

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
courses:2010.11.12.intro_prototyping [2010/11/19 04:12]
130.239.149.180
courses:2010.11.12.intro_prototyping [2010/12/12 17:51] (current)
camille
Line 1: Line 1:
 +====== 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//
 +  ​
 +<code java>
 +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);​
 +}
 +</​code>​
 +
 +== Keystroke and drawing text ==
 +
 +  * //key// vs //keyCode//
 +  * //​keyPressed()//​ and //​keyReleased()//​
 +  * check the Processing reference for [[http://​processing.org/​reference/​PFont.html|PFont]],​ the font object for drawing/​displaying text
 +  * load font using [[http://​processing.org/​reference/​loadFont_.html|loadFont()]] or [[http://​processing.org/​reference/​createFont_.html|createFont()]]
 +  * set for use with [[http://​processing.org/​reference/​textFont_.html|textFont()]] ​
 +  * draw with [[http://​processing.org/​reference/​text_.html|text()]]
 +
 +
 +<code java>
 +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());​
 +  ​
 +}
 +</​code>​
 +
 +
 +== 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 [[http://​processing.org/​reference/​PImage.html|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:​linus_3.zip| Linus 3 typers}}
courses/2010.11.12.intro_prototyping.txt · Last modified: 2010/12/12 17:51 by camille