FMX 2013 session Computing in WebGL

FMX 2013 - trip into WebGL (computing)

Felix Woitzel
April 24, 2013

evolution

• aimless (re)creative coding
• got busted with traveling wavefronts (Aug 2011)
• got obsessed with generative patterns (Feb 2012)
• minimal effect showmanship
• well, this is a very simple planet
• and a rolling wild rendition: Rolling zebra

my programming language résumé

• Superlogo
• TurboPascal
• Javascript
• Perl, PHP
• Java
• scripting in Milkdrop for Winamp
• High Level Shaders

Milkdrop music visualization

• by Ryan Geiss from 2001-2003
• discovered 2005
• simple scriptable elements and (grid-based) texture flow
• integrated preset editor

Milkdrop since version 2.0, 2007

• HLSL shaders! (warp + composite)
• easy texture loading
• now advanced demoscene-like presets
• most important lesson for me: blur levels
• drawback: decreasing activity on the forum

Milkdrop shader pipeline

video feedback in general

• most simple case: endless tunnel mirror
• sustain and fadeout variable
• pde plane deformation
• strange attractors in 2D
• utopia: abstracting the representation
• simulated photosensor backend
• noise for stochastic processing loop

my video feedback setup in WebGL

• straightforward JS, no libs used
• Framebuffer objects and render-to-texture
• 2 triangles ought to be enough for anybody
• resembled the shader pipeline from Milkdrop
• included the blur calculation - later more on that
• Float32 textures

the other cool kid's toys

• for three.js, ThreeRTT by Steven Wittens
• true Milkdrop clone milkshake by Matt Gattis
• preset importer (oldschool only)
• no shaders
• GLSL Sandbox
• Shadertoy
• Yet Another Shader editor by Ryan Alexander, aka @Notlion

progressive image-based fractal rendering

• usually deep calculation per pixel
• Iterated Function Systems / Lindenmayer systems
• taking advantage of the self-similarity property
• Julia Fractal (complex number plane deformation)
• Tree (L-system, 3 copies)
• Sierpinski pyramid (pseudo-3D, 4 copies)
• in an animation loop, one iteration per frame

cellular automatons

• in theory: cells run the same program and are connected
• in praxis: pixel cells react to the state of their neighbors
• 1D Wolfram's rules
• 2D Conway's Game Of Life
• 3D and more, dare to project
• rock paper scissor cycles through RGB
• simulated gossip and forest fire

blur

• pixel calculation over kernel of weighted neighborhood
• optimization: two-pass Gaussian blur
• plus resolution reduction
• work in progress: summed area tables
• linewise rendering to active texture
• synchronization is difficult
• superfast box blur costs only 4 texture lookups

Reaction-Diffusion / Turing Patterns

• 1D state, concentration of a substance
• two forces: activator vs. inhibitor
• state update in response to the ratio
• activator region < inhibitor region
• 1950s by Alan Turing, describing how biological patterns are formed
• first proved only last year at King's College London
• Multiscale Turing patterns: McCabeism

Reaction-Diffusion / Turing Patterns

McCabeism

first take in WebGL (work in progress)

uses for procedural gradients

• displacement mapping in the loop
• inflating / shrinking color patches: Turing net
• traveling wavefront
• orthogonal movement in Turing zoomin
• in the post-processing
• edge enhancement
• bumpmap

fluid simulation

• Navier-Stokes equation
• props to Jos Stam and Evgeny Demidov
• first, fakey 16bit minifloat
• texture warp using reversed flow vector
• particles straightforward

Fluid simulation demos

• Turing fluid
• McCabeism
• rock paper scissor
• particles

Particles

• positions in a Float32 texture
• link the texture to be used in vertex shader
• yet static block of 2 millions
• props to Joshua Koo, aka "Graphics Noob" @Blurspline
• position update in a fragment shader
• primitive point rendering
• render to texture + density feedback: coupled with Turing patterns

Strange attractors in 3D

• partial differential equations, very simple formulas
• mathematically chaotic - "butterfly effect"
• fractal dimension

Strange attractors in 3D

• Thomas’ Cyclically Symmetric Attractor.
• Hadley's system
• Halvorsen's attractor
• Chen attractor
• stigmergic behaviour in dissipative structure (2D)

other possible applications for this setup

• more physics simulation
• clothing and terrain erosion
• dynamic systems, swarm stigmergy
• machine learning
• neural nets and autoassociative memories
• simulated annealing / gradient descent / fitness function evolutionary programming

This is an invitation

Grab a copy (unshown demos inside)
@Flexi23