Meeting 22: Week 11, Long day (Thursday April 23 2:40 – 5:20)

Announcements

  1. Record session
  2. Student lead discussions
  3. Final projects

Discuss final projects

  • Can be game 
  • Must be interactive
  • Can be performance based, which you can record in our room
  • Should be engaging, surprising, interesting, or cause a sense of wonder, etc.
  • What is left for us to learn?
    • Pixels (today)
    • Image Processing
    • Motion Tracking

Examples of motion tracking projects:

Lecture

PImage

  • Just another class, i.e. it has
    • Data (the pixels, width, height, etc.)
    • Functionality (image(), get(), etc.)
PImage photo; 
void setup() { 
  size(700, 700); 
  photo = loadImage("/home/michael/useForCans.jpeg");
} 
void draw() { 
  image(photo, 10, 10);
}

img.get(x,y) – Gets the color of the pixel at this location 

img.get(x,y,w,h) – Gets a portion of the image

PImage photo; 

void setup() { 
  photo = loadImage("/home/michael/lidar.jpg");

  size(700, 700);

  image(photo, 10, 10);

  PImage newPhoto = photo.get(50, 150, 100, 100); 

  image (newPhoto, 600, 600);
}

Also 

image(photo, positionX, positionY, width, height);
tint(red, green, blue);
imageMode(CENTER);

Arrays of images

// Example 15-3: Swapping images

int maxImages = 4; // Total # of images
int imageIndex = 0; // Initial image to be displayed is the first

// Declaring an array of images.
PImage[] images = new PImage[maxImages]; 

void setup() {
  size(600, 500);

  // Loading the images into the array
  // Don't forget to put the JPG files in the data folder!
  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( "/home/michael/img" + i + ".jpg" );
  }
}

void draw() {
  // Displaying one image
  image(images[imageIndex], 0, 0, width/2, height/2);
}

void mousePressed() {
  // A new image is picked randomly when the mouse is clicked
  // Note the index to the array must be an integer!
  imageIndex = int(random(images.length));
}

Break?

Discussion?

Pixels

You can access individual pixels using the special built-in array called “pixels”. Before using it you must load the canvas using loadPixels(), and after making any changes you must call updatePixels() to write from the pixels array back to the canvas:

color pink = color(255, 102, 204);

loadPixels();

// change the first row to pink
for (int i = 0; i < width; i++) {
  pixels[i] = pink; 
}

updatePixels();

the pixels array is one-dimensional, meaning if you want to go to a different row on the canvas you need to offset by that many widths:

color pink = color(255, 102, 204);

loadPixels();

// Change the fifth row to pink
for (int i = width*5; i < (width + width*5); i++) {
  pixels[i] = pink;
}

updatePixels();

You can use all your skills with colors e.g. random() and noise() e.g. make it fade:

int r = 255;
int change = -1;
void setup() {
  size(500,500);
}

void draw() {

  color myColor = color(r, 102, 204);

  loadPixels();
  for (int i = 0; i < width*height; i++) {
    pixels[i] = myColor;
  }
  updatePixels();

  r -= change;

  if (r < 0 || r > 255) {
    change = -change;
  }
}

What are some of the things you can do with these tools?

  • Print out the color where the mouse is
  • Display horizontal lines
  • Make one horizontal line that follows the mouse
  • Take an image and make an artistic collage 
  • Access the pixels of an image and for a particular color change that pixel with a pixel from another image (green screen effect)
  • Draw slices of images somewhere else to “glitch” an image

Some other image functions that might be fun:

  • tint()
  • createImage()
  • Brightness
  • Filter()
  • Capture()

 

Next week we will learn more about image processing and do simple computer vision

  • Webcam
  • Tracking a color
  • Edge detection
  • frameDifferencing (motion detection)
  • Using motion to do something
  • Background subtraction
  • brightness detector
  • brightest point

Homework due Thursday April 30

  1. Do something creative with an image
  2. Watch the following tutorials: