Week 6 - Arrays

Today

  • 2 artists working with code
  • some history
  • arrays
  • loops in loops: building a grid with nested for-loops
  • Web-based artists

New media artists

The Incredulity of Jacolby Satterwhite (8m)

Rafael Lozano-Hemmer in Borderlands (17m)

Sketchpad and the birth of the GUI

Ivan Sutherland invented the Graphical User Interface in 1963. Prior to this, you only interacted with a computer via switches or a keyboard. The sketchpad interface featured switches, dials, an output display and a lightpen that could draw directly on it. A user pressed switches while drawing. One switch allowed touching the screen with the lightpen to draw a line from the previous position on screen. Another switch drew circles. Another drew arcs. Etc. This allowed a user to draw directly on screen without having to specify position in code commands. There were also capabilities for duplicating, moving, scaling and rotating shapes on screen.

Sketchpad was a new way of working and contained constraints that shaped what could be created with the software. In the 80s as home desktop computers spread, Adobe Photoshop, Illustrator and InDesign became standard tools for manipulating photos and print design. These powerful tools have become standardized within creative industries. In the past few years they have added in scripting capabilities to extend the available tools within these software systems.

Ivan Sutherland sketchpad

Review Drawing Software

Array

An array is a list of similar objects, usually in a row or column.

Arrays have length. The length equals the total number of values in the array.

var students = ['Tasha', 'Ariel', 'Shona', 'Nat', 'Jerome'];

The length of students is 5 since there are 5 entries. The first element is at index 0.

print(students[0]); // 'Tasha'

Counting up from 0, we can see that the last element in the array is the 4th.

print(students[4]); //'Jerome'

Extrapolating from here, this tells us that the last element in any array is length - 1.

print(students[length-1]);

Choose a random student from an array

var pickAStudent = int(random(students.length-1));

Example code

An array of button images

Drawing a grid with loops

single line of rects with a single for loop

for (let x=0;x<width;x+=20){
    rect(x,height/2,20,20);
}

code

Loops in Loops

The Grid: In and Out of Bounds

let w = 30, h = 30;

for (let y = 0; y < height; y++){
  for (let x = 0; x < width; x++){
    fill(random(255),random(255),random(255))
    rect(x,y,w,h);
  }
}

Challenges:

  • make a grid where each square is either black or white
  • duplicate and make a new grid where each square is usually black, occasionally white

nested for loops

code

Web-Based Artists Review

We’ll talk about a few contemporary interactive media artists whose work lives on or dialogues with the Internet and whose work is built in code.

Today we’ll examine the work of:

Homework

Read

Chapter 11 - Arrays

Watch

optional videos: