Your browser does not support the canvas tag.

Week 5

simulation hypothesis

Simple clock
PFont font; 
int oldSecond;
long timer; // global
int interval = 1000; 
float sec;
void setup() {
  font = createFont("Times", 20);
  textFont(font); 
  size(600, 600);
  smooth();
  strokeWeight(3);
  sec = second();
  oldSecond = 0;
  timer = millis(); // in setup
}
void draw() {
  background(200); 
  fill(1); 
  text(hour() + ":" + minute() +":" + second(), 20, 20);

  float min = map(minute(), 0, 60, 0, 360); 
  float minRads = radians(min);
  float hor = map((hour()%12), 0, 12, 0, 360); //oooh! modulo
  //float hor = map((hour()%12) * 60 + minute(), 0, 720, 0, 360); // ooooooooh! using the mod AND adding the minutes! 
  float horRads = radians(hor); 

  stroke(1); 
  pushMatrix(); 
  translate(width/2, height/2); 
  rotate(horRads); 
  line(0, 0, 0, -120); 
  popMatrix();

  pushMatrix(); 
  translate(width/2, height/2); 
  rotate(minRads); 
  line(0, 0, 0, -160); 
  popMatrix();

  // okay, this gets a little headdy. Don't panic. 
  if (second() != oldSecond) { // reset every second when the second changes
    timer = millis();// reset the timer
    sec = map(second(), 0, 60, 0, 360);
  }
  oldSecond = second(); 
  // get the value since the last time the timer reset and map it the rotation of one second.  
  float millRad = map(millis()- timer, 0, 1000, 0, 360/60); 
  // add that value to the current second
  float secRads = radians(millRad + sec); 
  stroke(255, 0, 0); 
  pushMatrix(); 
  translate(width/2, height/2); 
  rotate(secRads); 
  line(0, 0, 0, -260);  
  popMatrix();
}
Here's a simpler way to get a second hand without needing to use Translate.
void setup() {
  size(400, 400);
}
void draw() {
  background(200); 
  float sRad = map(second(), 0, 60, -HALF_PI, TWO_PI - HALF_PI); 
  float sx = width/2  + cos(sRad)* 180;
  float sy = height/2  + sin(sRad)* 180;
  line(sx, sy, width/2, height/2);
}

Arrays (lists)
An array is a list. You can have an array of floats, ints, strings, booleans, PImages - any variable type that we have used so far could be an array. However, arrays can only contain one type of variable. You cannot have an array that holds both ints and strings, for example.
An array is designated by square brackets [], so if you see square brackets in someone's code, that means they are using arrays.

When you create an array, you need to designate how many items it will hold. You either do this by propagating it when you create the array, or by designating a size without declaring what the values are.

An empty array with space for three values
float [] locX = new float [3];

An an array that is created and propagated in the same line
float[] speeds2 = {3.5, 12.9, 0178}; //create an array and give it a value right away.

  int[] locX = new int[3]; //

void setup(){
  size(200, 200); 
  smooth(); 
  locX[0] = 20; 
  locX[1] = 100; 
  locX[2] = 160; 
  
}

void draw(){
  background(200); 
  ellipse(locX[0], 100, 20, 20); 
  ellipse(locX[1], 100, 20, 20); 
  ellipse(locX[2], 100, 20, 20); 
}
One thing you will notice in the code above, is that the computer considers the first value in the array to be 0, not 1. This will mess you up big time! Not only is our first value at position 0, but this means that our last value is at position 2 not 3. So if we tried to draw an ellipse using the line
ellipse(locX[3], 100, 20, 20);
the computer would give us the error.
ArrayIndexOutOfBoundsError: 3
While this may seem opaque, "ArrayIndexOutOfBounds" is usually a clue you're asking for a position in an array that does not exist.

In this next example we get to some power - arrays and the for loop. With for loops we can easily cycle though every instance in the array. Notice we start with i = 0 and end with i < locX.length. Usually we would say >= but this would give us the outOfBounds error because locX.Length is 3, and position 3 does not exist.

int[] locX = new int[3]; //

void setup() {
  size(200, 200); 
  smooth(); 
  locX[0] = 20; 
  locX[1] = 100; 
  locX[2] = 160;
}

void draw() {
  println(locX.length); 
  background(200); 
  for (int i = 0; i < locX.length; i ++) {
    ellipse(locX[i], 100, 20, 20); 
  }
}

Sequencial image animation

In the code below we combine arrays, images, and a for loop to create an animation. For now, use these eye images - they are already named the correctly for the sketch.


int numFrames = 6;
int frame = 0;
PImage[] images = new PImage[numFrames];
long timer; 
float framespeed = 1000; 

void setup()
{
  size(254, 173);
  images[0]  = loadImage("eye_0000.jpg");
  images[1]  = loadImage("eye_0001.jpg"); 
  images[2]  = loadImage("eye_0002.jpg");
  images[3]  = loadImage("eye_0003.jpg"); 
  images[4]  = loadImage("eye_0004.jpg");
  images[5]  = loadImage("eye_0005.jpg"); 
  timer = millis(); 
  imageMode(CENTER);
} 

void draw() 
{ 
  if (millis() - timer > framespeed) {
    timer = millis(); 
    frame ++;
  }  
  if (frame == numFrames) {
    frame = 0;
  }
  image(images[frame], width/2, height/2);
}

Intro to Strings

A String is a new variable that contains text. So you can load anything you want into a string, then put it one the screen. More to come on Strings in the coming weeks.


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); 
}
Here's some handy code for easily loading a bunch of images into an array at once.
Here's a great way to rename multiple files on your mac

  for (int i = 0; i < numFrames; i ++) {
    String j = "eye_000" + str(i) + ".jpg";
    images[i]  = loadImage(j);
  }

HSB color
A: HSB stands for Hue Saturation Brightness, and it is another way of describing color space.
int h = 0;
void setup(){
  size(300, 200); 
  colorMode(HSB); 
}
void draw() {
  background(200);
  h ++; 
 h = h % 255; 
 fill(h, 100, 200); 
 rect(50, 50, 200, 100); 
}
Homework

Make a character that walk/flies/crawls/zombie shuffles to a point you click. You can draw the character with a pen and scan it, or draw it in illustrator or Photoshop - however you want.

Your browser does not support the canvas tag.


Quiz comin up!