User Tools

Site Tools


courses:intro.prototyping.fall.2011.nov03

Differences

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

Link to this comparison view

courses:intro.prototyping.fall.2011.nov03 [2011/11/03 00:42]
130.239.148.123 created
courses:intro.prototyping.fall.2011.nov03 [2011/11/03 05:16] (current)
130.239.152.22
Line 1: Line 1:
 +==== Strings/​text in Processing ====
  
 +Strings are objects used for dealing with text. Objects are like variables that not just holds information but also contains functions to deal with that information. We have already used this for example with Audioplayer that had the functions Audioplayer.play(),​ Audioplayer.pause() and Audioplayer.rewind().
 +
 +Some information on what functions are available with strings can be found [[http://​www.processing.org/​reference/​String.html|here]]. ​
 +A lengthier explanation on what you can do with Strings and text are found in the
 +[[http://​processing.org/​learning/​text/​|reference]].
 +
 +==An example of using Strings while developing a program==
 +<code java>
 +String someText;
 +
 +void setup()
 +{
 +  size(640,​480);​
 +  background(94,​96,​111);​
 +  someText = "​mouseX = ";
 +}
 +
 +void draw()
 +{
 +  ​
 +  background(94,​96,​111);​
 +  println(someText+mouseX);​
 +  delay(250);
 +}
 +
 +</​code>​
 +
 +But of course we also want to be able to play with text at the actual canvas. And FONTS!
 +Drawing text in Processing is done with the function text() . The reference info on how text() works is found [[http://​www.processing.org/​reference/​text_.html|here]]
 +
 +==Extending the debug example using a font and drawing on the canvas we get this==
 +
 +<code java>
 +String someText;
 +PFont someKindOfFont;​
 +
 +void setup()
 +{
 +  size(640,​480);​
 +  background(94,​96,​111);​
 +  someText = "​mouseX = ";
 +  someKindOfFont = loadFont("​Nyctophobia-30.vlw"​);​
 +}
 +
 +void draw()
 +{
 +  background(94,​96,​111);​
 +  println(someText+mouseX);​
 +  textFont(someKindOfFont,​48);​
 +  text(someText+mouseX,​ 200, 200);   
 +}
 +</​code> ​
 +
 +==Here'​s the typewriter example==
 +Note that adding "​\r\n"​ to a string means adding carriage return and line feed. When I'm checking for "​\b"​ I'm checking for backspace. Notice that the actual actions in void draw is very simple, I'm just drawing the content of the String variable. Any change to the text is done when keys are pressed by adding or subtracting to/from the variable.
 +<code java>
 +String interactiveText = "";​
 +PFont someKindOfFont;​
 +int charInRow = 0; //for keeping track of characters for a row
 +
 +void setup()
 +{
 +  size(640,​480);​
 +  background(94,​96,​111);​
 +  someKindOfFont = loadFont("​Nyctophobia-30.vlw"​);​
 +}
 +
 +void draw()
 +{
 +  ​
 +  background(94,​96,​111);​
 +  textFont(someKindOfFont,​48);​
 +  text(interactiveText,​ 10, 50); 
 +
 +}
 +
 +void keyPressed() //runs whenever a key is pressed
 +{
 +  if(key == '​\b'​) //if the key pressed turns out to be backspace... ​
 +  {
 +     //​remove the last character and subtract one from the counter variable
 +     ​interactiveText = interactiveText.substring(0,​interactiveText.length()-2); ​
 +     ​charInRow = charInRow - 1;
 +  }
 +  ​
 +  if(charInRow > 22) //if we've written 22 characters in a row
 +  {
 +    //add carriage return and linefeed, and reset the counter to 0
 +    interactiveText = interactiveText + "​\r\n"​ + key;
 +    charInRow = 0;
 +  }
 +  else //any other case when a key has been pressed
 +  {
 +    //add the new character to the String variable and thereby the drawn text, increase counter
 +    interactiveText = interactiveText + key;
 +    charInRow = charInRow + 1;
 +  }
 +}
 +
 +</​code>​
 +
 +==Psychedelic jumble example== ​
 +We make use of mouseX and mouseY to influence backgroundcolor,​ and also draw certain text only when the mousepointer is beyond certain values.
 +<code java>
 +String someText;
 +PFont someKindOfFont;​
 +void setup()
 +{
 +  size(640,​480);​
 +  someText = "​mouseX = ";
 +  someKindOfFont = loadFont("​Nyctophobia-30.vlw"​);​
 +  ​
 +}
 +
 +void draw()
 +{
 +  ​
 +  background(94,​mouseX/​2,​mouseY);​
 +  textFont(someKindOfFont,​48);​
 +  text(someText+mouseX,​ 200, 200);   
 +  text("​mouseY = "​+mouseY,​ 200, 300);
 +  if(mouseY < 10)
 +  {
 +    text("​Woah!",​200,​400);​
 +  }
 +  if(mouseY > 450)
 +  {
 +    text("​Dude!",​200,​400);​
 +  }
 +  if(mouseX < 10)
 +  {
 +     ​text("​Awesome!",​200,​400);​
 +  }
 +  if(mouseX > 600)
 +  {
 +    text("​Code five!",​200,​400);​
 +  }
 +
 +}
 +</​code>​
courses/intro.prototyping.fall.2011.nov03.txt · Last modified: 2011/11/03 05:16 by 130.239.152.22