Week 5: object and interaction

Ushini Attanayake

Semester 2, 2023


assignment 1 —marking is underway.

assignment 2 is out! Get started!

course survey! - fill it out!!

code theory

last time we covered arrays: a way of bundling up multiple things and getting each one with an index

we also discussed functions: a way of bundling up some code and running it multiple times with predictable changes

time to get into objects!

which (kind of) combine these two ideas!

what's an object?

name a thing that exists

how you would describe it to someone who has never seen it before?

Adriano Pucciarelli



often, you need multiple “attributes” to fully describe a thing

  • a student: name, age, uni course
  • an address: street name, street number, perhaps unit number?
  • a pet: name, species, breed, owner

javascript has Objects to keep related bits of data together

some definitions

object (noun): something mental or physical toward which thought, feeling, or action is directed https://www.merriam-webster.com/dictionary/object

object (noun): a data structure in object-oriented programming that can contain functions as well as data, variables, and other data structures https://www.merriam-webster.com/dictionary/object

let's make a Pokemon

what properties does a Pokemon have?



hit points



as a javascript Object

// declare and initialise in one go
let sally = {
  species: "Pikachu",
  level: 1,
  hp: 100,
  owner: "Ash",
  captured: true

object vocabulary

the components of an object are called properties, each property has a name and a value

let sally = {
// prop name: value
          hp: 42

try not to get confused between the name of the object (sally in this case) and the name of its properties (just one property in this case: hp)

more jargon

in everyday language, we’ve got a bunch of “interchangeable” terms: property, attribute, characteristic, trait, aspect

but in programming they mean different things! 🤷

so, be careful, and remember that objects have properties

object syntax

for an object we use the { and } squiggly braces

the spaces don’t matter, only the braces

// these are all exactly the same
let sally = {hp: 50};

let sally = { hp: 50 };

let sally = {
  hp: 50

what can you do with an object?

just like with arrays, there are a few main things you want to do with your object

  • get the value of a property (this is often called accessing a property)
  • set/update the value of a property
  • add a new property & value (sometimes)

getting the value of a property

there are two main ways to access (get) the value of a property

sally.species    // "Pikachu"
sally["species"] // "Pikachu"

both the “dot” version and the “square brackets” version are equivalent—they return the same value

when to use the dot (.) syntax

pros: a bit easier to type

cons: doesn’t work if the property name isn’t a String

// here, the property name is actually a number
let benObject = {5: "howdy"};

benObject.5  // Uncaught SyntaxError: Unexpected number
benObject[5] // "howdy"

setting the value of a property

just like with arrays, you can assign a new value to a property with =

these two lines of code are exactly equivalent

sally.species = "Raichu"
sally["species"] = "Raichu"

updating the value of a property

there’s even a syntax for doing the get and set all in one line

these two lines of code are exactly equivalent

sally.hp = sally.hp - 10;
sally.hp -= 10; // a bit quicker to type

adding new properties to an object

if a property with that name doesn’t exist, you can create it by just assigning a new value to that property name

these two lines of code are exactly equivalent

sally.hat = true;
sally["hat"] = true;

using the new property

then, you can use it in your code from that point on

  // draw a hat, or something

p5 is making objects (under the bonnet)

for example the color() function

let magenta = color(220,0,220);

or createVector(), or…

let position = createVector(40, 52);

nested object examples

// nested objects
let car = {
  make: "toyota",
  paint: {
    colour: "red",
    metallic: true

car.paint.colour; // what's the value?

arrays and objects together!

// array of objects
let myAnts = [{species: "fire", size: 100},
              {species: "giant", size: 500}]

// object of arrays
let pokerHand = {hearts: [2, 5, 7],
                 diamonds: [8, "Q", "K"],
                 clubs: [5, 6],
                 spades: []}

pokerHand.clubs[1] // what's the value?

objects vs arrays

how does this relate to the arrays stuff from last week? a lot of this stuff looks really familiar…

arrays are objects, the property names are just the numbers 0, 1, …, N-1 (where N is the length of the array)

which should I use?

a rule of thumb:

  • use an object when you have several related values with different types
  • use an array when you have a bunch of values with the same type

don’t be afraid to have an array of objects (and vice versa)

navigating the javascript jungle

the way I’ve presented objects in this lecture (and in this course) is just one way to do it

but it’s a jungle out there (on the web)

don’t despair—the most important thing is to understand the concepts, and to practice


// this seems legit
let point = {x: 100, y: 200};
// what about this?
let point = {
  x: 100,
  redBackground: function() {
    background(255, 0, 0);

methods: what if the property is a function?

in javascript, a function is a value just like a number, so the value of a property can be a function

in this case, the property is called a method

another name? oh my.

methods are really similar to functions, but this time the function is “attached” to a particular object (and can refer to the other properties of the same object)

you call the function it just like any other property (using the .), but with the addition of the parameters in brackets at the end () (just like a regular function).

example: p5.Vector object

let position, momentum;
function setup() {
  createCanvas(400, 400);
  // createVector() creates a p5.Vector object
  position = createVector(width/2, height/8);
  momentum = createVector(0, 0);

function draw() {
  ellipse(position.x, position.y, 40,40);

  if(position.y > height - 20){

what is interactive art?

what is art? (already discussed this one!)

what is interaction?

…and how can we design interactions in p5?

Important: Art and Interaction Computing

So what makes art interactive?

Julio Le Parc (b. 1928)

A day in the street

19 April 1966

interactive art event

Una visión otra: Groupe de Recherche d´Art Visuel (GRAV) 1960-1968

Una visión otra: Groupe de Recherche d´Art Visuel (GRAV) 1960-1968

Exhibition at Museo Tamayo, Mexico

video link

Nam June Paik

Magnet TV


Modified black-and-white television set and magnet, 98.4 × 48.9 × 62.2 cm

Whitney Museum, New York


Kerry Simpson


Glass and sound (now movement) activated lighting

Ainslie Avenue, Canberra

(link) CC BY-NC 2.0


Sid Fels and Kenji Mase


Computer video, graphics, vision, audio

(link), (paper)

Strike on Stage

Chi-Hsia Lai and Charles Martin


Computer video, graphics, vision, audio

(link), (paper), (performance)


Zach Lieberman



(link), more


Yu Zhang



(link), (paper), (video)

Stephen Jones

Cybernetics in Society and Art

Proc. International Symposium of Electronic Art, 2013, p 1–13


So what is interactive art again?

Art that reacts to the participant.

Art where input from the participant drives the artistic experience.

Art where a feedback loop between participant and artwork enhances the experience.

How does the participant know what to do?

How do we know that interaction will enhance the experience?


Design of Everyday Things

An “affordance” is a property of a thing such that it supports an action.

It’s an action possibility.

(See Don Norman Design of Everyday Things)

What are the affordances?

typing on the keyboard?

using the mouse?

being in front of the camera?

being heard by the microphone?

anything else?

What are the affordances?

touching the touchscreen?

clicking the buttons?

taking photos of things?

moving the phone around?

taking calls?

What are the affordances?

no hardware affordances here… (we think)

could be software affordances

or hidden affordances (these lead to discovery and engagement!)

Zach Lieberman

Screenshot (Twitter)


When you create interface, you are designing affordances.

How are you communicating affordances to the participant?

Are they obvious? Are they hidden? Should they be?

How does the participant know what to do?

Let’s look at how to communicate affordances badly!

“The worst volume control in the world

Why are these so funny?

There is usually an obvious affordance for using them.

BUT, the actual effect is controlled by a hidden affordance.

The hidden affordance is completely weird.

Myth: All digital art is interactive

Nope: Digital art doesn’t have to react to the participant.

Pipilotti Rist

Worry Will Vanish Horizon, 2014

Audio video installation, music by Anders Guggisberg

Hauser and Wirth, photo by Alex Delfanne

Myth: All art is interactive art

Nuh-uh: “Normal” art doesn’t require the participant to engage for the art to “work”.

Thomas Struth

Art Institute of Chicago II, Chicago


Chromogenic print, Diasec mounted, 136.8 × 175 cm

Edition of 10

Myth: Games are interactive art

Noperoo: Games tend to focus on moving through a story, or developing a skill rather than enhancing engagement through interaction.

Some games can be seen as interactive art, and some interacive artworks have game-like elements but they are not the same thing.

Interactive art tends to be much simpler and more explorative.

Class policy: Don’t make a game. Take game dev to do that.

Rand Miller, Robyn Miller

Myst (1993)

Video Game

MOMA (link)


  • Interactive art involves the audience in order to create the complete experience.

  • Interactions have to be designed.

  • Affordances are the action possibilities of your artwork.

  • Affordances can relate to hardware or software

  • Hidden affordances can lead to engagement (when done well).

  • Don’t make a game.

Let’s just look at some of the interactive artworks again…


Kerry Simpson


Glass and sound (now movement) activated lighting

Ainslie Avenue, Canberra

(link) CC BY-NC 2.0


Yu Zhang



(link), (paper)), (video)

Strike on Stage

Chi-Hsia Lai and Charles Martin


Computer video, graphics, vision, audio

(link), (paper), (performance)

further reading/watching

Shiffman on Objects

MDN article on Objects

Don Norman- The Design of Everyday Things (available in ANU Library)

Worst Volume Controls

Zach Lieberman