When you hear the word “creative”, what type of profession comes to mind? Maybe a graphic designer, painter, sculptor, illustrator, or writer? It’s unlikely that you would consider a “programmer” when thinking of creative fields of work. But programmers have the potential to be creative and come up with ideas or concepts that will impact others in positive ways.
We often turn to programmers to solve mathematical-related problems, but the concept of mathematics in programming is what powers programmers to innovate. When you think of mathematics you imagine numbers, expressions, and equations. But what about art, music, or even beautiful visuals? Those numbers and equations that we often view as mundane and overly-formulaic can generate beautiful visuals and music. This article will present dozens of examples of motion graphics and interactive visuals created with computational code, along with some useful references and resources.
Beautiful Motion Graphics Created with Programming Link
First we’ll look at some examples of beautiful and inspiring motion graphics created by programmers. Some of these are audio-reactive whereas others are data visualization.
House of Cards43 by Radiohead44
In Radiohead’s video for “House of Cards”, no cameras or lights were used. Instead, 3D plotting technologies collected information about the shapes and relative distances of objects. The video (directed by James Frost) was created entirely with visualizations of that data.
Free Applications for Creating Visuals with Computational Code Link
- Open Processing82
Share your sketches online.
- Useful Processing Applet Source Codes83
A collection of free Java applet source codes.
- Processing with Eclipse84
If you are an avid Java programmer and have been using Eclipse for your daily routine this would be best way to use Processing, making your workspace comfortable and familiar. Another benefit that Eclipse adds is that you can harness the power of the latest Java IDE.
Quartz Composer Link
Using third-party tools like Effect Builder AE86 and QC Integration FX87 you can turn your Quartz compositions into plug-ins for professional video editing / motion graphics applications such as Apple Final Cut, Adobe After Effects, Apple Motion, etc., without writing a single line of code. Many professional applications like Pixelmator use Quartz Composer on Mac to generate graphics and this is one of the reasons why some graphics processing application are available only for Mac OS X. As you probably guessed, Quartz Composer is only available for Mac OS X. Users of Mac OS X 10.6 or later can utilize OpenCL in Quartz Composers.
- Quartz Composer Programming Guide88
Guide for Quartz Composer.
- Quartz Composer Release Notes for Mac OS X v10.689
Highlights major changes to Quartz Composer in Snow Leopard.
- Quartz Compositions90
Forum dedicated to Quartz Composer users.
- Quartz Composer Tutorials91
Collection of some of the best Quartz Composer tutorials.
- Installing 3rd Party Plug-Ins for Quartz Composer92
Kineme offers plug-ins for Quartz Composer, including audio analysis, particle effects, and Kineme3D which can import 3D Models.
- Futurismo Zugakousaku94
A great collection of Quartz Composer examples.
- Sam Kass Blog95
Quartz Composer examples that use iSight as an input source for creating real-time effects.
- Free Webcam Audio Visualizer
OpenFrameworks97 is a tool for creating interactive visuals, and is widely used among creative programmers. The user interface is simple and similar to that of Processing. Similar to Processing, it uses libraries, but it’s difficult to find third-party libraries and requires knowledge of C++ programming.
NodeBox102 is similar to Processing and OpenFrameworks with the only major difference being the programming language used, which is Python. Although NodeBox has a small number of libraries in comparison with Processing, they are of good quality. NodeBox supports PDF, QuickTime movies, fonts and uses the Mac OS X Core Image library for image manipulations (blend modes, color changes, filters etc). NodeBox is available only for Mac OS X.
VVVV is usually used in large media environments like concerts and art installations for real-time motion graphics, video and audio processing and interactive motion graphics. Unlike Quartz Composer, VVVV comes with audio synthesis, 3D Mesh manipulation, and real-time video synthesis built in. It is a powerful application for generating visuals in real-time, even at very high resolution and high frame-rates.
Another important feature of VVVV is that it can make use of multiple computers behaving in sync. All programming and editing can be done on one server computer, while all client computers execute their respective tasks. You can easily use the CPU and GPU power of each computer to do some amazing effects at a cheaper cost. Since VVVV uses DirectX, it’s only available for Windows.
Strukt has done many projects using VVVV, including this beautiful letter universe installation106.
eMotion is a new free application which can generate real-time as well as offset graphics. It has an awesome text and particle engine which is driven by real-world physics. It is available only for Mac OS X.
Creating Interactive Visuals with Computational Code Link
Here are some examples demonstrating adding interactivity into visuals.
Interactive Projection at GAGA Gallery155119 | Laser tag120
This project uses powerful lasers to virtually in-script graffiti on tall buildings. The laser is tracked and the graphics are projected in real time. Also check out the Eyewriter121 project which uses the same technology for helping physically disabled graffiti artists to once again bring their talent back to life. You can take a look at how-to and source code122, too.
Lights on146 by thesystemis147
Created for the Ars Electronica museum, which has a facade that contains 1085 LED controllable windows. The window colors are changed in real time with music that is broadcast on speakers surrounding the building. Visuals are created using openFrameworks.
Vinyl Workout149 by Theo Watson153150
A giant record is projected on the floor and it can be played by running around its surface in the direction you want it to go. The speed of playing music is in sync with the speed of the moving person.
Funky Forest – Interactive Ecosystem152 by Theo Watson153150
Funky Forest is an interactive installation for children. They can play with the water on floor, grow trees and water it and interact with various creatures. Built using openFrameworks. Also see these other amazing installations: Interactive Mural154, Interactive Projection at GAGA Gallery155119, Guten Touch156, Jellyfishes157 and Interactive Dancers System158.
Reverse Shadow Theatre160 by Gabor Papp161
Amazing example in which the code powers the real-time puppet animation. Uses multiple software – Processing, Eyesweb and Animata. Both Eyesweb and Animata162 are open source, as is Processing. Here Eyesweb handles the motion tracking while Animata takes in the input data from Eyesweb and does the real-time animation. Also watch Jazz Pub163.
DaVinci170 by Razorfish – Emerging Experiences171
Apart from producing amazing visual and real-time animations, computational code can give new meaning to human-computer interaction. If you like Microsoft Touch Screen Table then you are sure to like DaVinci. You can interact with a virtual world through a user interface that uses object recognition, real-world physics simulation, and gestural interface design.
Books for Reference Link
Programming Interactivity: A Designer’s Guide to Processing, Arduino, and Openframeworks176 by Joshua Noble and Noble Joshua
Real-Time Motion Graphics with Quartz Composer: A Hands-On Guide to Learning Quartz Composer182 by Graham Robinson and Surya Buchwald
Processing: A Programming Handbook for Visual Designers and Artists184 by Casey Reas and Ben Fry
Algorithms for Visual Design Using the Processing Language186 by Kostas Terzidis
OpenCV is a library of programming functions for real-time computer vision. You can use it for human-computer interaction, object identification, segmentation and recognition, face recognition, gesture recognition, camera and motion tracking, ego motion, motion understanding, stereo and multi-camera calibration and depth computation, and mobile robotics.
Open-source software to send signals to the i/o board.
- 10 Best Software for Visual Performance Artists192
Some of the best professional software for live audio-visual performance
- Flickr Group: Processing.org193
Collection of graphics created using Processing
- Flickr Group: Algorithmic Abstracts194
Abstract art created by writing code.
- Flickr Group: VVVV195
Collection of images created with VVVV.
- Flickr Group: Generative Visuals196
- 1 http://vimeo.com/1747316
- 2 http://vimeo.com/user656427
- 3 http://vimeo.com/1747316
- 4 http://vimeo.com/2027825
- 5 http://vimeo.com/user656427
- 6 http://vimeo.com/2027825
- 7 http://vimeo.com/2726147
- 8 http://vimeo.com/threesixtyangles
- 9 http://vimeo.com/2726147
- 10 http://vimeo.com/7174318
- 11 http://vimeo.com/revoid
- 12 http://vimeo.com/7174318
- 13 http://vimeo.com/2712195
- 14 http://vimeo.com/stefangoodchild
- 15 http://vimeo.com/2712195
- 16 http://vimeo.com/174357
- 17 http://vimeo.com/flight404
- 18 http://vimeo.com/174357
- 19 http://vimeo.com/1693639
- 20 http://vimeo.com/ruimadeira
- 21 http://vimeo.com/1693639
- 22 http://vimeo.com/711364
- 23 http://vimeo.com/user320217
- 24 http://vimeo.com/711364
- 25 http://vimeo.com/994502
- 26 http://vimeo.com/user475471
- 27 http://vimeo.com/994502
- 28 http://vimeo.com/1593564
- 29 http://vimeo.com/user656427
- 30 http://vimeo.com/1593564
- 31 http://vimeo.com/2094557
- 32 http://vimeo.com/flight404
- 33 http://vimeo.com/2094557
- 34 http://vimeo.com/2574845
- 35 http://vimeo.com/okdeluxe
- 36 http://vimeo.com/2574845
- 37 http://vimeo.com/658158
- 38 http://vimeo.com/flight404
- 39 http://vimeo.com/658158
- 40 http://vimeo.com/354751
- 41 http://vimeo.com/lennyjpg
- 42 http://vimeo.com/354751
- 43 http://www.youtube.com/watch?v=8nTFjVm9sTQ
- 44 http://www.radiohead.com/
- 45 http://www.youtube.com/watch?v=8nTFjVm9sTQ
- 46 http://vimeo.com/615344
- 47 http://vimeo.com/flight404
- 48 http://vimeo.com/615344
- 49 http://vimeo.com/3092499
- 50 http://vimeo.com/defetto
- 51 http://vimeo.com/3092499
- 52 http://vimeo.com/1200976
- 53 http://vimeo.com/universal
- 54 http://vimeo.com/1200976
- 55 http://vimeo.com/1912921
- 56 http://vimeo.com/eomine
- 57 http://vimeo.com/1912921
- 58 http://vimeo.com/2120027
- 59 http://vimeo.com/flight404
- 60 http://vimeo.com/2120027
- 61 http://vimeo.com/simongeilfus
- 62 http://vimeo.com/169308
- 63 http://vimeo.com/flight404
- 64 http://vimeo.com/169308
- 65 http://vimeo.com/3550384
- 66 http://vimeo.com/ruimadeira
- 67 http://vimeo.com/3550384
- 68 http://vimeo.com/3245120
- 69 http://vimeo.com/user656427
- 70 http://vimeo.com/3245120
- 71 http://vimeo.com/6239027
- 72 http://vimeo.com/user313340
- 73 http://vimeo.com/6239027
- 74 http://vimeo.com/2016712
- 75 http://vimeo.com/vs
- 76 http://vimeo.com/2016712
- 77 http://vimeo.com/2320742
- 78 http://vimeo.com/aaronkoblin
- 79 http://vimeo.com/2320742
- 80 http://processing.org/
- 81 http://processingjs.org/
- 82 http://www.openprocessing.org/
- 83 http://www.thepixelart.com/useful-processing-applet-source-codes/
- 84 http://backspaces.net/29/processing-with-eclipse/
- 85 http://developer.apple.com/graphicsimaging/quartz/quartzcomposer.html
- 86 http://www.pixlock.com/
- 87 http://www.chv-plugins.com/cms/FxPlug/QC-Integration/QC-Integration.php
- 88 http://developer.apple.com/documentation/GraphicsImaging/Conceptual/QuartzComposer/qc_intro/chapter_1_section_1.html
- 89 http://developer.apple.com/mac/library/releasenotes/GraphicsImaging/RN-QuartzComposer/index.html
- 90 http://www.quartzcompositions.com
- 91 http://www.thepixelart.com/quartz-composer-tutorials/
- 92 http://vimeo.com/809083
- 93 http://kineme.net/
- 94 http://www.zugakousaku.com/
- 95 http://www.samkass.com/blog/page4/page4.html
- 96 http://www.openframeworks.cc
- 97 http://www.openframeworks.cc
- 98 http://wiki.openframeworks.cc/index.php?title=OF_Start_Up_Guide
- 99 http://www.openframeworks.cc/forum/
- 100 http://wiki.openframeworks.cc
- 101 http://www.nodebox.net
- 102 http://www.nodebox.net
- 103 http://nodebox.net/code/index.php/Library
- 104 http://www.vvvv.org
- 105 http://www.strukt.com/
- 106 http://vimeo.com/3765704
- 107 http://vimeo.com/41193
- 108 http://vimeo.com/dimitre
- 109 http://vimeo.com/41193
- 110 http://vimeo.com/7283422
- 111 http://vimeo.com/fi5e
- 112 http://vimeo.com/7283422
- 113 http://www.vidvox.net
- 114 http://vimeo.com/4377703
- 115 http://vimeo.com/visionlabz
- 116 http://vimeo.com/5966947
- 117 http://vimeo.com/3047446
- 118 http://vimeo.com/4377703
- 119 http://vimeo.com/262063
- 120 http://www.theowatson.com/site_docs/work.php?id=40
- 121 http://vimeo.com/6376466
- 122 http://muonics.net/blog/index.php?postid=15
- 123 http://www.theowatson.com/site_docs/work.php?id=40
- 124 http://vimeo.com/7260240
- 125 http://vimeo.com/tangible
- 126 http://vimeo.com/7260240
- 127 http://vimeo.com/6378943
- 128 http://vimeo.com/gregorhofbauer
- 129 http://vimeo.com/6378943
- 130 http://vimeo.com/1362832
- 131 http://vimeo.com/olekristensen
- 132 http://vimeo.com/1362832
- 133 http://www.chrisoshea.org/projects/hand-from-above/
- 134 http://www.chrisoshea.org
- 135 http://www.chrisoshea.org/projects/hand-from-above/
- 136 http://vimeo.com/5756657
- 137 http://vimeo.com/griduo
- 138 http://vimeo.com/5595869
- 139 http://vimeo.com/5756657
- 140 http://vimeo.com/7541297
- 141 http://vimeo.com/user1953754
- 142 http://vimeo.com/7541297
- 143 http://vimeo.com/5094780
- 144 http://vimeo.com/memotv
- 145 http://vimeo.com/5094780
- 146 http://vimeo.com/4706049
- 147 http://vimeo.com/thesystemis
- 148 http://vimeo.com/4706049
- 149 http://vimeo.com/3871236
- 150 http://vimeo.com/muonics
- 151 http://vimeo.com/3871236
- 152 http://vimeo.com/3872687
- 153 http://vimeo.com/muonics
- 154 http://vimeo.com/4177026
- 155 http://vimeo.com/262063
- 156 http://vimeo.com/3288753
- 157 http://vimeo.com/1017469
- 158 http://vimeo.com/3922752
- 159 http://vimeo.com/3872687
- 160 http://vimeo.com/706938
- 161 http://vimeo.com/gabor
- 162 http://animata.kibu.hu
- 163 http://vimeo.com/664556
- 164 http://animata.kibu.hu/tutorials.html
- 165 http://originalhamsters.com/blog/2008/12/15/animata-osc/
- 166 http://vimeo.com/706938
- 167 http://vimeo.com/3193063
- 168 http://vimeo.com/kylemcdonald
- 169 http://vimeo.com/3193063
- 170 http://vimeo.com/3635423
- 171 http://vimeo.com/razorfishee
- 172 http://vimeo.com/3635423
- 173 http://vimeo.com/7063106
- 174 http://vimeo.com/seeper
- 175 http://vimeo.com/7063106
- 176 http://oreilly.com/catalog/9780596154158
- 177 http://oreilly.com/catalog/9780596154158
- 178 http://www.learningprocessing.com/
- 179 http://www.learningprocessing.com/
- 180 http://www.friendsofed.com/book.html?isbn=159059617X
- 181 http://www.friendsofed.com/book.html?isbn=159059617X
- 182 http://www.amazon.com/Real-Time-Motion-Graphics-Quartz-Composer/dp/0321636945/
- 183 http://www.amazon.com/Real-Time-Motion-Graphics-Quartz-Composer/dp/0321636945/
- 184 http://www.amazon.com/Processing-Programming-Handbook-Designers-Artists/dp/0262182629/
- 185 http://www.amazon.com/Processing-Programming-Handbook-Designers-Artists/dp/0262182629/
- 186 http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470375485.html
- 187 http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470375485.html
- 188 http://oreilly.com/catalog/9780596514556
- 189 http://oreilly.com/catalog/9780596514556
- 190 http://opencv.willowgarage.com/wiki/
- 191 http://www.arduino.cc/en/Main/Software
- 192 http://www.thepixelart.com/best-software-for-visual-performance-artist/
- 193 http://www.flickr.com/groups/processing/
- 194 http://www.flickr.com/groups/_aa/pool/
- 195 http://www.flickr.com/groups/vvvv/
- 196 http://www.flickr.com/groups/vjing/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.