Week 9: storyboards and interaction design

Yichen Wang

Semester 2, 2023


Week 10 lecture will be pre-recorded and available on echo360!

The rest of this course is focussed on the major project.

it’s up on the course website

It’s worth 40% of the your final mark, we expect much more effort/polish than for the regular assignments.

inspiration and iteration

In this course we have looked at…

software engineering for artists.

artistic process for software engineers.

Goal: create a compelling and sophisticated interactive artwork

with high assurance of success!

Where does inspiration come from?

René Magritte

Les Merveilles de la nature (1953)



iteration is building upon ideas through trial and error

this is an immensely valuable process when you’re stuck with your ideas

René Magritte

Les Chants de Maldoror (1948)


Benedikte Wallace

Lectures on Creative Computing


Chuck Close

Inspiration is for amateurs. The rest of us just show up and get to work. If you wait around for the clouds to part and a bolt of lightening to strike you in the brain, you are not going to make an awful lot of work. All the best ideas come out of the process; they come out of the work itself. - Chuck Close

Kent (1967-8)

John Cage

In Zen they say: If something is boring after two minutes, try it for four. If still boring, try it for eight, sixteen, thirty-two, and so on. Eventually one discovers that it’s not boring at all but very interesting.

–John Cage, 1961 (Silence)


what’s the right way to make art?

let’s look at some examples from other creative fields

graphic design

the sketch

VFS Digital Design


web design

the "wireframe"

film making

the "storyboard"




the animatic

what do all these processes have in common?

“sketching with code”

Casey Reas, one of the creators of Processing (the inspiration for p5) recently wrote an article describing the aims of the project

One idea was the synthesis of graphic design with computer science, combining the visual principles of design with ways of thinking about systems from computer science. We also wanted to share a way of working with code where things are figured out during the process of writing the software. We called this sketching with code. - Casey Reas, A Modern Prometheus

a code art process

the reason for Processing (and therefore p5) was to open coding to the quick sketch processes from art and design

instead of taking days to create a polished progam, these tools allow coders to rapidly try many things and versions

some examples

Natalia Stuyk

Zach Lieberman

Manolo Gamboa Naon

Helena Sarin

Espen Kluge

if p5 is like sketching, why draw?

just like artists/designers use pencil and paper as well as photoshop, coders can still benefit from thinking through ideas on paper

your sketches can be a combination of these (animations, interactive interfaces, artworks, designs, etc.)

this is why your week 9 pre-lab submission is a “storyboard” for your major project

User Experience Design

We are making “storyboards”, but that isn’t because your MP is supposed to be a “story”.

Viewers of your artworks will be having an experience, your job is to design this experience.

The storyboard could be seen as “the story of a viewer experiencing my artwork”—what does the viewer see and do?

In computing, this process is called “user experience design” (UXD)

art theory: hooks

What is a hook?

How can an artwork hook a viewer? (and not a fish).

How can we map out an experience as a trajectory?

Is art evil?

how we get hooked

Nir Eyal



trigger: addressing the viewer directly

James Montgomery Flagg

I Want You



Photo by Brett Jordan on Unsplash

How do you hail the viewer?

Don’t assume a viewer wants to interact!

Your job is to grab their attention.

(Hopefully without being too annoying…)


Nir Eyal



What action do you want the viewer to perform?

And how are they supposed to know what to do?

This relates to affordances: the action possibilities!


Nir Eyal



What is the reward for your viewer?

Advertising promises us that it can deliver on our needs as consumers.

According to motivation psychologists, we are all motivated by the need for one (or more) of:

  • power
  • achievement
  • affiliation
  • intimacy

source: three needs (David McClelland) + intimacy (from Dan McAdams)

need for power

need for achievement

need for affiliation

need for intimacy


Nir Eyal



Marina Abramovic

The Artist is Present


3 month performance, Museum of Modern Art NY

How do we do this in p5?

What are your affordances? (hails)

What are the actions?

What are your rewards?

What will the user invest in your artwork?

This is a different way of framing interaction than we discussed in week 5!

Is it a more evil way? 😈

art theory: iteration and evolution

Let’s talk again about iteration

and how it can be encoded within an artwork…

and how iteration can be made interactive and part of the viewer’s experience!

Tony Curran: Hot Attention Machines

inspired by pixels…


pixels images taken from google


developing a project

Tony Curran (b. 1984)

Attention Machines


oil on linen

Tony Curran (b. 1984)

Hot Attention Machines


Screen print on BFK Rives at Megalo Print Studio, Canberra

Tony Curran (b. 1984)

Pixels in twelve #2


oil on linen

Using evolution and interaction together

Can an interactive artwork evolve itself?

Check out: PicBreeder

William Latham et al.

Mutator VR


interactive evolutionary artwork in VR link

Mutator VR

further reading/watching

Nir Eyal Hook Model


Nature of Code: Evolution of Code

Dan Shiffman: Genetic Algorithms

Evolutionary Art and Computers

Benedikte Wallace

Lectures on Creative Computing



Live coding time!

  • Arrays and objects: sally
  • “Coherent interaction” ?

Week 10 lecture will be pre-recorded and available on echo360!