Creative Making: Design and Coding Visuals (Autumn 2019/20)

Tutor: Irene Fubara-Manuel
Office Hours by appointment: Thursday, 12:00-1:00
Tutor email: [email protected]
UAL CCI Slack: @Irene Fubara
Session Times: Thursday 1.30-5.30 - Slot 2
Location: CCI 5th Floor Block B

Course Webpage
Please visit the course page weekly for slides and updates on presentation schedules.

Introduction

How can we make art using code? In this module, we explore together techniques needed to draw and control pixels on screen. We will use libraries such as p5js, a popular library for creating graphics in a browser. Together, we will tour the basics of the JavaScript language including functions, data structures and conditional statements and objects to draw graphics and images screen. From there, we will look more advanced techniques such as image processing, video, sound, text manipulation, mathematical animation, and data visualisation using data from files and online sources like the public APIs.

Learning Outcomes

On completion of this unit you will be able to:

Demonstrate a basic awareness of the JavaScript language to create online interactive applications (Technical Competence)
Exhibit fluency in fundamentals of computationally driven video, image and sound processing (Technical Competence)
Identify and research creative computational problems to arrive at solutions working independently (Research)
Experiment with a variety of visual algorithmic techniques to create original art work (Experimentation)

Creative Project Brief

Create a portfolio of three programs with a cohesive design language or theme.

Your final portfolio must consist of any three of the following:

A simple video game;
A program controlling video playback and basic video filters;
Animation using polar coordinate systems;
Simple patterns found in nature such as oscillation and waves;
A data visualisation integrating public APIs.

Assessment Type

Coursework 100%, consisting of:
Class Participation - 10%:

Engagement in class activities, evidenced by asking and answering insightful questions.

Process Log- 10%:

Weekly documentation of class reflections, research process, and experimentations.
You should upload your weekly class assignments on this blog.
Include your hand-drawn sketches, videos, images, texts, or any material that you are referring to.

Research Presentation - 20%:

5-7 minute student presentations on an artist, collective, movement, or design philosophy that mixes computation and art.

Portfolio - 60%:

A collection of original art works containing three p5.js sketches in the formats mentioned in the project brief.
250-300 words synopsis describing and contextualising your portfolio.
An annotated bibliography with 3 - 5 academic references.

Guidelines:

Class Participation:

There are no wrong or right answers in class discussions.
Prepare for each class by completing your core readings.
A good way to engage with reading materials is to create three open-ended questions that you can ask in class.
We will collectively create rules of engagement for participation in the first session of this module. We will respect these rules for the course of the module.
Each workshop begins and ends with discussions of our creative work. Give constructive feedback. Be generous with your information. Is there something you would do differently? Why and how?

Process Log:

You should log your development and production process in a blog hosted on GitHub Pages, WordPress, Wix, or Tumblr. Use the best method suited to your workflow.
It is important that you document your assignments, challenges you faced in making your code work and how you resolved them.
Highlight when you are addressing subjects discussed in class, projects that inspire you, your experimentations and research through tags. These can be #inspiration, #research, #challenges, or #assignments.
This is your space to reflect and express yourself. It is your digital sketchbook. Decorate your blog however you choose, use an informal tone, scan your drawings, use memes --- so far as the content is intelligible, organised, and shows critical engagement with content of the module.

Research Presentation:

Contextualise the chosen subject, within the proper historical, political, cultural, and artistic environment.
Illustrate with videos, images, and text, the key pieces in the subject's portfolio.
Highlight the tools, processes and motivations of the subject.
Expand on how or why this subject speaks to you.
Bring 2-3 questions from your research that we can discuss in the seminar.
Submit your presentation as a PDF of your slides.
Refer to this list of Women in New Media Art if you do not know where to start your search for artists.
You can also choose an artist that fits the theme of the seminar.

Portfolio:

Your final portfolio must have a cohesive design language/aesthetic, inspiration or theme that you have researched and critically reflected on.
Your project files must be submitted as an Open Processing profile.
Your portfolio submission must have a title. Place this as the first heading of your "README" file.
Evidence of your critical engagement should be demonstrated in a 250-300 words "README" file that:
- introduces your portfolio;
- outlines the format of your sketches (ie. game, data visualization, pattern in nature... etc);
- explains your themes and motivations;
- Place the links to your Open Processing profile at the bottom of your README file.
Evidence of appropriate research should be demonstrated in the 3-5 academic sources in your annotated bibliography.
- Each source must be summarized, explaining its connection to your theme.
- Use this structure if you are unsure how to approach the annotated bibliography:
  - Introduce the source (article, book, essay): What is the text about? What are the writer's main arguments or contributions.
  - Explain how the source fits into your project: What did you take away from reading this article? Do you agree or disagree with some of the writer's arguments? Why do you agree/disagree? How did/will you incorporate the information into your project.
- Summaries should be between 200-250 words for each reference.
- Your citations must use the Harvard author-date style.
  See the library guide for more on academic referencing.

SUBMISSION/HAND-IN DETAILS AND DEADLINES

Portfolio hand-In date & time: Thursday 30/01/2020 by 4pm
In class presentation: 30/01/2020

Hand-in checklist:

SUBMIT ONE PDF FILE TO MOODLE COMBINING THE FOLLOWING:
IMPORTANT: Follow this guide to combine your Microsoft Word and PDF files in Adobe Acrobat Pro
Adobe Acrobat Pro DC is available on the computers in the CCI Lab.

In-class presentation.
You can also submit your supporting speaker notes.
Process log: Export of your blog AND link to blog.
Annotated bibliography.
250-300 word synopsis.
Three P5js sketches: With links to p5 Editor sketches or Open Processing profile. Place a comment block on the top of your code to highlight if is a game, video playback, animation, patterns found in nature, or data visualisation.
The links to your process blog and p5js sketches should be placed at the bottom of the 250-300 word synopsis introducing your portfolio.

If you are not submitting using the p5js editor, ensure that you upload your project onto GitHub and submit the link and the hash at the bottom of your synopsis:

GitHub link: https://github.com/tokinifubara/Creative-Making
hash: d47fec88b3b657504c7155f7cf694ad217696154

Click this link to see an image of where to find the hash for your upload.

For more on submissions formats see the templates provided in here or the "SubmissionMaterials" file in the "Course Materials" file on Moodle.

Ensure all links are correct and active before submission.
If you have any difficulties in submitting work contact: [email protected] in advance of the hand in date.

Module Organization

Teaching Modes	Time	Activities
Seminars	2 hours	Lecture, student presentations, group discussions
Workshops	2 hours	Demonstration, group critique, tutorials
Independent Study	8 hours	Assignments, reading, journaling

Reading List

Core Text:
Reas, C., McWilliams C., & LUST (2010). Form+code in design art and architecture. New York: Princeton Architectural. Available at: https://libsearch.arts.ac.uk/cgi-bin/koha/opac-detail.pl?biblionumber=235960.
McCarthy, L, Fry, B. & Reas, C. (2015). Make: Getting started with p5.js. San Francisco: Maker Media. Available at: https://libsearch.arts.ac.uk/cgi-bin/koha/opac-detail.pl?biblionumber=713374.
Shiffman, D., In Fry, S., & Marsh, Z. (2012). The nature of code.
Shiffman, D. (2015). Learning processing: A beginner's guide to programming images, animation and interaction. Massachusetts: Elsevier. Available at: https://libsearch.arts.ac.uk/cgi-bin/koha/opac-detail.pl?biblionumber=1319451.
Manovich, L. (2010). The language of new media. London : MIT Press. Available at: https://libsearch.arts.ac.uk/cgi-bin/koha/opac-detail.pl?biblionumber=116511.
Paul, C. (2015). Digital art. London: Thames and Hudson. Available at: https://libsearch.arts.ac.uk/cgi-bin/koha/opac-detail.pl?biblionumber=279747.
Shaw, A., 2017. Encoding and decoding affordances: Stuart Hall and interactive media technologies. Media, Culture & Society, 39(4), pp.592–602.
Shabbar, A. (2018). "Queer-Alt-Delete: Glitch art as protest against the surveillance cis-tem." WSQ: Women's Studies Quarterly, 46(3), pp.195–211.
Harvey, A., & Michaël, S. (2006). Real-time Art Manifesto. Available at: http://www.tale-of-tales.com/tales/RAM.html.

Recommended (Optional) Text:
Thomas, F. & Johnston, O., (1995). The illusion of life: Disney animation. New York: Hyperion.
Colson, R., 2007. The fundamentals of digital art, Lausanne: AVA Academia.

Weekly Schedule

Week 1

Seminar: createCanvas(): Design, Art, and Code
\\ Video: "Why I'm an architect that designs for social impact, not buildings" by Liz Ogbu
Workshop: Introduction to p5.js: Drawing with Code

Assignment:

Read: Chapter 1 - "Introduction" in Digital Art by Paul (2015). You can simply skim this chapter.
Chapter 3 - "Draw" in Make: Getting Started with p5.js by McCarthy, Reas and Fry (2016)
Using the principles thought in class: draw a self-portrait;
and make a sketch using the style of an iconic artwork from any design movement (eg: Bauhaus, Memphis, Art Deco, Pop Art).
Find information on design movements in this link.

Recommended Reading:
Chapter 1 & 2 - "Hello" and "Starting to Code" in Make: Getting Started with p5.js by McCarthy, Reas and Fry (2016)

Week 2

Research Presentations
Seminar: What is Code? - Computational Signification
\\ Video: "Code (A Work in Progress)" by Keith Piper (2015)
Workshop: Understanding JavaScript - Syntax, Variables and Loops

Assignment:

Read Chapter 4 - "Variables" in Make: Getting Started with p5.js by McCarthy, Reas and Fry (2016)
Using for loops and variables create two patterns in the style of a common fabric print such as gingham, checkered, herringbone, plaid, or harlequin.
Find more information on common fabric prints here.

Core Reading:
Chapter 2 - "What is Code" in Form+Code by Reas, Williams and LUST (2010)
Chapter 4 - "Repeat" in Form+Code by Reas, Williams and LUST (2010)

Week 3

Research Presentations
Seminar: What Does This Button Do?: Interactivity and Media
Workshop: Conditions, Events, and Media Manipulation

Assignment:

Create a sketch with shapes, fonts, text, or images that respond to a mouse/keyboard event.
Read Chapter 5-7, "Response," "Translate, Rotate, Scale," and "Media" in Make: Getting Started with p5.js by McCarthy, Reas and Fry (2016)

Core Reading:
Pages 55-61, "The Myth of Interactivity" in Language of New Media by Manovich (2001)
Encoding and decoding affordances: Stuart Hall and interactive media technologies by Shaw (2017)

Recommended Reading:
Chapter 5 - "Transform" in Form+Code by Reas, Williams and LUST (2010)

Week 4

Research Presentations
Seminar: Time-Based or Sequential Form: Animating with Code
Workshop: Animating with p5.js

Assignment:

Read Chapter 8 - "Motion" in Make: Getting Started with p5.js by McCarthy, Reas and Fry (2016).
Make a character in p5.js and articulate its limbs or animate a scene
Experiment with some of the patterns you created in previous assignments and make them move.

Core Reading
Chapter 6 - "What is Cinema?" in The Language of New Media by Manovich (2001).
Read pages 296-300 and 314-333.

Recommended Reading:
Chapter 3 - "The Principles of Animation" in Disney Animation: The Illusion of Life by Frank and Johnston (1981).

Week 5

Research presentations
Workshop: Let’s Make Games
This session builds on everything we have learned so far in the course to create games. We will learn about creating functions, arrays and constructor functions. We will spend our time workshopping our ideas, designing and prototyping our games.

Please research online games and bring your favourite to share in class. We will have a 15-minute play session before the workshop.

Assignment:
Research on your ideas for your final portfolio.

What themes/subjects will your programs incorporate? Why? How?
Show your influences and experimentation.

Core Reading: "Real-time Art Manifesto" by Harvey and Michaël (2006).

Recommended Reading:. Chapters 7, 8, 9 "Functions," "Objects," and "Arrays" in Learning Processing by Shiffman (2008).
Ebook available in library: https://libsearch.arts.ac.uk/cgi-bin/koha/opac-detail.pl?biblionumber=1319451.
Please refer to Shiffman's p5.js versions of the code used in the book here: https://github.com/shiffman/LearningProcessing-p5.js.

Week 6

Project Proposal Presentation
No research presentation this week. Instead we will have 5 minute student presentations of their project proposals. While your presentations are not graded it is important that you have images and examples that illustrate your ideas.

Possible Outline For presentation:

Working title of portfolio/projects
Theme of portfolio and motivations for chosing the particular theme
Format of projects (eg. game, data visualization... etc)
Inspiration, examples, and (academic) sources
Methods to execute proposal
Experimentations so far

Week 7

Research Presentations
Seminar: Algorithmic Thinking
Worskhop: Algorithmic Art in p5js

Core Reading:
Chapter 6 and 8- "Parameterize" and "Simulate" in Form+Code
"Queer-Alt-Delete: Glitch Art as Protest Against the Surveillance Cis-tem" by Shabbar (2018)

Recommended Reading:
Chapter 8 - "Cellular Automata" in The Nature of Code by Shiffman (2012). Chapter 4 - "Creative Priorities for Coding" in The Fundamentals of Digital Art by Colson (2007).

Assignment:
Read - Chapter 3 "Oscillation" and 8 "Fractals" in The Nature of Code by Shiffman (2008). p5js port

Using the mathematical principles (sin and cos) taught in class, create patterns.
Create a terrain using perlin noise.

Week 8

Research Presentations
Seminar: The Politics of Data
Workshop: Working with Data: On APIs and Data Visualization

Assignment:
Read: Chapter 12 - "Data" in Make: Getting Started with p5.js.

Create a simple data visualisation. Experiment with the style and data files from Form+Code and Generative Design website.

Core Reading:
Chapter 7 - "Visualize" in Form+Code
Chapter 3 - Only read the section "Database Aesthetics and Data Visualization" in Digital Art by Paul, C. (2015).

Recommended Reading:
Chapter 3 - "Data into Art" in Fundamentals of Digital Art by Colson (2007)

Week 9

Seminar: Video Screenings: A selection of talks, short films and documentaries
Workshop: Exploring p5 Libraries, HTML and CSS

Did you find a video on coding and design you really want to share? Did you make a video on coding and design you really want to share? Bring it to this session.

Assignment:
Experiment with earlier works to see how you can expand on them to create your programs for your final portfolio. You will need to bring your experimentations to next week's class.