Programming for Art: Arrays ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 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.

Array An 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: N-1 Indices Values 4...

Array This 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 N-1 Indices Values 4...

Array int [] speed = new int[12]; Type it’s an name create size is array space 12 ints 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/tables Velocities/positions of multiple objects

Multiple Objects Let’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 speed int 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 Speed After 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 Directions At 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] width)) X[i] = (int)random(width); if ((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] width)) Dx[i] = -(Dx[i]); if ((Y[i] height)) Dy[i] = -(Dy[i]);

The Bounce This was remarkably easy to do.

Main loop This 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.

collision int 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

Polaroid The 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 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 mouse 1963 Ivan Sutherland – Sketchpad, interactive CG system- pop-up menus

1960s 1967 – First computer animation

1960s 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 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 , the first prototype digital camera, the Mavica. 570* 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.