Programming for Art: Images

Programming for Art:Programming for Art:

ImagesImages

ART 315ART 315

Dr. J. R. ParkerDr. J. R. Parker

Art/Digital Media LabArt/Digital Media Lab

Lec 17 Fall 2010Lec 17 Fall 2010

Images

Images are 2D arrays of pixels.

Conceptually, this is clear, and so it should also be clear how to get a pixel value and set one.

Images reside in files, GIF or JPEG or PNG etc etc, and so key issues with images in Processing involve reading the image and displaying it.

Images

Images are added after other types in the language; they are a complex type, not a simple one, and is based on other types.

An image variable is of type PImage (processing image)

ImagesPImage myImage;

void setup (){ size (300, 300); myImage = loadImage (“myimage.jpg”);}void draw(){ background (0); image (myImage, 0, 0);}

Images

The image file must be in the same directory as the source file, or you will need a path name in the quotes.

Images

Load it at a different place each frame …void draw(){ background (0); image (myImage, random(30), random(30));}

ImagesLoad a ball and bounce itPImage myImage;int x=0, y=100;int dx=1, dy=1;

void setup (){ size (300, 300); myImage = loadImage ("ball.gif");}

void draw(){ background (0); x += dx; y += dy; image (myImage, x, y); if (x > width-32) dx = -1; else if (x <= 0) dx = 1; if (y > height-32) dy = -1; else if (y<=0) dy = 1;}

Multiple Images

PImage myImage, backImage;int x=0, y=100;int dx=1, dy=1;

void setup (){ size (300, 300);

backImage = loadImage ("back.jpg"); myImage = loadImage ("ball.gif");}

void draw(){ background (0); x += dx; y += dy; image (backImage, 0, 0); image (myImage, x, y); if (x > width-32) dx = -1; else if (x <= 0) dx = 1; if (y > height-32) dy = -1; else if (y<=0) dy = 1;}

Multiple Images

The Display Window

The display window is an Image!

Arrays of arrays

This is a 2D array. How is it done? Memory, after all, is one dimensional.

We do it by mapping 2D indices onto 1D ones.

12

A Row 0Row 1Row 2

Column 0 1 2 3 4 5 6 7

Arrays of arrays

Advanced material: Array element A[i][j] is accessed as

A + (i*Nrows)+j

12

A Row 0Row 1Row 2

Column 0 1 2 3 4 5 6 7

Advanced Material

A + (i*Nrows)+j

12

A Row 0Row 1Row 2

0 1 2 3 4 5 6 7

12

Col 0

Col 1

Col 2

A[1][2] = A+(1*Nrows)+2 = A+3+2 = A+5

A

What Use are 2D Arrays?

An obvious item is that they can represent the screen. Each element could be a pixel