How To Make Interactive And Generative Animations Using WebGL

Nick Briz is a new media artist and educator whose work and writing explores digital culture and experimental new media. He’s written about remix culture and digital rights and is co-founder of the annual GLI.TC/H festival. He (along with Branger_Briz) is also the inventor of the _playGnd animation tool which lets users create 3D animations in their browser. In the video above Briz gives a tutorial on how to get started with this tool, which you can read more about below. After you’ve had a watch and a read, head on over to _playGnd and then please submit your own sketches to us by email and we’ll showcase the best on the blog.

 

 

“an interface is not a thing; an interface is an effect […] Ideology is ‘modeled’ in software” — Alexander Galloway

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.

// —–_____—–_____—–_____—–_____ ¿¿¿ three.js/webGL ???

WebGL is a new(ish) part of HTML5 which brings generative && interactive 3D graphics to any (compatible) browser. Which is exciting for folks who make art with the Internet… if not for the fact that it involves a ridiculous amount of code and a steep learning curve. Enter three.js, an open source javascript library that makes this stuff loads more manageable. If you’re familiar with HTML / CSS (and have some understanding of Javascript) the HTML file below illustrates what that looks like…

…while three.js is great, learning the stuff can be a bit discouraging. The documentation isn’t the greatest (to say the least), which means you end up having to read through a lot of source code to figure out how this stuff worx. Which is cool if you’re a programmer… but not so cool if you’re the kinda person who learns by experimenting and playing (like me).

// —–_____—–_____ ¿¿¿ experimental new-media art ethic ???

I mean ‘ethic’ not in the traditional ‘moral’ sense, but in the general sense: as a set of principles for practice in accordance with some convention. In this case the ‘practice’ is an experimental new-media art one; rather than traditional approaches to programming centered around ‘best practices’ + conventions (stability, structure, hierarchy, clear goals, debugging) the _playGnd is instead modeled on new-media ethics (experimenting, playing, copying+pasting, remixing, sharing). You learn to + make webGL sketches (using the three.js library) by ‘considerately fux’n around’. The _playGnd has three sections

• [1] graphix[toCode] interface
• [2] threejs [realtime] editor
• [3] sketches archive

// —–_____—–_____—–_____ [1] graphix[toCode] interface

“Software is the medium that is not a medium. […] Code is never viewed as it is. Instead code must be compiled, interpreted, parsed, and otherwise driven into hiding by still larger globs of code. Hence the principle of obfuscation.” — Alexander Galloway

In this first section you generate code for basic three.js geometry using a GUI (graphical user interface). Traditionally GUI’s ‘obfuscate’ code. In the interest of making things more accessible they hide the code, and as a consequence compromise digital literacy. In the _playGnd the GUI is still concerned with accessibility, but in a way that augments the code rather than obfuscating it.

// —–_____—–_____—–_____—– [2] threejs [realtime] editor

“the computer world deals with imaginary, arbitrary made up stuff that was all made up by somebody. Everything you see was designed and put there by someone. […] There are so many ideas to care about, and with ideas comes the politics of ideas.” — Ted Nelson

Traditionally we don’t tend to think of our tools as being ‘political’, but software isn’t neutral. It reflects and imposes the politix of the folks who create it (some, like Galloway, argue it is itself ideology). The _playGnd is no less political and no less bias than any other digital tool, but it stems from a different ethic (an experimental new-media art ethic). For this reason you’ll notice that the editor is a little bit different from the conventional. First, it’s built into the browser + shares the same space as your sketch, which allows for immediate feedback >> you can experiment, tinker, play in ‘realtime.’ Second, the editor includes a ‘snippets’ menu to encourage copying + pasting + modifying + collaging code.

// —–_____—–_____—–_____—–_____ [3] sketches archive

after you finish working on a sketch in the editor you can ‘archive_it’, which adds your sketch to the xanalogically inspired archive. You can view all the other sketches saved from the _playGnd in the archives as well as remix (fork + edit your own variation of) any sketch in the archive.

below are a few sketches made in the _playGnd by talented folks

“The detailed forms of algorithmic interaction and play required today of the computer-using public is, in my mind, so exactly akin to writing code that the division between the two must certainly be ascribed to other ends. Perhaps it has to do with the creation and maintenance of another class of priest-like specialists[…]” — Alexander Galloway

 

Ted Nelson

credz + shoutOutz

the threejs_playGnd was developed by the same practice/ethics it encourages + is both literally && conceptually a remix/collage of worx && ideas.

built on the shoulders of these open source projects: three.js (most importantly) ++ HTML Editor, CodeMirror, and dat.GUI

++ also makes use of AsciiEffect.js ( by zz85 ), CSS3DRenderer.js (by mr doob ), Detector.js (by alteredq + mr doob ), ShaderToon.js (by alteredq + mr doob ), proxy.php (by Abdul Qabiz )and tween.js (by sole )

++ inspired by the ideas/worx of Katie Salen, Mary Flanagan, Alexander Galloway, Martin Heidegger, Marshall McLuhan and most importantly Ted Nelson && mr doob

++ thnx to the artists who beta play’d w/the _playGnd: yolk, Mattie Hillock, GoldenFeelds, JTown, Yung Boy, Shawne Michaelain Halloway, Sam QWENTL Goldstein, NetMax, Paula Nacif, Maxwellian, The Square Painting, Matt, Claudia Maté, Emilie Gervais, Jennifer Chan + Miyö Van Stenis

branger_briz | copyright 2013