Announcements
- Record session
- Student lead discussions
- 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:
- Dynamic virtual reality display view dependent tracking:https://www.youtube.com/watch?time_continue=24&v=G7ZQ4KiX1J
- Nosaj thing: https://www.youtube.com/watch?v=_woNBiIyOKI
- Phosphere: https://www.youtube.com/watch?v=El82ewNJdNs
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
- Do something creative with an image
- Watch the following tutorials:
- 11.4: Introduction to Computer Vision – Processing Tutorial
- 11.5: Computer Vision: Color Tracking – Processing Tutorial
- 11.6: Computer Vision: Motion Detection – Processing Tutorial
- 11.7: Computer Vision: Blob Detection – Processing Tutorial
- 11.8: Computer Vision: Improved Blob Detection – Processing Tutorial
- 11.9: Computer Vision: Blob Tracking with Persistence – Processing Tutorial
- 11.10: Computer Vision: Adding Lifespan to Blobs – Processing Tutorial