Michael McCullough
Semester 2, 2024
assignment 1 —marking is underway.
assignment 2 is out! Get started!
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!
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
javascript has Objects to keep related bits of data together
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
what properties does a Pokemon have?
species
level
hit points
owner
captured
// declare and initialise in one go
let sally = {
species: "Pikachu",
level: 1,
hp: 100,
owner: "Ash",
captured: true
};
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
)
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
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
};
just like with arrays, there are a few main things you want to do with your object
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
.
) syntaxpros: 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"
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"
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
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;
then, you can use it in your code from that point on
if(sally.hat){
// draw a hat, or something
}
for example the color()
function
let magenta = color(220,0,220);
print(magenta);
or createVector()
, or…
let position = createVector(40, 52);
print(position);
// nested objects
let car = {
make: "toyota",
paint: {
colour: "red",
metallic: true
}};
car.paint.colour; // what's the value?
// 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?
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)
a rule of thumb:
don’t be afraid to have an array of objects (and vice versa)
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);
}
};
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
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).
p5.Vector
objectlet 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() {
background(0);
ellipse(position.x, position.y, 40,40);
position.add(momentum);
momentum.add(createVector(0,1));
if(position.y > height - 20){
momentum.y*=-1;
}
momentum.mult(.98);
}
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
Exhibition at Museo Tamayo, Mexico
Nam June Paik
Magnet TV
1965
Modified black-and-white television set and magnet, 98.4 × 48.9 × 62.2 cm
Whitney Museum, New York
Kerry Simpson
1988
Glass and sound (now movement) activated lighting
Ainslie Avenue, Canberra
(link) CC BY-NC 2.0
Chi-Hsia Lai and Charles Martin
2010
Computer video, graphics, vision, audio
Stephen Jones
Cybernetics in Society and Art
Proc. International Symposium of Electronic Art, 2013, p 1–13
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?
An “affordance” is a property of a thing such that it supports an action.
It’s an action possibility.
typing on the keyboard?
using the mouse?
being in front of the camera?
being heard by the microphone?
anything else?
touching the touchscreen?
clicking the buttons?
taking photos of things?
moving the phone around?
taking calls?
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!
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.
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
Nuh-uh: “Normal” art doesn’t require the participant to engage for the art to “work”.
Thomas Struth
Art Institute of Chicago II, Chicago
1990
Chromogenic print, Diasec mounted, 136.8 × 175 cm
Edition of 10
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.
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
1988
Glass and sound (now movement) activated lighting
Ainslie Avenue, Canberra
(link) CC BY-NC 2.0
Chi-Hsia Lai and Charles Martin
2010
Computer video, graphics, vision, audio
Don Norman- The Design of Everyday Things (available in ANU Library)