Code
197.119 Coding for Creative Practice

In this studio paper students will be introduced to the fundamentals of computer programming as an art and design tool. Students will acquire basic knowledge and fundamental techniques for the creative uses of coding across a range of art and design contexts.

Week 1 2 3 4 5 6 7 8 9 10 11 12 Blog Roulette

Staff

 

Adrien M & Claire B

Adrien M & Claire B – www.am-cb.net/

 

Don’t just buy a new videogame; make one. Don’t just download the latest app; help design it. Don’t just play on your phone; program it. No one’s born a computer scientist, but with a little hard work and some math and science, just about anyone can become one.
– Barack Hussein Obama

Learning outcomes

Students who successfully complete this course should be able to:

  • Show a basic knowledge of the fundamentals of computer programming and its application to art and design. (Graduate Profile: Understanding – Matauranga A3)
  • Demonstrate enquiry into the creative uses of coding for a specific area of art and design. (Graduate Profile: Creativity – Toi B1)
  • Reflect on and evaluate their own work and the work of others in a collaborative environment. (Graduate Profile: Creativity – Toi C1)
  • Competently utilise iterative processes in computer programming to generate art and design outcomes. (Graduate Profile: Virtuosity – Mohio D3)
  • Source and utilise information in a variety of forms and contexts to support their work process. (Graduate Profile: Understanding – Matauranga E4)

What is Creative Coding?

Creative coding is different to traditional programming systems in that the goal is to create something expressive instead of something functional (though this is not to say that creative coding can not be functional).

Generative art, glitch art, information visualisation, procedural generation are all different types of creative coding – which has become a household term for describing artworks that are articulated through code.

The Art of Creative Coding

DevArt

Welcome to Digital Revolution from Barbican Centre on Vimeo.

Creative Coding Sources, References and Inspiration:

Dimitre Lima dmtr.org/mtv_rewind/
Ben Fry processing.org/exhibition/works/001/index_link.html
FIELD & Universal Everything www.field.io/project/communion
Aaron Koblin www.aaronkoblin.com/work/flightpatterns/
Constanza Casas, Mark C Mitchell and Pieter Steyaert vimeo.com/25224777
Mark McKeague markmckeague.com/work/city-symphonies/
Florian Jenett florianjenett.de/one-perfect-cube-making-of/
Lia www.proximityofneeds.org/
Josh Nimoy balldroppings.com/js/
Michael Hansmeyer www.michael-hansmeyer.com/projects/project4.html
Petr Novikov, Inder Shergill and Anna Kulik www.stonespray.com/
Mary Huang www.rhymeandreasoncreative.com/portfolio/index.php?project=continuum
Jer Thorp blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data
Vladimir Todorovic vimeo.com/10154340
Daniel Franke & Cedric Kiefer wearechopchop.com/%E2%80%9Cunnamed-soundsculpture%E2%80%9D/
NYTimes R&D Lab nytlabs.com/projects/cascade.html
Danny Franzreb (Taobot) www.taobot.com/projects/various/michael-fakesch-vidos
Ryan Alexander vimeo.com/9636677
Michael Chang users.design.ucla.edu/~mflux/manifest/
William Ngan processing.org/exhibition/works/pond/index_link.html
The Mill www.themill.com/
Robert Hodgin roberthodgin.com/cymatic-ferrofluid/
Robert Hodgin roberthodgin.com/additionsubtraction/
Robert Hodgin www.flight404.com/blog/
Marcin Ignac marcinignac.com/
Robert Hodgin roberthodgin.com/stippling/
Bloom bloom.io/
FIELD & Universal Everything www.field.io/project/deutsche-bank-hong-kong
Greg Brunkalla vimeo.com/35674495
Dominic Harris & Cinimod Studio www.creativeapplications.net/featured/ice-angel-by-dominic-harris-from-snow-angels-to-angelic-forms/
Robert Hodgin www.flight404.com/blog/?p=325
Robert Hodgin www.flight404.com/blog/?p=472
Silvio Paganini www.youtube.com/watch?v=yQ7BIgLQlcI
Dofl Yun vimeo.com/53767646
Momo the Monster vimeo.com/24445851
Jesse Lucas vimeo.com/34511105
Eddie vimeo.com/20051558
lukasz vimeo.com/23687352
lukasz vimeo.com/33750831
lukasz vimeo.com/26675292
Marshmallow Laser Feast marshmallowlaserfeast.com/
James George vimeo.com/43621158
Jonathan Minard vimeo.com/40058384
James George & Alexander Porter vimeo.com/40058384
James George vimeo.com/41232022
Scott Cramer vimeo.com/46860527
James George vimeo.com/39458355
Mike Heavers vimeo.com/49045688
fishking vimeo.com/46735534
Owi Mahn vimeo.com/40998768#
smallfly vimeo.com/46942815
Silo468 www.creativeapplications.net/openframeworks/silo468-permanent-light-installation-in-helsinki/
Boris Müller processing.org/exhibition/works/hinundher/index_link.html
lia processing.org/exhibition/works/withouttitle/index_link.html
JOACHIM SAUTER www.joachimsauter.com/en/work/rain.html
Interrupt collective (Acute Self) vimeo.com/48927769
Casey Reas reas.com
Chris Milk www.thejohnnycashproject.com
Digital revoloution review www.creativereview.co.uk/cr-blog/2014/july/digital-revolution
resn www.resn.co.nz/#/work/featured
Three.js Playground threejsplaygnd.brangerbriz.net/
Dev Art with Google devart.withgoogle.com
Diana Lange (Processing) www.diana-lange.de
Nahuel Coppero – Creative coder, generative artist hinecsoft.com/
Bjork.com – Background is Three.js www.bjork.com/
Dwitter – It’s like Twitter but code! www.dwitter.net/
It’s Geometrical Tumblr Blog itsgeometrical.tumblr.com/
Bees and Bombs Tumblr Blog beesandbombs.tumblr.com/
Marpi marpi.pl
threejs.org – Stuff made with three.js threejs.org/

Creative Code Student Blogs

Previous years student blogs

 

 

Week 1

Coding for Creative Practice Brief

197.119 Coding for Creative Practice – Assignment 1 Brief

 

Three.js

“the threejs_playGnd is a digital literacy (agency) artware + ntro to three.js/webGL (interactive/generative 3D in the browser) which is modeled after an experimental new-media art ethic.”
– threejsplaygnd.brangerbriz.net/nfo/

1260x301xcropped-Screen-Shot_webgl.png.pagespeed.ic.yYY0TBSv68-banner

Resources

Examples from the Playground

Examples of Three.js in the wild

Week 1 Deliverables

  • Create a blog where you will upload your work.
  • Submit your name and blog URL to this form.
  • Update your blog with a minimum of 3 experiments from the Three.js Playground. Use links/screenshots/movies.
  • Examine an artist from the “Creative Coding Sources, References and Inspiration” list above (or find your own) and describe: Who they are, What they do and How they do it.

All* work uploaded to your blog.
*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 2

Casey Reas - 2012

Casey Reas – 2012

The Nature of Code: Simulating Natural Systems with Processing

Daniel Shiffman.
Published December 2012. PDF, Web, Paperback.
Visit the Nature of Code website.How can we capture the unpredictable evolutionary and emergent properties of nature in software? How can understanding the mathematical principles behind our physical world help us to create digital worlds? This book focuses on a range of programming strategies and techniques behind computer simulations of natural systems, from elementary concepts in mathematics and physics to more advanced algorithms that enable sophisticated visual results. Readers will progress from building a basic physics engine to creating intelligent moving objects and complex systems, setting the foundation for further experiments in generative design. Subjects covered include forces, trigonometry, fractals, cellular automata, self-organization, and genetic algorithms.

Visualizing Data: Die Bürgschaft | Processing from Diana Lange on Vimeo.

Diana Lange @ OpenProcessing

Resources

Examples

Week 2 Deliverables

  • Explore source code of examples files within Processing and @  www.openprocessing.org
  • Update your blog with a minimum of 3 experiments using Processing. Use links/screenshots/movies, with notes.

All* work uploaded to your blog.
*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

 

Week 3

Quartz Composer is a node-based visual programming language provided as part of the Xcode development environment in Mac OS X for processing and rendering graphical data.
– https://en.wikipedia.org/wiki/Quartz_Composer

Introduction to Quartz Composer from John park on Vimeo.

_1024_ParticleWarfare from 1024_experimental on Vimeo.

GEOPING installation – WGTN LUX 2011 from Johann Nortje on Vimeo.

iniTree 0.2.0 from inimart on Vimeo.

Resources

Intro to FabLab

Week 3 Deliverables

  • Explore source code of examples files within Quartz and explore custom patches.
  • Update your blog with a minimum of 3 experiments using Quartz Composer. Use links/screenshots/movies, with notes.

All* work uploaded to your blog.
*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 4

Coding in 3D

Unity offers a platform for creating beautiful and engaging 2D, 3D, VR, and AR games and apps. A powerful graphics engine and full-featured editor enable you to realize your creative vision fast, and deliver your content to virtually any media or device.
unity3d.com/

 

Unity Project Example Files

 

Week 4 Deliverables

  • Explore the example scenes
  • Create interactive spaces using the examples
  • Update your blog with a minimum of 3 experiments.
    Use links/screenshots/movies, with notes.

All* work uploaded to your blog.
*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 5

Next week, you will presenting in an exhibition type environment on the studio computers. Final hand-in and presentation will consist of 4 developed and refined examples of work from each piece of software you have been introduced to. Each work will have a title and a paragraph outlining and identifying the coding concepts that are used in its creation.

Resources

Moving Three.js outside the playground, for portability and mouse input (docs.google.com/document/d/1BQRYH-wxh5mhspdgx7nIlfF9jRIxMDGI-myWRtiOZrE/edit?usp=sharing)

 

Week 5 Deliverables

  • Continue to develop and refine your 4 final works for hand-in and presentation .
  • Update your blog with final 4 works. Each will have a title and a paragraph outlining the coding concepts you have used.
  • Practice loading up your code experiments, as next week we will be exhibiting and presenting in the lab.

All* work uploaded to your blog.
*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 6

Hand-in, Exhibition, Presentation and Feedback.

This week you will present your best explorations from weeks 1–5, one exploration from each piece of software: Three.js, Processing, Quartz Composer, and Unity.

Be prepared to show your work on your own laptop or on one of the iMacs – prepare for quick turnarounds between exhibiting each experiment by having them pre-loaded where possible.

ExhibitionExhibition

Assessment Criteria

Show a basic knowledge of the fundamentals of computer programming and its application to art and design. (Graduate Profile: Understanding – Matauranga A3).
Creative and diverse exploration and iteration shown within the weekly coding experiments.

Competently utilise iterative processes in computer programming to generate art and design outcomes. (Graduate Profile: Virtuosity – Mohio D3).
Creativity and virtuosity shown in final four coding experiments.

Source and utilise information in a variety of forms and contexts to support their work process. (Graduate Profile: Understanding – Matauranga E4).
Research (into other artists, coding concepts, toubleshooting), documentation (of process, iterations, source code), annotation (explaining how the code generates the outcome).

Week 6 Deliverables

  • Ensure you blog is up to date with process work, source code posted or linked and your final context/potential documentation clearly labeled.

All* work uploaded to your blog.
*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 7

Code that Creates

Assignment 2 Brief: Code that Creates

Footfalls (2006, by Tmema [Golan Levin & Zachary Lieberman]) is an interactive audiovisual installation in which the stomping of the visitors’ feet creates cascading avalanches of bouncy virtual forms. www.flong.com/projects/footfalls/

Precedent works

 

Zach Lieberman – School for Poetic ComputationWebsiteInstagram

 

Key terms when searching for inspiration

  • Generative
  • Installation
  • Parametric
  • Data Visualisation
  • Digital Fabrication

Creative Art Principles

Contrast

Movement (visual flow)

Balance (symmetry and asymmetry)

Scale (proportion)

Perspective (depth)

Figure Ground (white space, negative space)

Rhythm (repetition)

Datum (origin, reference plane)

Working Spaces

Fab Lab

Fab Lab Wgtn is in block 11 on campus and has a range of technology which might be useful in this assignment. We recommend that you attend the ‘About Fab Tour’ to get an introduction to the space as soon as possible. Book at: www.fablabwgtn.co.nz/events-activities

3D Workshop

The 3D Workshop is in block 11 on campus and has a range of tools for student to use, including wood- and metal-working tools. Check the CoCA Clinics Stream page for information on induction times.

 

3D modelling for Processing

These are 3D libraries for Processing, they can be installed in Processing through the menu:
Sketch > Import Library… > Add Library…

HE_Mesh: http://hemesh.wblut.com/

Toxiclibs: http://toxiclibs.org/

Printing out vectors in Processing

Explore PDF examples in

Screen Shot 2014-09-08 at 11.46.09 AM

Screen Shot 2014-09-08 at 11.45.44 AM

Kinect and Processing

shiffman.net/p5/kinect/

Open Kinect for Processing Demo from shiffman on Vimeo.

 

Audio in Processing

Screen Shot 2014-09-07 at 11.00.45 pm

Minim: http://code.compartmental.net/minim/

Minim example: Delay

Reactive Processing sketch with Minim from Marta Verde on Vimeo.

 

VR with Unreal Engine

docs.unrealengine.com/latest/INT/Engine/Editor/VR/

 

Touchdesigner

Kinect with Touchdesigner http://www.derivative.ca/wiki088/index.php?title=Kinect

http://mattinteractive.tumblr.com/

mattinteractive.tumblr.com/

TouchDesigner + Kinect tutorial (matthewragan.com/2017/02/01/touchdesigner-yale-working-with-a-kinect/)

Openframeworks

openframeworks.cc/

yasuhirohoshino.com/archives/30

Hype visualization library , useful for data visualization and generative graphics  http://www.hypeframework.org

 

Github repo – NZ data sources

github.com/WikiNewZealand/new-zealand-data

 

Week 7 Deliverables

  • Select your format: 3D Object or Print or Other Experience*.
  • Post your selected format to your blog (clearly state what you’re going to output your code as)
  • Populate blog with precedents. Key search terms: Generative , Parametric, Data Visualisation, Digital Fabrication

*You need to get approval from the staff if you want to do something other (eg; VR, Audio, Animation, App, etc).

All* work uploaded to your blog.

*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 8

This week you must have committed to your chosen output format: 3D Object, Print or Other Experience*.

*Get approval from the staff if you want to do something other (eg: VR, audio, animation, app, etc)

 

What is your workflow?

Start to identify what your workflow might be. Identify inputs, outputs and technology/software.

Inputs are what is used to drive the code. eg. Temperature data, movement, noise levels, random(). Input data might be from an online source (eg. NZ data sources) or from an API (eg. Open Weather Map or Weather Underground). You could also generate your own data just by tracking your everyday behaviour (eg. tracking your wakeup times, tracking the number of times you check your phone). Interaction with the work can also be an input, eg. Moving the mouse is inputting mouse position data, singing a song can be inputting audio data.

Outputs are what the code creates. eg. Print, object, graphic, sound. Consider the materiality of this output and what limitations (and opportunities) are inherent within it.

Technology includes the software you require (for coding, manipulation and/or output) and the hardware required to output, eg. 3D printer, vinyl or laser cutter, printer, projector, speakers.

 

Example print workflow

Input temperature data from thermometer > Generate imagery in Processing > Export PDF from Processing > Print PDF > Mount print onto foam-core board

Example 3D object workflow

Generate 3D model in Processing > Export STL from Processing > Import STL to Slicer for Fusion 360 > Convert geometry to stacked slices > Export plans as PDF > Print PDF on cardboard > Cut and assemble cardboard slices

Example installation workflow

Read proximity data from infrared sensor attached to Arduino > Arduino sends values to Processing > Generate imagery in Processing > Project onto ceiling using a projector

 

Autodesk Slicer for Fusion 360

Slicer lets you turn 3D models into 2D build plans with animated assembly instructions.

apps.autodesk.com/FUSION/en/Detail/Index?id=8699194120463301363&os=Win64&appLang=en

 

Tim’s Processing examples from today:

float[] energy = {10.3, 9.3, 10.4, 7.7, 11.0, 8.7, 9.8, 8.0, 9.5, 8.3};

void setup(){
 size(400,200);
 background(0);
 
 noStroke();
 
 for(int i = 0; i < 10; i++){
 fill(255,128);
 if(energy[i] > 10){
 fill(255,0,0);
 } 
 ellipse(i*50, height/2, energy[i]*10,energy[i]*10); 
 } 
}

void draw(){

}

Tim’s Processing example on reading a .csv file. Gist for code, power data on Google Drive.

TouchDesigner + Kinect tutorial (matthewragan.com/2017/02/01/touchdesigner-yale-working-with-a-kinect/)

 

Week 8 Deliverables

Ensure your blog is up to date with process work, source code posted or linked and your final context/potential documentation clearly labeled.

All* work uploaded to your blog.

*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”.

 

 

Week 9

Open studio time! Use the time to prepare for our interim presentations next week.

At interm presentations (next week) you will present a test output from the workflow that you identified from last week. For example, if you are making a 3D object using stacked slices, you need to bring a test output of stacked slices. This does NOT have to be your own design (or your code’s design), but instead should be a way of testing your chosen method of output.

Week 9 Deliverables

Ensure you blog is up to date with process work, source code posted or linked and your final context/potential documentation clearly labeled.

All* work uploaded to your blog.

*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

Test your output. Print it out or 3D print/make it or test an installation. Document this test on your blog and bring it to class next week for interim presentations.

 

 

 

Week 10

Interim

This week at 2pm we’ll have an “interim” exhibition and critique of your assignment 2 projects in their current state. This won’t be graded but act more as a milestone for this assignment. Use this as incentive to output your code from the computer and as an opportunity to get constructive feedback from your peers and staff. We’ll run this in a similar format to the final exhibition of assignment 1, set up your work for display, write notes and constructive feedback on everyone else’s work and hold discussions.

Interim deliverables

Test output from your chosen workflow – eg. if you are printing posters, bring a test print. If you are outputting 3D prints, bring a 3D print. If you are outputting vinyl stickers, bring stickers. These do not necessarily need to be your own design.

Supporting imagery that shows how your code is progressing – this can just remain on the computer (either in the IDE or on your blog).

corporate-presentation-training-ethos3

 

Entourage / Context

Start producing visuals that depict your code in a context.
Context is the environment or setting something is in and often helps describe function or use.

A typical way of describing a context visually is through adding entourage; animals, plants and people all help give a sense of scale, but also placing your creation into a scene can achieve this too.

The main thing is to communicate what your creation does, what’s it for? where? when?

You can get imagery of people, places, objects, etc to use as entourage by taking your own photos, or by finding them online.

www.archdaily.com/777432/6-websites-for-ethnically-diverse-render-people

immediateentourage.com/

Student examples of entourage:

Other examples of entourage / context:

 

Week 10 Deliverables

  • 5x images showing your creative code in context. These should explore different functions or uses for your project.

Ensure you blog is up to date with process work, source code posted or linked and your final context/potential documentation clearly labeled.

All* work uploaded to your blog.

*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 11

Last class before presentations in week 12!

Check in with your tutors to confirm what your final output will be for presentation in week 12 – do this so that we can accommodate any special space requirements (eg. space for projector, clearing tables, making space to pin up posters).

 

Week 11 Deliverables

Ensure you blog is up to date with process work, source code posted or linked and your final context/potential documentation clearly labeled.

All* work uploaded to your blog.

*Literally everything you have done for this paper should be uploaded to your blog, the complete work, but also any experiments, drafts or tests, both “good” and “bad”

 

 

Week 12

Final exhibition and submissions.

Bring your final code outputs ready to go. We will have 1 hour of set up time before getting started with exhibition at 2pm.

Present your code output and entourage images that show it in context. You may also want to have your blog up so that people can explore your process.

It would also be great if you take the time to fill out this survey about the course so that we can improve it for future iterations, results are anonymous unless you choose to leave your contact details (and even then, they will not be published) – goo.gl/forms/7g84StXEPYTzSstt2

Final Submission Requirements for Assignment 2

Literally everything you have done for this paper should be uploaded to your blog. We will not be taking 3D models or prints so you need to ensure that you document your output thoroughly.

The blog should document:

  • Research into code concepts and the work of other artists (and students)
  • Code experiments
  • Iterations that have led to your final code output
  • Experimental entourage images to explore possible contexts (minimum of 5)
  • A final post that sums up the code output:
    • The source code used to generate the output
    • Documentation (photos, video) of your final print/object/installation
    • Supporting entourage to show your code output in context

The blog should be up to date for presentation at 2pm on Tuesday, but we will give you until 5pm Friday to finalise it as you might want to include photos of it being exhibited.

Last modified: October 17, 2017