Programming for Art:Programming for Art:ArraysArrays

ART 315ART 315

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

Art/Digital Media LabArt/Digital Media Lab

Lec 01 Fall 2010Lec 01 Fall 2010

Variables

A variable is a name for a value, a value that can change as we need it to.

It can hold one value.

So: the speed of a ball on the screen could be:

int speed = 0;

Variables

HOWEVER:

What if there are many balls, and each has a speed?

int speed1=0, speed2=0;

What if we wish to be flexible, and allow various numbers of balls?

The we need an array.

Array Variables

An array is a collection of variables that have a common name and type, and that can be accessed through a number called an index.

When the array is declared, a size is usually specified. This means that the array’s size is always known.

Legal indices start at 0 and run to N-1, where N is the number of elements in the array.

ArrayAn array is a set of adjacent memory

locations each of which contains the same type of value.

An array of integers representing speeds could look like this:

212 0 32 41

0 1 2 3 4 5 N-1 Indices

Values

4...

ArrayThis array could be declared as:

int [] speed = new int[12];

And accessed as a variable using an index:

k = speed[3];

so speed[3] has the value 0.

212 0 32 41

0 1 2 3 4 5 N-1 Indices

Values

4...

Array

int [] speed = new int[12];

Type it’s an name create size is array space 12

ints

212 0 32 41

0 1 2 3 4 5 N-1 Indices

Values

4...

Array of grey levels

int [] grey = new int[24]; int greyIndex = 0;

This is an array of 24 grey values to be used, say, to fill rectangles and ellipses.

Each time DRAW is called, use the next colour in this collection.

The Program

int greyIndex = 0;

int [] grey = new int[24];

void setup()

{

size(400, 400);

background(128,128, 0);

grey[0] = 1; grey[1]=12;

grey[2]=24; grey[3]=48;

grey[4]=128;

grey[5]=200; grey[6]=64; grey[7]=255]; grey[8]=96;

grey[9]=176; grey[10]=199; grey[11]=143; grey[12]=121; grey[13]=13;

}

void draw(){ fill(grey[greyIndex]); rect(random(width), random(height), 20,20); greyIndex = greyIndex + 1; if(greyIndex > 13) greyIndex = 0;}

What it Does

video

What do we use arrays for?

For remembering past positions.For colour maps/tablesVelocities/positions of multiple

objects

Multiple ObjectsLet’s have an example in which we

have many objects (EG Balls) that can move about.

The X position of each is found in X[i]

The Y position is found in Y[i]Velocity (motion in each time unit) is

in Dx[i] and Dy[i] for the X and Y directions.

Arrays for position

/* Position of up to 20 objects */int [] X = new int[20];int [] Y = new int[20];.

Arrays for speedint Nobjects = 5; /* How many are there

now*//* Position of up to 20 objects */int [] X = new int[20];int [] Y = new int[20];.

/* Speed of up to 20 objects */int [] Dx = new int[20];int [] Dy = new int[20];

Drawing objects

We know where each ball is, and can draw it in its proper place using the array and a loop.

for (i=0; i<Nobjects; i++) { blackCircle (X[i], Y[i]); /* Draw object */ /* Use the blackCircle function already written */

Updating SpeedAfter each iteration, use Dx and Dy to

change the position of the balls.

for (i=0; i<Nobjects; i++) { blackCircle (X[i], Y[i]); /* Draw object */ X[i] = X[i] + Dx[i]; /* Update

position */ Y[i] = Y[i] + Dy[i];

Random DirectionsAt random, change the speed in each direction if (random(10) < .1) /* Change speed at random */

{

if (random(10)<5)

{

Dx[i] = Dx[i]+1; Dy[i] = Dy[i] - 1;

} else {

Dx[i] = Dx[i] - 1; Dy[i] = Dy[i] + 1;

}

}

Here it is:

The Objects wander off …

So when a ball goes off the edge, maybe move it to a random place.

if ((X[i] < 0) || (X[i] > width)) X[i] = (int)random(width); if ((Y[i] < 0) || (Y[i] > height)) Y[i] = (int)random(height);

How about Bouncing?As we did in Gamemaker with

the ‘change direction’ button for Pong. Not as simple, but nearly…

if ((X[i] < 0) || (X[i] > width)) Dx[i] = -(Dx[i]); if ((Y[i] < 0) || (Y[i] > height)) Dy[i] = -(Dy[i]);

The Bounce

This was remarkablyeasy to do.

Main loopThis last version is much like a video

game ‘main loop’, in which all objects are drawn, then the object’s positions are updated based on their current speeds.

All objects are kept track of in the game ‘AI’ and events that happen to them are implemented.

What about collisions??

Collisions

There are N objects, in this case all are circular.

The size of each object is ‘circlesize’.

If any two objects are within a distance ‘circlesize’ of each other then they have collided.

Collisions

If two balls collide then we will change their color.

This means keeping track of object colors, too.

An array again:

int [] cols = new int [20]; /* Initially black */

‘collide’ function

We shall make a function that takes ints I and j, and determines whether objects i and j have collided.

Then we will do this: for (i=0; i<N; i++) for (j=i; j<N; j++) if (collided(i,j)) { cols[i] += 10; cols[j] += 1; }

Collisions

The collided function simply determines whether the two objects are nearer than circleSize to each other.

Return 1 if so, 0 otherwise.

collisionint collided (int i, int j){ float d1, d = 0.0; d = (X[i]-X[j])*(X[i]-X[j]); d1 = (Y[i]-Y[j])*(Y[i]-Y[j]); d = sqrt (d + d1); if (d <= circleSize) return 1; return 0;}

Change colour for (i=0; i<Nobjects; i++)

{

blackCircle ( X[i], Y[i], cols[i] );

void blackCircle ( int x1, int y1, int level )

{

stroke(0); fill (level);

ellipseMode(CENTER);

ellipse (x1,y1,circleSize, circleSize);

}

The Result

PolaroidThe Model 95 was Polaroid's first camera, and it was introduced in 1948.

1950s• Theremin, invented in 1928,

released as a kit from Moog.

• Minicomputers - CDC-160A

Mixing Media

• TV Theme 'My Favorite Martian' uses a theremin.

1960s• 1960 - PDP-1 minicomputer (and SpaceWar computer

game)• October 17, 1969, George Smith and Willard Boyle

invented the charge-coupled device (CCD)

1963: Douglas Englebart – first mouse1963 Ivan Sutherland – Sketchpad, interactive CG system- pop-up menus

1960s

• 1967 – First computer animation

• •

1960s• 1968 - PDP-8

minicomputer

The first ARPANET link was established between the University of California, Los Angeles and the Stanford Research Institute on 22:30 hours on October 29, 1969.

1970s• Commercial video games• First home computers• Atari releases home Space Invaders• VCR – although the first home vcr was the

Sony model CV-2000, it was $1000, monochrome, and used reels.

• 1970 Philips developed a home videocassette format.

• Betamax November 1975• VHS format, introduced in Japan in September

1976

1970s

• Apple I 1976 (a kit)• The Apple II was

introduced on April 16, 1977 (VisiCalc spreadsheet)

1971 – Andromeda Strain. Short 3D graphics segment.1973: John Whitney. Jr. and Gary Demos – “Westworld”, claims to be first film with computer graphics.

1971 -Andromeda Strain

1973 -Westworld

Westworld

1980s• SONY - 1981, the first prototype digital camera, the Mavica.

• 570*490• 50 still frames• floppy 3.5" disks• CCD sensor

1980s• In 1982, two events happened that eventually led to

the home camcorder boom: JVC introduced the VHS-C format, and Sony released the first professional camcorder named Betacam.

Cameramen did not welcome Betacam, because before it, carrying and operating the VCR unit was the work of a video engineer; after Betacam they came to be required to operate both video camera and VCR.