The programming environments most commonly used for creative coding are Processing, P5.js, and vvvv. In this blog I’d like to explore each environment, and in so doing, provide examples for all that creative coding can encompass.
The difference between Processing and P5.js is that processing’s language is based in java (though greatly simplified), whereas p5.js is in javascript with the key difference between the two being that the former is built primarily for independent applications, whereas the latter is made for the web. (cf. Geeksforgeeks 2024) P5.js is meant to be used directly in the web browser.
Fig. 1: Narrative 2.0 by Matthias Dittrich, a Processing sketch visualizing music. (src: https://www.matthiasdittrich.com/projekte/narratives/visualisation/index.html)
Processing was first released in 2001 as an open source project to teach programming with instantaneous visual feedback. It has since grown and has become a valuable tool with its own implementation, such as in the simplified programming language Ruby -(https://ruby-processing.github.io/about/) or with the general-purpose scripting language Clojure (https://github.com/rosado/clj-processing) It has also been connected to third party libraries for the purpose of accomplishing more complex tasks, such as drawing in 3D (http://py.kantel-chaos-team.de.s3-website-us-east-1.amazonaws.com/13gr3d/), reading XML (https://contribs.processing.org/reference/XML.html), connecting to an Arduino (https://www.arduino.cc/education/visualization-with-arduino-and-processing/) and interfacing with other Application Programming Interfaces. (cf. Pearson 2011)
Fig. 2: Processing Interface
Fig. 3: Sketch created with p5.js (src: https://p5js.org/sketches/2174234/)
P5.js is a javascript library for creative coding available online under the URL https://editor.p5js.org/. It could also be run locally by downloading their library. (https://p5js.org/download/) From the get-go it can interface with text, sound, video, and gain access of your camera. Like processing, it has a simplified syntax, which makes it easy to learn, lets you see in real time the changes in your code by visually displaying the manipulations in your code. (geeksforgeeks 2024)
Fig. 4: p5.js Interface
Other free notable contestants for code-based creative coding programs are Context Free Art (https://www.contextfreeart.org/), OpenFrameworks (https://openframeworks.cc/download/), and Structure Synth (https://structuresynth.sourceforge.net/learn.php).
vvvv is a node-based creative coding framework as old as Processing – first created in 2002. Like Processing, it is used for data visualization, interaction-design and generative-design, with also added VR integration and machine learning. There are open-source libraries of nodes available for downloading to the software. The coding languages making up the nodes can be written in plain C# ir F#. vvvv calls their generative process “live-programming” – you can make realtime changes to the output by applying changes to the nodes. (TheGrayBook n.d.) As the main homepage of vvvv states: “There is no need to write any code, unless you really want to.” (Visual Programming n.d.)
Fig. 5: vvvv Interface
Other node-based creative coding applications worth mentioning are Cables (https://cables.gl/), Isadora (https://troikatronix.com/), Max (https://cycling74.com/), Jitter (https://cycling74.com/products/jitter), Pure Data (https://puredata.info/), Touchdesigner (https://derivative.ca/), Vuo (https://vuo.org/), and NodeBox (https://www.nodebox.net/).
References:
https://www.geeksforgeeks.org/difference-between-java-and-javascript
https://www.visualprogramming.net
https://www.geeksforgeeks.org/p5-js
https://thegraybook.vvvv.org/reference/getting-started/cc/introduction-for-creative-coders.html
Pearson, Matt: Generative Art. 2011
