1C2 - Abstract Pixels

Felix Woitzel May 16, 2015

Chaos Cologne 2015 - Abstract Pixels

Felix Woitzel
May 16, 2015

www.cake23.de/1C2/

Hey, what's up with the infinity of Pi?
Pardon, you mean Processing Instructions?
No, really, Political Incorrectness.

For art and critical thinking,
Let's waste cycles!

A script kid career brought me here

Superlogo
Javascript
Perl, PHP
Java
Scripting in Milkdrop for Winamp
GPU programming with shaders
C#/.NET, UML and OO all the way

Milkdrop music visualization

By Ryan Geiss from 2001-2003
Milkdrop is an IDE
*.milk file presets = scripts
simple 2D shapes and customizable warp

Milkdrop since version 2.0, 2007

HLSL shaders! (warp + composite)
Texture loading as a oneliner
Advanced demoscene-like presets
Precalculated blur levels
At the same time: decreasing activity on the forum

Recursed in a recursion

Rotozoom: Perhaps an iterative excess
Sustain and fadeout variable
IFS: Advance till convergence
PDE plane deformation

Milkdrop Shader Pipeline

Blatant Selfie Time

(image by Rafaël Rozendaal)
Hello Cologne, Hello World Wide Web

Webglvideofeedbackloopboilerplate

Straightforward single page JS, no libs used
Framebuffer objects and render-to-texture
2 Triangles ought to be enough for anybody
Resembled shader pipeline from Milkdrop
Even more blur
Milkplus: Fancy Float32 goodness
Commented Code mostly, copy a file and start breaking things!

World of shader toys

For three.js, ThreeRTT by Steven Wittens
True Milkdrop clone milkshake by Matt Gattis

open-source preset importer (oldschool only without shaders)

Butterchurn includes them shaders, ffs!
GLSL Sandbox
Shadertoy by Inigo Quilez
Yet Another Shader editor by Ryan Alexander

Progressive image-based fractal generation

Usually deep calculation per pixel
Why wait? - in an animation loop, one iteration per frame
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)

The Drop

Mandelbrot definition: edge of convergence

I'm not really a 3D type. (no Mandelbulbs)
If 2D ain't awesome, put a moustache on it.
Not always convergent: Find the gap

Pixels can be anything

RGB sure, chromatics in a broader sense
Abstraction Level Up: Textures = Arrays of Vectors

Position and velocities
Cells in a forest fire or epidemic simulation
Gossip and spreading information
Concentration of chemical substances

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
the gap between theory and praxis is bigger in praxis than in theory

Rock Paper Scissor cycles through RGB

Blur

Pixel calculation over kernel of weighted neighborhood
Optimization: Two-pass Gaussian blur

Plus resolution reduction

Dumped try: 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
Processing implementation writeup by Karsten Schmidt
Karl Sims' tutorial is awesome!
1950s by Alan Turing, describing how biological patterns are formed

proved first 2012 at King's College London

Reaction-Diffusion / Turing Patterns

McCabeism

Blog post by Frederik Vanhoutte: turning noise into a thing of beauty
First take in WebGL (2013, not continued)

Transform Feedback (sort of)

Partial differential equation system in 2D
Line integral convolution animation
- Sine-based warp: Rolling Zebra
- Exponential zoom-in: Zoom-in mix
- Smear Finger: Sigmoid-smoothed warp filter
- Predator-Prey system: Lotka-Volterra equation
  (at the playground)

Drifting with the Noise

Start with a static noise
Add displacement for nice tv static
Stochastic realms, breaking discretization
Detect an edge and run with it
- Giraffe
- Traveling Waves
Going Procedural: Simplex Noise Fire

Grasping the Edge

Displacement mapping in the loop

Inflating / Shrinking patches: Turing net
orthogonal movement in Turing zoomin

In the post-processing

Projection (Mapping)

Mercator maps: Earth and Milkyway, Spherical Panoramas
Polar coordinates: Julia Fractal, Traveling Wavefronts
Complex Polynomials
Particle positions to density

Fluid simulation

Navier-Stokes equation
Props to Jos Stam and Evgeny Demidov
Texture warp using reversed flow vector
Particles straightforward

Fluid simulation demos

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: Simple, and coupled with Turing patterns and shiny composite

Strange attractors in 3D

Partial differential equations, very simple formulas
Mathematically chaotic - "butterfly effect"
Fractal dimension

Strange attractors in 3D

Baking a Cake analogy

What are algorithms?

I learned to boil coffee

The five-star programmer
- Know your stack, how much can you handle?

Adding to the simulation hypothesis
- Agents as stack of pixels in a world of 2D projections

What are dimensions anyway?

Strange attractors are fractured dimensional entities
There are space-filling curves
generalization reduces dimensionality

Let's agree: we're mostly 4-dimensional beings

Cutting Time

Pixels on the screen are limited
Gaussian bell curve are infinite, skipping insignificant others

Thanks!

Grab a zip bag (to roll your own)

@Flexi23