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
Root attractors in 2D
Edgy the pit minder
(
semantics
)
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
Edge enhancement
Bumpmapping
Projection (Mapping)
Mercator maps:
Earth and Milkyway
,
Spherical Panoramas
Polar coordinates:
Julia Fractal
,
Traveling Wavefronts
Complex Polynomials
Traveling wavefronts (complex deform)
"Bipolar"
...with feedback
Pinch Distortion
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
Turing fluid
McCabeism
Rock Paper Scissor
Snow-white variant
Spot Worms
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:
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
Thomas’ Cyclically Symmetric Attractor.
Hadley's system
Halvorsen's attractor
Chen attractor
Lotka-Volterra attractor
Stigmergic behaviour in dissipative structure
(2D)
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