Programming for Visual Artists

Your browser does not support the canvas tag.

Week 9
Do we want to learn how to use a joystick? If so, bring your USB joystick to class next week.

cypher presentation

Creating different events
    int phase = 1; 
    int timer; 
    int timeout = 1000; 
    int locX = 0; 
    PFont font; 

    void setup() {
      size(400, 400);
      timer = millis(); 
      font = createFont("helvetica", 20); 
      textFont(font);
  }
  void draw() {
    if (phase == 1) {
      doPhase1();
    }
    if (phase == 2) {
      doPhase2();
    }
    if (phase == 3) {
      doPhase3();
    }

    text("phase " + phase, 20, 40);
}



void doPhase1() {
  background(200, 100, 100); 
  if (millis() - timer > timeout) {
    phase = 2;
  }
}

void doPhase2() {
  background(200); 
  if (mousePressed) {
    phase = 3;
  }
}

void doPhase3() {
  background(100, 200, 100);
  locX += 10; 
  ellipse(locX, height/2, 20, 20); 
  if (locX > width) {
    timer = millis(); 
    phase = 1;
    locX = 0;
  }
}
Case Statements
A Case (or sometimes called a switch) statement is an easier to read way of writing a big long if statement. If you have more than three "ifs", then you might as well write a case.
Notice the use of "break" - this breaks out of the statement. It also works for breaking out of a for loop. Very useful.

  void setup() {
    size(400, 400);
}
void draw() {
}

void keyReleased() {
  char letter = key;
  
  switch(letter) {
  case 'a': 
    println("Alpha");  
    break;
  case 'b': 
    println("Bravo");  
    break;
  default: // if no other  conditions are met
    println("Zulu");  
    break;
  }
}

Strings & Chars


entirely not this kind of string

A String (notice the capital "S") is another variable type that holds type.
String theText = "joe is good";
would put "joe is good" into the variable theText.


PFont font; 
String theText; 

void setup(){ 
  size(400, 200); 
  theText = "cheese is good"; 
  font = createFont("Helvetica", 24);
  textFont(font);
}

void draw(){
  background(200); 
  text(theText, 20, 90); 
}
A char is a single character, and you can think of a String as an array of chars. You use the term charAt() to get a char from a string. The line
char letter = theText.charAt(2);
in the code above this line would set the variable letter to "e" (don't forget arrays start at 0!)

You can add to a string with the + symbol, but you cannot compare strings with the = sign, you have to use "equals"

PFont font; 
String theText, theText2; 

void setup() { 
  size(400, 200); 
  theText = "cheese is good"; 
  theText2 = "cheese is real good"; 
  font = createFont("Helvetica", 24);
  textFont(font);
}

void draw() {
  background(200); 
  if (theText.equals(theText2) == true) {
    println("it's the same yo!");
  }
  else {
    println("Not the same, fool!");
  }
}
Strings can also go into arrays.
PFont font; 
String [] textList = new String [5]; 
int wordNum = 0; 
int wordX = 800; 
void setup() { 
  size(800, 100); 
  textList [0] = "stuff"; 
  textList [1] = "things"; 
  textList [2] = "objects"; 
  textList [3] = "junk"; 
  textList [4] = "detritus"; 

  font = createFont("Helvetica", 24);
  textFont(font);
}
void draw() {
  background(0); 
  wordX -= 10; 
  if (wordX < -20) {
    wordX = width + 20;
    wordNum++; 
    fill(random(255), random(255), random(255));
  }
  if (wordNum == 5) {
    wordNum = 0;
  }
  text(textList[wordNum], wordX, height/2);
}

Text input
This sketch has a string called phrase that is catching keystrokes. Notice in this code we actualy set the phrase to "" which is an empty string. For some reason it won't work if we query a string that has nothing in it.
PFont font; 
String [] textList = new String [5]; 
String phrase = ""; 
int wordNum = 0; 
int wordX = 800; 
boolean checkPhrase; 

void setup() { 
  size(500, 200); 
  textList [0] = "stuff"; 
  textList [1] = "things"; 
  textList [2] = "objects"; 
  textList [3] = "junk"; 
  textList [4] = "detritus"; 

  font = createFont("Helvetica", 24);
  textFont(font);
}
void draw() {
  background(0); 
  fill(255); 
  text("what is in the drawer?", 30, 30); 
  text(phrase, 30, 60); 
  checkPhrase = false; 
  for (int i = 0; i < textList.length; i++) {
    if (phrase.equals(textList[i]) == true) {
      checkPhrase = true;
    }
  }
  if (checkPhrase == true) {
    text("you're right!", 200, 140);
  }
  else {
    text("you're not even close!", 200, 140);
  }
}

void keyReleased() {
  phrase += key;
}
Key Codes

When you grab the 'key' in keyPressed it treat the key as if it is a char, but if you cask for the KeyCode it igve you the ASCII number for the key you pressed as an int.


void keyPressed() {
  println(keyCode);
}
This is how you can grab the return and delete keys.
You can also grab the arrow keys with just if (keyCode == RIGHT){

So how do we use the delete key to delete the last letter in the string? Start by printing out the keyCode in the keyReleased area to find out that it is the number 8 SPOILERS! D'oh!
You'd think that deleting the string by one character would be easy, but it's not. Here's how you do it.

void keyPressed() {
  if (keyCode == 8 && textInput.length() > 0) {
    textInput = textInput.substring(0, (textInput.length() -1));
  }
  else {
    textInput += key;
  }
}
The first line says: "if the keyCode for the delete key is pressed and the String isn't at 0 already, then ..."
The second line says: "take your string and make another string that happens to be one character shorter than the current string, oh and name the new string the same thing as the old string."

Importing Text Files

For this sketch to work you will need to create a text file in textEdit and put it into your sketch folder, inside a data folder.

When you import text files you import them into an array of Strings with each line of text as a new entry in the array.


String [] textIn; 
void setup(){
  size(200, 200);
  textIn = loadStrings("textFile.txt");
}

void draw(){
  background(0); 
  fill(200); 
  text(textIn [0], 20, 100); 
}
This sketch would allow someone who has no programming ability at all write content for your program.
String [] textIn;
String phrase; 
int phraseNum; 
int fade = 255; 
PFont font; 
void setup() {
  size(800, 160);
  textIn = loadStrings("textFile.txt");
  font = createFont("Handwriting-Dakota", 60); 
  textFont(font); 
  phrase = textIn[0];
  textAlign(CENTER);
}
void draw() {
  fade -= 2; 
  if (fade <= 0) {
    fade = 255; 
    phraseNum ++; 
    if (phraseNum == textIn.length) {
      phraseNum = 0;
    }
  }
  phrase = textIn[phraseNum];
  background(0); 
  fill(200, fade); 
  if (phraseNum == textIn.length-1) {
    fill(255, 100, 20, fade);
  }
  else {
    fill(200, fade);
  }
  text(phrase, width/2, 100);
}
Exporting files is much the same. In this code pressing return saves the file. Notice that we are not loading or saving in the draw - this keeps us from CONSTANTLY loading or saving the file.
This code also checks to see if the file loading works, and instantly save a sample file if there's nothing there already.

String [] textIn;
String [] test = new String [1]; 
String phrase; 

void setup() {
  size(200, 200);
  test [0] = "joe is good"; 
  textIn = loadStrings("textFile.txt");
  if (textIn == null) { 
    saveStrings("textFile.txt", test);
  }
  phrase = textIn[0];
}
void draw() {
  background(0); 
  fill(200); 
  text(phrase, 20, 100);
}
void keyReleased() {
  if (keyCode == 8 && phrase.length() > 0) {
    phrase = phrase.substring(0, (phrase.length() -1));
  }
  else if (keyCode == 10 && phrase.length() > 0) {
    textIn [0] = phrase; 
    saveStrings("textFile.txt", textIn);
  }
  else {
    phrase += key;
  }
}
Making a Simple Substitution Cipher

300px-ROT13

We can convert a char into its American Standard Code for Information Interchange (ASCII) number pretty easily with int(). Once the char is a number we can add a value to that number (today's secret number! shhh) then turn it back into a char again. Voila garbled messages. To turn it back simply turn each char into a number again and subtract the secret number this time.
Only tricky part is that when the numbers go too high or low they should loop around again or it won't be an real ascii number. The high and low are 33 and 122.
Create the Cipher! Press return and the .txt file will appear in the sketch folder.
PFont font; 
String theText, theCypher; 
int cipherNum = 20; 

void setup() { 
  size(400, 400); 
  theText = ""; 
  theCypher = ""; 
  font = createFont("Helvetica", 24);
  textFont(font);
  fill(1);
}

void draw() {
  background(200); 
  theCypher = ""; 
  for (int i = 0; i<theText.length(); i ++) { // go through every letter in our message
    char letter = theText.charAt(i); // put each letter into 'letter' variable
    int chNum = int(letter) + cipherNum; // turn the char into an int and add the cipher 
    if (chNum  > 122) { // if its too big loop it around 
      chNum  = chNum - 122 + 32;
    }
    theCypher += char(chNum); // add the new char to our string
  }
  text(theText, 20, 180);  // put the normal message on the screen
  text(theCypher, 20, 220); // put the scrambled messag on the screen
}

void keyPressed() {
  if (keyCode == 8 && theText.length() > 0) {
    theText = theText.substring(0, (theText.length() -1));
  }
  else {
    if (int (key) >= 32 && int (key) <= 122) { // to keep out bad characters
      theText += key;
    }
  }
  if (keyCode == 10) { // if the return is pressed
    String [] textSave = { 
      theCypher
    };  
    saveStrings("textFile.txt", textSave); // save a text file of the cipher
  }
}
Decode the Cipher. Drag the text file with the codded message into the sketch window and run the text.
PFont font; 
String theText, theReveseCipher; 
int cipherNum = 20; 
boolean  textToCipher = true; 
String [] textIn; 

void setup() { 
  size(400, 400); 
  theText = ""; 
  theReveseCipher = ""; 
  font = createFont("Helvetica", 24);
  textFont(font);
  fill(1);
  textIn = loadStrings("textFile.txt"); // import the text
  theText = textIn[0]; // put the first line into the string theText
}

void draw() {
  background(200); 
  theReveseCipher = ""; 
  for (int i = 0; i<theText.length(); i ++) { // go through each letter
    char letter2 = theText.charAt(i); // put each letter into 'letter' variable
    int chNum2 = int(letter2) - cipherNum; // turn the char into an int and add the cipher 
    if (chNum2  < 32) {// if its too small loop it around 
      chNum2  = 122 - (32 - chNum2);
    }
    theReveseCipher += char(chNum2); // add the new char to our string
  }
  text(theReveseCipher, 20, 260); // put the message on the screen
}
How could we make this more complex?

Lab Week 9
Write a haiku poem (5 7 5) link
Dynamically represent that poem on the screen.
Each line of the poem must be a separate line in an array.
You can also use images, animation, video, sound ...
has to be more that just the text.