Your browser does not support the canvas tag.

Week 3
I saw this on reddit's processing page - pretty trippy! trippy


so far you need to have:



How to problem solve EVERYTHING yourself!
If you are lucky enough to have an error that chrashes the program then look at the message and where it "breaks". You can click on the "error" tab at the bottom of the window and it will even show you if you have mulitple errors.


Sometime though you need to do a little detective work. In the image below I forgot to close the curly bracket after the for loop, but the program doesn't know where I intended to close it, so it says my problem is on line 18, when it's really on line 9.

Often the problem is not obvious, or it's not technically broken, it's just not doing what you want. Here's how to fix everything ever. If you try step 3 before you've done 1 and 2, you're not going to know the search terms. I often get students saying "I don't know how to make the ball come back, and I goggled 'how to make the ball come back' and got NOTHING!"
This is because you need to define your search terms better. Which means learning the lingo, which means reading.

If you try step 4 first, you're not going to have a very good time. Instead you're going to get a lot of people sending you to Google, if they are jerk, or just steer you into previously answered questions if they are nice.

You can jump right to step 5, but this is a great way to lose friends. However, if you ask your friend "I'm having a dickens of a problem which I can't seem to solve. I've read the book, and isolated the problem, and searched on-line, and asked about it in forums but it's still got me stumped" Then your friend is going to be much happier to help.



Functions (also called "routines")
As we saw from playing LightBot, sometimes creating your own functions can save you a lot of code. Here we create a function to draw a box.

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

void joeisgood() {
  rect( 20, 40, 100, 100);
}
The real power of functions come when you start passing paramaters to the function. In this case we pass integers that change the location of where the boxes are drawn.
void setup() {
  size(400, 400);
}
void draw() {  
  joeisgood(20, 40);
  joeisgood(60, 80);
}

void joeisgood(int x, int y) { // declare the variable that recieve the incoming values
  rect( x, y, 100, 100);
}
There's plenty more of this to come!

Timers with ints
So far, we have been tying integers to things like location and size, but an int could be a counter that we can use for timing. In the example below "counter" is just an integer that goes up to the variable "interval" and resets. At the same time it sends the variable counter back to 0.

color RanColor; 
int counter; 
int interval = 100; 

void setup(){
  size(300, 300); 
  RanColor = color(random(255), random(255), random(255)); 
}

void draw(){
  background (RanColor);
  counter ++; 
  if (counter >= interval){
      counter = 0; 
      RanColor = color(random(255), random(255), random(255));      
  } 
}

In Class Project
Take this face (code below) and make it animated and interactive.

void setup() {
  size(300, 400);
  smooth();
}


void draw() {
  fill(255); 
  ellipse(width/2, height/2, 200, 300); // head
  ellipse(100, 180, 40, 40); // left eye
  ellipse(186, 180, 40, 40); // right eye
  fill(1);  
  ellipse(100, 180, 10, 10); // left pupil
  ellipse(186, 180, 10, 10); // right pupil

  fill(255); 
  ellipse(143, 280, 50, 1); // mouth
}



Images
You need to create a data folder in the same location as your sketch that will hold images.

PImage newt;

void setup() {
  newt = loadImage("newtimage.jpg");
}

void draw() {
  image(newt, 0, 0); // top left corner of image (like rect). 
}

Image types
There are three major file types that processing can display, jpg, gif and png. The majority of images you see on the web are jpg. jpegs are "lossy" which means the images are compressed, however, when you save a jpg from photoshop you can set the level of compression.
Gifs only have 256 colors (total!) - they are mostly used for low resolution graphics. Animated gifs will not animate in Processing. (But we can create our own animations)
Png files are more modern. They have an alpha channel so you can have transparency, but you cannot set the compression like you can with a jpg.
In the newt sketch above the image is saved as a png.

Font and Text
method 1

Using text in your sketch requires you load a font, and before you can load a font you need to create it. To create a font go under the Tools menu to "Create Font" and pick a font and size from the list. You might want to copy the name of the font as you will need it in your sketch.

Creating a font places the .vlw file in your data folder, in your sketch folder - if you don't have a data folder it makes one for you.

Putting text on the screen is a four step process.

PFont font; // create a varialbe name for your font

void setup() {
  font = loadFont("AppleGothic-48.vlw"); // assign the variable an actual font (the font must be in your data folder). 
}

void draw() {
  textFont(font, 48); // tell processing which font to use
  text("joe is good", 10, 50); // write "joe is good" on the screen at location 10, 50
}

method 2

There is another method to load a font, which is to load it directly from the host computer instead of using the create font tool. This method will only work if you are sure the computer has the font you list, but it does save you the step of having to use the create font tool.
To do this swap the line font = loadFont("AppleGothic-48.vlw"); with the line font = createFont("AppleGothic", 48);


PFont font;
void setup() {
  font = createFont("AppleGothic", 48);
}



Lab Week 3


Using a camera create your own photograph. Make a sketch that incorporates the photo, and text that appears when you press the mouse. Use a for loop to create a background pattern. Save and Compress (zip) your entire folder so I get the images as well as the .pde file.
Proof
Some Computer HIstory


No Breath Norman code

int mouthHeight = 1; 
boolean mouthOpen = false; 
int rface = 255; 
boolean death = false; 
float eyemoveH, eyemoveV; 
int eyeHeight = 40; 
int blinkCounter; 
int blinkLimit = 200; 
boolean blinking = false; 

void setup() {
  size(300, 400);
  smooth();
}

void draw() {
  rface --; 
  if (rface < -100) {
    death = true;
  }
  fill(255, rface, rface); // remove the blue and green leaving just the red
  ellipse(width/2, height/2, 200, 300); // head 
  if (death == false) { // make eyes black if Norman dies. 
    fill(255);
  } 
  else {
    fill(0);
  }
  // blinking 
  blinkCounter ++; 
  if (blinkCounter > blinkLimit - 10) { // blink! 
    blinking = true; 
    eyeHeight = 1;
  }
  if (blinkCounter >= blinkLimit) { // open eyes! 
    blinking = false; 
    eyeHeight = 40; 
    blinkCounter = 0; // reset the counter so it keeps blinking
  }
  ellipse(100, 180, 40, eyeHeight); // left eye
  ellipse(186, 180, 40, eyeHeight); // right eye
  fill(1); 
  
  // moving eyes
  eyemoveH = map(mouseX, 0, width, -10, 10); 
  eyemoveV = map(mouseY, 0, height, -10, 10); 
  if (blinking == false) {
    ellipse(100 + eyemoveH, 180 + eyemoveV, 10, 10); // left pupil
    ellipse(186 + eyemoveH, 180 + eyemoveV, 10, 10); // right pupil
  }
  fill(255); 

  // check if mouth is open
  if (mouthOpen == true) {
    mouthHeight = 30; 
    rface = 255;
  } 
  else {
    mouthHeight = 1;
  }
  ellipse(143, 280, 50, mouthHeight); // mouth
}

void mousePressed() {
  mouthOpen = true;
}

void mouseReleased() {
  mouthOpen = false;
}