Programming for Art:
Images
ART 315
Dr. J. R. Parker
Art/Digital Media Lab
Lec 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)
PImage myImage;
Images
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));
}
Load a ball and bounce it
PImage myImage;
int x=0, y=100;
int dx=1, dy=1;
void setup ()
{
size (300, 300);
myImage = loadImage ("ball.gif");
}
Images
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.
Column
0
1
A
12
2
3
4
5
6
7
Row 0
Row 1
Row 2
Arrays of arrays
Advanced material:
Array element A[i][j] is accessed as
A + (i*Nrows)+j
Column
0
1
A
12
2
3
4
5
6
7
Row 0
Row 1
Row 2
Advanced Material
0
1
2
3
4
5
6
7
A + (i*Nrows)+j
Row 0
Row 1
Row 2
A
12
A
Col 0
Col 1
A[1][2] = A+(1*Nrows)+2
= A+3+2 = A+5
12
Col 2
What Use are 2D Arrays?
An obvious item is that they can represent
the screen. Each element could be a pixel