Lab 4: Images and Text
CS145: Images and Imagination, Fall 2010

[previous lab][schedule][next lab]

Due Date:
Tuesday, Oct 5 at 9am. Note, this assignment will graded as pass/fail (10 pts).

Reading

Summary of Goals

The main goals of this lab are to:

Practice Activities

Select several of your own images to work with. If they are large, it is recommended that you shrink them down to the appoximates size of your Processing window, e.g. 400x400. Use your favorite photo editing program to do the shrinking (e.g. Photoshop, Paint, etc - ask the instructor if you need help doing this!).

Work through the examples in the text and online to become familiar with working with text and images.

As you encounter Processing commands or structures (e.g. PImage, image, PFont, etc), look them up in the online Processing reference to better understand how they are used. Look for other related commands that may be of use. Note, when we cover arrays in a later lab, we will be working with images in more detail. For now, some of the image commands may be confusing (e.g. loadPixels, pixels[]). Don't use these.

Experiment using for-loops to draw the images and text. For example 


// Reads in an image and creates an "impressionist"
// version the the image.

void setup() {  
  noStroke();

  // load in my picture
  PImage img = loadImage("capeLookout.jpg");
  
  // set the window size equal to the image size
  size(img.width,img.height);
  
  // draw in background case there are any holes 
  // after the for-loop
  image(img,0,0);
  
  // We just want to repeat enough to
  //     fill the window!   
  for (int k = 0; k < 20000; k++) {
    
    // pick a random pixel
    int i = (int) random(img.width);
    int j = (int) random(img.height);

    // set fill color to the color of pixel
    fill(img.get(i,j));  
    
    // draw an ellipse at the pixel location
    ellipse(i,j,8,8);
  }
  save("capeLookoutMod.png");
}

The result will be:
Original Image
Modified Image

Here is another image example: 
// Load in an image. Draw a red tinted version of 
// the image to the background. Then draw small
// untinted rectangular regions of the image 
// on top of the background.

void setup() {  
  PImage img = loadImage("capeLookout.jpg");
  size(img.width,img.height);
  noFill();
  strokeWeight(2);
  
  tint(255,0,0);    // tint image red
  image(img,0,0);   // draw as background
  int w = 30;       // size of rectangles
 
  for (int x = 0; x < width; x = x + 40) {
    for (int y = 0; y < height; y = y + 40) {
      // Note, tint() does not affect the copied region
      copy(img, x, y, w, w,  x, y, w, w);  // draw this region of image to window
      rect(x,y,w,w);                       // draw rectangle around region
    }
  }
  save("capeLookoutRects.png");
}

The result will be:

Here is a text example created by modifying the bouncing ball example from lab 3. You need to run it to see the animation: 
// Bouncing Text
float x,y;    // text position
float dx,dy;  // text position update values

PFont myFont = createFont("FFScala", 32);
String myWord = "Bounce";
int w = 0;   // half width of text
int h = 16;  // half height of text

void setup() {
  size(300,300);  
  textFont(myFont);
  textAlign(CENTER,CENTER);
  background(0); 
  w = (int) (textWidth(myWord)/2.);  

  x = random(w,width-w);  
  y = random(h, height-h);
  dx = random(-5,5);
  dy = random(-5,5);
}

void draw() {
  background(0);  // clear the window.
  x += dx;  // update the x position
  y += dy;  // update the y position
  if (x < w  || x > width  - w) dx = -dx;  // bounce on sides
  if (y < 0  || y > height - h) dy = -dy;  // bounce top/bottom
  fill(255,0,0);
  text(myWord, x, y); // draw the text
  fill(255,255,0);
  text(myWord, width-x, height-y); // draw the text again in reverse position
}

// Use this to save a "snapshot".
void keyPressed() {
  save("bounceText.png");
}

Snapshots are:
With background cleared on each frame.
Without clearing background.

Coding Suggestions

When writing a program, do not try to write the entire program all at once. If you do, there will be a million errors both syntactically and functionally (i.e. it wont't run and, even if it does, it won't do what you had intended). Programming should be an iterative process. You start with a small portion of what you want to do. You make sure that this small part runs correctly before doing more.

For example, in the assignment below, start by simply loading in and displaying your image(s) somewhere in the window. Perhaps then fix the size to be what you want and place it in the location you want it. Then maybe load in and display your text somewhere in the window. From there, continue to make small additions that eventually get you to the final desired result.

If something confuses you, e.g. the behavior of some function, create a small separate test program that contains only that one thing.

Where possible, break up your code into separate functions, where each function has a clearly identified task. This will make your code easier to read, modify, and debug. We will see more examples of this in later assignments, so don't worry too much if you aren't sure how to do this.

Make use of the special capabilites of your medium. For example, Processing can generate images that require lots of computation (e.g. via for-loops) which would be time consuming and tedious to do in, say Photoshop. Processing also enables you to do animation (using setup() and draw()) as well as interaction (e.g. through mouseX and mouseY).

Assignment

To Be Submitted

This lab will be graded based on a Pass/Fail basis. A Pass equals 10 points and a Fail is 0 points.

Preparing the files for submitting to WISE:

Folder Structure: You should be turning in at least one Processing Sketch. Each sketch folder should contain the *.pde file as well as an image (*.png) (take a snapshot if your program is an animation or has interaction - see instructions above).

Cleaning up the Code: Make sure that you have cleaned up the Processing code as follows:

  • Zipping: When you are done doing all of the above, zip together your sketch folder into a single zip file.

    • Submitting to WISE:

    By 9am of Tuesday Oct 5 submit the single zipped file via WISE as an attachment.

    [top]  [Schedule]  [Home]