Week 6 - Arrays

Today

  • check-in
  • review art software
  • arrays

Check-in and Questions

Tool Time - Drawing With Computers

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

User Testing

Try playing the original Apple II Kid Pix - emulated in browser.

  • How does the software make its interface clear? (or not)
  • How does the software constrain your drawing/art-making?
  • Is it intuitive?
  • Would you do anything differently? If so, what?
  • Would you want to use this again? Why or why not?

Review drawing programs

Concept and design:
  • Is the software concept clearly defined?
  • Is the concept novel and specific?
  • Are there clear visual indicators for functionality? (i.e. pictures or text on buttons indicate their functionality)
  • Does the workflow of the software make sense? (i.e. pressing a button leads to correct outcome when painting)
  • Are there visual indicators to show program state? (i.e. a color display showing current color, or a background color to show which button is depressed)
Programming:
  • Is the program code organized and logical?
  • Does the software function correctly?
  • Are the variable and function names useful and clear?
  • Does the program use comments throughout to make the logic clear?
  • Is the program broken down into separate useful logical functions that are called from draw?
Documentation:
  • A catchy title
  • A 1 paragraph description
  • Documentation of how to use the software consisting of text describing each button/option as well as
    • Screenshots of the tool/software in use demonstrating various functionality
    • optional: short video screencast of you demonstrating your software, with voiceover or text overlay
  • Ability to save with your software

EXTRA CREDIT:

  • A novel and proper use of looping in the program!

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

nested for loops

code

Web-Based Artists Review

For the next few weeks 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

Altered art software

Pick someone else’s software. Make a remix that alters the functionality in a meaningful way. This could be an augmentation that adds some new functionality, the addition of new backgrounds, changing painting options, or modifying the interface (switching from keypresses to buttons to click for example).

  1. Start by copying (duplicating) the code. Go through the code. Format it to make it easier to read. Go line by line and review the comments. Can you figure out how it functions? Could the code be cleaned up? Do some tests (using print) to make sure you understand how the code functions. Does it need parts to be broken into smaller functions? Save your edits.

  2. Now start a second sketch. Build the new functionality now, testing it on its own in this second sketch. Does it look good and function as you’ve intended it?

  3. Go back to the original software and review its draw function. Where will you integrate your new functionality? Where does the button get added? Where do you put any additional drawing or brush functions? Add in your new functionality. You may have to separate your second program into different components and add them to the software you’re remixing in different areas.

Student Drawing Software