Procedural Design & Toxiclibs.JS

Real World Procedural Design

• Procedural design is art or design created from code. It is a form of generative art where algorithmic functions are used to create a combination of random and predefined media outcomes

• Learning procedural design can be confusing and hard work with problem solving being the biggest issue. So its important to see some real world examples of procedural design in action.

• http://wikis.lib.ncsu.edu/index.php/Procedural_Design

Deutche Bank Media Wall [Universal Everything]

http://mediatectureblog.com/inspiration/deutsche-bank-media-wall

VA For Ever [Universal Everything]

http://universaleverything.com/276

“unnamed soundsculpture” by Daniel Franke & Cedric Kiefer / Kinect

http://www.creativeapplications.net/processing/unnamed-soundsculpture-by-daniel-franke-cedric-kiefer-kinect-processing/

Extending Processing

• Processing is designed to be simple• It can quickly become limiting with the basic in

built features• Processing is also designed to be extended

with libraries (or libs)• A list of libs can be found here:

http://processing.org/reference/libraries/

Libraries

• Adding a lib is easy• libraries must be installed in a folder named

'libraries' inside the 'sketchbook' folder.• Import the lib:

import toxi.math.waves.*;

Toxiclibs

• Show reel http://benfry.com/writing/archives/category/processing

• All of the previous examples are possible in Processing with the help of toxiclib

• http://hg.postspectacular.com/toxiclibs/downloads/

ToxicJS

• http://haptic-data.com/toxiclibsjs/• Toxiclibs.js is an open-source computational design

library ported to javascript by Kyle Phillips originally written by Karsten Schmidt for Java and Processing. Examples of the original library can be found at http://toxiclibs.org

• Toxiclibs.js works great with Canvas, with SVG or any ordinary DOM element. Examples below pair with such fine libraries as: Processing.js, Three.js, or Raphael.js for SVG.

ProcessingJS & ToxicJS Exampleshttp://haptic-data.com/toxiclibsjs/

Resources

• http://toxiclibs.org/2011/05/tutorials-galore/

• https://github.com/shiffman/The-Nature-of-Code/tree/master/chp5_physicslibraries/toxiclibs

•