Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Beautiful Motion Graphics Created With Programming: Showcase, Tools and Tutorials

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.

Metamorphosis1 by Glenn Marshall662642


Swan Lake – Zeno Music Visualiser by Glenn Marshall662642


Black Hole5 by 360angles


Flightpattern7 by Gwen Vanhee8
These beautiful motion graphics were created using ActionScript.


Disco Maths 110 by Stefan Goodchild11


Magnetic Sphere13 by flight40414


Air Doom16 by Rui Madeira6317


Audio Reactive Bubbles19 by Matthias Dörfelt.20


Visualization in 7/422 by Eamae Mirkin23


Music Is Math25 by Glenn Marshall662642


Audio-generated landscape28 by flight4046056443529


okdeluxe XMAS card 200831 by okdeluxe32


Solar, with lyrics.34 by flight4046056443529


Bubbletrouble_237 by Leander Herzog38


House of Cards40 by Radiohead41
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.


Magnetic Ink43 by flight4046056443529


Shifty46 by Pedro Mari47


Advanced Beauty 13 of 1849 by Universal Everything50


I Am David Sparkle – Jaded Afghan52 by Eduardo Omine53


Relentless, The REV55 by flight4046056443529


Aphex Twin – Rhubarb by Simon Geilfus58


Magnetosphere Revisited59 by flight4046056443529


Vortex62 by Rui Madeira6317


The Nest That Sailed The Sky65 by Glenn Marshall662642


GoodMorning!68 by Jer Thorp69


Sunflower71 by VS*72


Interpol – Rest My Chemistry Video74 by Aaron Koblin75


Free Applications for Creating Visuals with Computational Code Link

Processing Link


Processing is a popular and powerful application for generating visuals using programming. It’s free and open source and uses Java as its coding language. It’s been used in professional, educational, and scientific environments and is available for GNU/Linux, Mac OS X, and Windows. It can also be used for web by embedding as Java applets or through the use of Processing.js78, which uses JavaScript to draw shapes and manipulate images using the HTML5 Canvas element. Processing is also available for Java-based mobiles (Mobile Processing).

  • Open Processing79
    Share your sketches online.
  • Useful Processing Applet Source Codes80
    A collection of free Java applet source codes.
  • Processing with Eclipse81
    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


Popular among Mac developers and VJs, Quartz Composer is the simplest application for creating still as well interactive motion graphics. It uses a node-based sequencing visual programming language that takes advantage of the Open GL, JavaScript, Core Image and Core Video devices and other technologies built into Mac OS X. It’s intended for non-programmers and is used by developers to construct user interfaces in conjunction with Cocao and other developer tools bundled in Xcode. It’s also used to create iTunes Music Visualizers.

Using third-party tools like Effect Builder AE83 and QC Integration FX84 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.

OpenFrameworks Link


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

NodeBox Link


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

eMotion Link


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.

Sonic Camera103 by Dmtr.org104


Graffiti Analysis 2.0 by Evan Roth


Amoeba Dance is built using Quartz Composer. Its not a pre-rendered visual but works totally in real-time mode, controlled using VDMX106 and is reactive to the audio input.


The Beauty of Fluid Dynamics107 by Jens Heinen108
Beautiful live interactive visual performances. Also watch Lichtfaktor vs Optix109 and Reincarnation110.


Interactive Projection at GAGA Gallery147112 | Laser tag113
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 Eyewriter 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 code114, too.


Digital Graffiti Wall + Stencils116 by Alex Beim117
Another similar version, also built with OpenFrameworks.


Digital Wallpaper119 by Gregor Hofbauer120
Uses VVVV to generate graphics which are then projected and mapped to the wall.


Body Navigation122 by Ole Kristensen123
Amazing example where interactive visuals are projected on to a wall. To add interactivity, everything is tracked using infrared light and cameras.


Hand from Above125 by Chris O’Shea126
An amazing installation built with openFrameworks and openCV. Pedestrians are tickled, stretched, flicked or removed virtually in real-time.


Quadrature128 by Griduo129
The walls of the building are virtually stretched, broken and reconstructed. A similar installation:

555 KUBIK130


Castel Dell’Ovo132 by Quy & N1ente133
A stunning audio-visual performance created by mapping an entire building in a virtual world.


Body Paint135 by Memo Akten136
Beautiful interactive installation which allows performers to paint on a virtual canvas with their body, interpreting gestures and dance into evolving compositions.


Lights on138 by thesystemis139
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 Workout141 by Theo Watson145142
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 Ecosystem144 by Theo Watson145142
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 Mural146, Interactive Projection at GAGA Gallery147112, Guten Touch148, Jellyfishes149 and Interactive Dancers System150.


Reverse Shadow Theatre152 by Gabor Papp153
Amazing example in which the code powers the real-time puppet animation. Uses multiple software – Processing, Eyesweb and Animata. Both Eyesweb and Animata154 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 Pub155.

Tutorials Link


DIY 3D Scanner159 by Kyle McDonald160
Another great application of computational code.


DaVinci162 by Razorfish – Emerging Experiences163
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.


London Digital Week165 by seeper166
Multi-touch music sequencer.


Books for Reference Link

Programming Interactivity: A Designer’s Guide to Processing, Arduino, and Openframeworks168 by Joshua Noble and Noble Joshua


Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction170 by Daniel Shiffman


Processing: Creative Coding and Computational Art by Ira Greenberg


Real-Time Motion Graphics with Quartz Composer: A Hands-On Guide to Learning Quartz Composer172 by Graham Robinson and Surya Buchwald


Processing: A Programming Handbook for Visual Designers and Artists174 by Casey Reas and Ben Fry


Algorithms for Visual Design Using the Processing Language176 by Kostas Terzidis


Visualizing Data178 by Ben Fry


Resources Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185

↑ Back to top Tweet itShare on Facebook


Vailancio Rodrigues is a web ninja who bakes semantic muffins. Apart from that he is also interested in Motion Graphics, Visual Effects, Photography and knows little bit of Physics due to his college education . He is from Goa - a beautiful tropical paradise in India.

  1. 1

    Thank you Vailancio Rodrigues!
    I have not heard much about this art.
    by the way I love it

  2. 2

    What a beautiful article!! Simply amazing!!

  3. 3

    Very Useful Collection Guys :)
    Do check out some powerful motion graphics plugins for some hollywood effects.

  4. 4

    Wow. Some of those examples just blew me away… I’m a 3D Arist (well, student) but I’ve done programming before (C++, Java, and Actionscript though none extensively). Can’t wait to give this a try!

    • 5

      Vailancio Rodrigues

      February 6, 2010 10:36 am

      If you know Java then try Processing. Its really powerful and easy to start with.

  5. 6

    Ryan Bollenbach

    February 6, 2010 8:09 am

    Very cool, I quite enjoyed this in depth look to many areas of motion from programming.

  6. 7

    George Birbilis

    February 6, 2010 8:12 am

    As already said above: Wow! Thanks for collecting all these in one place

  7. 8

    Hi guys I more into Web than any other thing my brother is really into processing, he told me some cool things can be done for the web with this tool, like interactive an animation stuff you a check out his site is full of information about it an also about programing for architecture and 3d modeling

  8. 9

    Marc Delaunay

    February 6, 2010 8:47 am

    Very very nice work.

  9. 10

    I am kind of surprised that ActionScript 3 with Flash Player 10 did not make it into this article. There are many programming artists out there that are using this platform to create some amazing interactive art pieces. The nice thing about AS3 is you do not need Adobe Flash IDE to program it. Flash Develop is an open source IDE that has better functionality than the Flash IDE but it is free!

    • 11

      Vailancio Rodrigues

      February 6, 2010 10:46 am

      Yes ActionScripts should have been here. But we thought of excluding it because it is very common. Everybody knows about it and lot of info is already available on it. We want to give our readers something new. But we did include one example of actionscript which was really interesting and hardly anybody had seen it before.

      If you like to have something on ActionScripts in future then you can leave a reply here.

      • 12

        Yes I think it could be a great article. Most people think of Flash as interactive websites but there so much more there with the power of AS3 and Flash Player 10. People like are taking Flash to a new medium. I think Flash has a better home in these areas of motion art than on the web because of lack of SEO in Flash sites, though that is improving but not any where near what good semantic HTML/CSS can do.


  10. 13

    looks really nice………

  11. 14

    Wow, these are awesome!

  12. 15

    This is such an amazing medium as it brings the experience of art to a new level. I was just in Seoul where there were many motion graphic pieces located in public spaces around the city and it made me wonder why other cities do not engage the public like this! Thanks for the article!

  13. 16

    This is amazing ………….

  14. 17

    Oh wow. I’d heard about this programming language, a friend of mine is doing his Honours study on it, but I hadn’t seen any examples. Fantastic.

  15. 18

    Wow, very very inspiring artical. I know wat i’m going to do today…

  16. 19

    Davide Della Casa

    February 7, 2010 6:38 am


    with a group of friends we have been working on a pretty cool site that allows people to collaboratively create generative art like the examples above using the Processing language – but in a very immediate way and without requiring any downloads: users can browse/copy/edit/share sketches with unprecedented immediacy – all within their browser without downloading a thing.

    Some of the works in the gallery are very nice!

    The site it’s here, make sure to check it out!

  17. 20

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

    Programming is actually a highly creative activity. It’s a design activity (as opposed to building activity).

  18. 21

    Also a nice projection with architecture integration

  19. 22

    Now get us some amazing source code written by designers ; ]

  20. 23

    This is an absolutely invaluable article. Thank you so much!!


↑ Back to top