domain warping - 2002

Intro

Image for f(p) = fbm(p+fbm(p+fbm(p))) - order a metal print of this image

The basics

The idea

float pattern( in vec2 p ) { return fbm( p ); }

float pattern( in vec2 p ) { vec2 q = vec2( fbm( p + vec2(0.0,0.0) ), fbm( p + vec2(5.2,1.3) ) ); return fbm( p + 4.0*q ); }

float pattern( in vec2 p ) { vec2 q = vec2( fbm( p + vec2(0.0,0.0) ), fbm( p + vec2(5.2,1.3) ) ); vec2 r = vec2( fbm( p + 4.0*q + vec2(1.7,9.2) ), fbm( p + 4.0*q + vec2(8.3,2.8) ) ); return fbm( p + 4.0*r ); }



Image for f(p) = fbm( p )

Image for f(p) = fbm( p + fbm( p ) )

Image for f(p) = fbm( p + fbm( p + fbm( p )) )

The experiments







Next step is adding some colors to our images. We can simply map a color palette to our density values. That's a good start, but it's not enough. We might want to use the internal values of the funcion to get some extra color patterns and shapes. After all, we got three fBM functions that do change the internal structure of our final image, so why not use those too to get some extra coloring. The first we have to do, then, is to actually expose those values to the outside world:

float pattern( in vec2 p, out vec2 q, out vec2 r ) { q.x = fbm( p + vec2(0.0,0.0) ); q.y = fbm( p + vec2(5.2,1.3) ); r.x = fbm( p + 4.0*q + vec2(1.7,9.2) ); r.y = fbm( p + 4.0*q + vec2(8.3,2.8) ); return fbm( p + 4.0*r ); } Now the basics are set, it's time to start playing around. First obvious idea is to introduce time as a parameter to get some sort of animation. That you can probably figure out by yourself. Results are pretty cool. Look in the first video to the right (sorry for the low quality enconding, i made it in 2002), or to the last video in the bottom of this article.Next step is adding some colors to our images. We can simply map a color palette to our density values. That's a good start, but it's not enough. We might want to use the internal values of the funcion to get some extra color patterns and shapes. After all, we got three fBM functions that do change the internal structure of our final image, so why not use those too to get some extra coloring. The first we have to do, then, is to actually expose those values to the outside world:

Animated fbm(fbm(p)) - made in 2002

Using q and r to add coloring to the image - made in 2012