resources /Processing /Part II

continuing the resources /Processing lesson.

Making an application.

Part two is making a slide show that loads images from a text file. But we need to cover a few more things first.

• Writing Text
• HTTP

Make a New Sketch

Make a blank new sketch and save it. Name it something like Slide Show or something like that.

Text on Screen

You have to load a font to use it. Take a look at the loadFont() method. Follow those instructions to "Tools->Create Font". Pick a font on your system that you like and "Create" it for this slide show sketch. Then run this code, but change the name of the font:

void setup() {
  size(600,450);
  background(#FF0000);
  noStroke();
  noLoop();
}

void draw() {
  print_word("Yo!", width-80, 80);
  print_word("frame: " + frameCount, 400, 140);
}

void print_word(String da_text, int da_x, int da_y) {
  PFont font;
  // The font must be located in the sketch's
  // "data" directory to load successfully
  // the next line will be different for you.
  font = loadFont("DINEngschriftStd-48.vlw");
  textFont(font, 64);
  text(da_text, da_x, da_y);

}

When we get here, someone ask "What is with all that setup(), draw() and print_word() stuff?" If you know the answer, answer for lyle.

Take a Break

Getting Served

Now lets ask a server for something when we click on the file. How about an image. Add this after the draw() function.

void mousePressed() {
  if (frameCount % 2 == 0){
    background(200,0,0);
  }else{
    background(loadImage("http://danm.ucsc.edu/~lyle/processing_test/smile_600x450.jpg"));
  }
  redraw();
}

Talk a bit about:

• mousePressed()
• modulo, %, remainder
• URL space and Java security.
• Background image size.

Getting some Data

Check out this file: http://danm.ucsc.edu/~lyle/processing_test/images.txt

Add this after the setup() function decloration.

int current_image_count = 0;
String lines[] = loadStrings("http://danm.ucsc.edu/~lyle/processing_test/images.txt");

Are we getting that file and the data in it? Find out by adding this to the draw() function.

  print_word("lines in that file" + lines.length, 120, 180);
  print_word(lines[1], 0, 240);

Slide Show

Add this to the end of the end of the mousePressed() function:

  if (current_image_count > lines.length-1) {
    current_image_count=0;
  }
  PImage cur_img =  loadImage(lines[current_image_count]);
  image( cur_img, width/2 - cur_img.width/2 , height/2 - cur_img.height/2 );
  current_image_count ++;

  redraw();

Connecting it all together

Here is a version of the final source for this Slide Show:

void setup() {
  size(800,600);
  background(0,0,0);
  noLoop();
}

int current_image_count = 0;
String lines[] = loadStrings("http://danm.ucsc.edu/~lyle/210/images/list_images.php");
PImage slide;


void draw() {
 if (frameCount % 2 == 0){
    background(100);
  }else{
    background(200);
  }

  slide = loadImage(lines[current_image_count]);

  // display the image in the center
  image(slide, width/2-slide.width/2,height/2-slide.height/2);


  if (current_image_count >= (lines.length -1) ) {
   current_image_count = 0;
  } else {
    current_image_count ++;
  }
//  delay(2000);
}


void mousePressed() {

  redraw();
}

Part III, Publishing

This example was first written by Lyle Troxell as an in-class example of Client-Side tech for DANM 210 fall06.