6/18 — Week 5 — Images/Mosaics (Lillian Schwartz, Ken Knowlton)

[tarngerine]

WARNING: FLASHING / EPILEPSY IN ANIMATIONS or trypophobia for mosaics

Artist 1: Ken Knowlton

His work allows us to talk about pixels, values from pixels, how we'd process images

Known for a lot of mosaics

With Stan Vanderbeek, collaborating on "Poem fields" (computer generated films)

Write pixels on microfilm, set pixels on or off

Jigsaw puzzle that you can rearrange to make any picutre

Take paintings to rearrange them to make any photograph

Artist 2: Lillian Schwartz

Films are a convo between natural and computational forms. Physical reactions -> computer simulations. Juxtaposed.

Taking shapes and growing them with simple operations

"Olympiad" animation of a single person running, using multiple image operations again and again to distort

Digital photographs & Images

One of the first photos communicated over wire (digitally), 1920s

Elementary signs: https://www.jmcvey.net/cable/elements/letters1.htm

Pocket Handbook of image processing algorithms in C

Handy to know the names of the algos

Research

https://paper.dropbox.com/doc/Ken-Knowlton-9RiWIEVzixsFfMPjB9U1Q
https://paper.dropbox.com/doc/Lillian-Schwartz--A2IJZ75Y_zYmmrUIqUIQo14~Ag-aR7IwMUvXyXpRWplExf1J

[tarngerine]

Technical lecture

ofImage stores image in memory to draw onscreen
ofPixels stores pixels data in RAM
ofTexture graphics card memory

ofImage contains ofPixels and ofTexture
load image hard drive > memory (pixels) > graphics card (texture)

when iterating through an image's pixels, use increments larger than 1 (e.g. i+=10) to prevent doing too much work

ofColor color = img.getColor(x, y)
color.getBrightness > 0 - 255, then map to size of white circle to get

or map to angle of a drawn line

img.allocate(w, h, OF_IMAGE_COLOR)
img.setColor(x,y, color);
get a checker pattern: ofColor(sin(i*.1)*sin(j*.1)*127 + 127
img.update()

use mouse distance from x/y coord on image
float distance = ofDist(mouseX, mouseY, i, j);
if (distance < 100) img.setColor(i,j,white) else set color black
fade out gradient then set colo r = ofMaP(distance,0,100,1,.0);

mix rgb based on x, y, and mouse pos:
red = ofMap(i, 0, 500, 0, 255);
green = ofMap(j, 0, 500, 0 255);
blue = ofMap(mouseX, 0, ofGetWidth(), 0, 255, true);
img.setColor(i,j, ofColor(rgb);

erosion and dilation

In photoshop, other > custom filter


Kernels for edge detection, diff preset ways
for every pixel, compare to neighbors and do some sort of operation

ofImage.setImageType OF_IMAGE_GRAYSCALE)

high contrast "binary image"

• use 2nd image so you dont modify the source data bc you need the neighbor pixel data preserved

image2.allocate(img1.getWidth(), img2.getHeight(), OF_IMAGE_GRAYSCALE);
  ofColor c = lillian.getColor(i,j);
if c.getBrightness() > 127  // based on threshold
  img2.setColor(i,j,white);
else set black

dilation

// dialate one image into another
// grows white areas larger
void dilate(ofImage & img1, ofImage & img2)
  // assumptions: img1/2 same size, both grayscale/binary
  for loop {
    //neighbors, what are the edge cases (e.g. edge of image)
    // what are the 8 pixels that are neighbors to me (sometimes 0 out edges)
    int i_m_1 = ofClamp(i-1,0,imgwidth); // i minus 1
    int i+p+1 = ofClamp(i+1,0,imgwidth); // i plus 1)
    // repeat for j

    // neighbor values
    ofColor north = img1.getColor(i,j_p_1);
    // northeast = i+1, j+1
    // etc ....

    // if any neighbor brightness is > 127 (8 conditions in the if statement with ||)
    img2.setColor(i,j,white) // or black
}

dilate img 2 > img 3, and img 3 > img 2 > gradually "bloom" out

for example, olympiad (runner with multiple strokes) > dilate, then subtract original (so there's an outline)

[tarngerine]

Kernels: https://en.wikipedia.org/wiki/Kernel_(image_processing)