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

Casey Reas - Processing - 2008

Casey Reas – Processing – 2008

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 paper 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?

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
3JSplayground WEBGL threejsplaygnd.brangerbriz.net/
Dev Art with Google devart.withgoogle.com
Diana Lange (Processing) www.diana-lange.de

Creative Code Student Blogs

Previous years student blogs

 

 

Week 1

Creative Code 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

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 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.

 

Audio and beat reaction No. 2 | Processing from Diana Lange on Vimeo.

 

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

Resources

Week 2 Deliverables

  • Explore source code of examples files within Processing and @  http://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

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

Unreal Engine 4 is a suite of integrated tools for game developers to design and build games, simulations, and visualizations.
– https://www.unrealengine.com/

David Argue & Alex Love - "Game Space" explorations - 2015 - http://unrealengine4design.tumblr.com/ David Argue & Alex Love – “Game Space” explorations – 2015 – unrealengine4design.tumblr.com/%5B/caption%5D

Open Unreal and start with the template created for this session located in the “CODE” folder on the “Student Shared” server.

 

Resources

  • Unreal Video Tutorials: https://www.youtube.com/playlist?list=PLZlv_N0_O1gaCL2XjKluO7N2Pmmw9pvhE
  • Blueprint reference: https://docs.unrealengine.com/latest/INT/BlueprintAPI/

 

Week 4 Deliverables

  • Explore the example scene
  • Create geometry using the “blueprint” examples..
  • Update your blog with a minimum of 3 experiments using Unreal Engine .

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

You will presenting in an exhibition type environment on the studio computers. Final handin 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 main coding concept you have used in its creation.

Alex Love - 2014 - http://alexlove-creativecoding-2014.blogspot.co.nz/ Alex Love – 2014 – alexlove-creativecoding-2014.blogspot.co.nz/%5B/caption%5D

Week 5 Deliverables

  • Continue to develop and refine your 4 final works for handin and presentation .
  • Update your blog with final 4 works. Each will have a title and a paragraph outlining the core coding concept you have used.
  • Use dropbox links to host files, 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.

ExhibitionExhibition

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/%5B/caption%5D 

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)

 

Fab Lab

Sign up for About Fab Lab tour, An introduction to the culture, equipment and processes available to you at Fab Lab Wgtn. Please wear covered shoes and bring a student ID card or similar along with you www.fablabwgtn.co.nz/events-activities

 

3D modelling for Processing

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

Toxiclibs: http://toxiclibs.org/

iGeo: http://igeo.jp/

 

 

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

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

 

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 (Windows only)

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

 

Touchdesigner (Windows only)

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

http://mattinteractive.tumblr.com/

mattinteractive.tumblr.com/

Openframeworks

openframeworks.cc/

openFrameworksでGPUパーティクル

 

Week 7 Deliverables

  • Select your format: 3D Object or Print or Installation or Other*.
  • 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, installation or other*.

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

 

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(). Outputs are what the code creates. eg. Print, object, graphic, sound. 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

Example 3D object workflow

Generate 3D model in Processing > Export STL from Processing > Import STL to 123D Make > Convert geometry to stacked slices > Export plans as PDF > Print PDF

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 123D Make

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

www.123dapp.com/make

 

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(){

}

 

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!

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”

 

 

Week 10

Interim

This week at 2pm we’ll have an “interim” exhibition and critique of your assignment 2 projects. 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.

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?

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.
  • Test your work. Print it out or 3D print/make it or test an installation. Document this test on your blog.

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.

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 others
  • Code experiments
  • Iterations that have led to your final code output
  • 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

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 19, 2016