Experimenting with Perlin Noise

Update

Here’s another interesting noise pattern and the generating function, possibly useful as the basis for a stylized rock wall texture:

    function dim_sqr(s, t)
    {
      var f = Math.fract([s, t]);
      var d = Math.abs( [f[0] - .5, f[1] - .5] );
      return d[0] * d[1] * 4;;
    }
 
    function f8(s, t)
    {
      s += Math.noise3d(s, t, .4);
      t += Math.noise3d(s, t, .4);
      var v = dim_sqr(s, t);
      return [v, v, v];
    }

Slightly more interesting rocks?

    function f9(s, t)
    {
      s += Math.noise3d(s, t, .4);
      t += Math.noise3d(s, t, .4);
      var v = Math.checker_dim(s, t);
      s += Math.noise3d(s, t, 22.4);
      t += Math.noise3d(s, t, 22.4); 
      var u = Math.spot_dim(.4, [s, t]);
      var w = Math.max(u, v);
 
      return [w, w, w];
    }

Original Post

I implemented a perlin noise function quite some time ago (nothing fancy – more or less retyped from Perlin’s revised algorithm as described here). I recently exposed the noise3d function to the Javascript Math object in LxEngine and played with some procedural textures generated from Javascript fragments (as described in the last post).

I’m sure with a bit of research I could find known algorithms for generating some good patterns from variations on noise, but below are some textures generated simply by experimentation. Note that all the textures are generated in an (s, t) domain of (0,0) – (8, 8). The below textures are all generated from continuous functions, but as is obvious from the images are not seamless for the given domain.

Textures

Functions

The images from left-to-right, then top-to-bottom correspond to the functions f1 through f7 below:

    function f1(s, t)
    {
        var v0 = Math.noise3d(s, t, .10);
        var v1 = Math.noise3d(2.1 * s, 2.1 * t, 88.22);
        var v2 = Math.noise3d(2 * s, 2 * t, .34);
        var v = Math.max(v0, v1, v2);
        var n = Math.min(v0, v1, v2);
        v = Math.mix(v, n, .5);
        return [v, v, v];
    }
 
    function f2(s, t)
    {
        var v0 = Math.noise3d(s, t, .10);
        var v1 = Math.noise3d(2.1 * s, 2.1 * t, 88.22);
        var v2 = Math.noise3d(2 * s, 2 * t, .34);
        var v = Math.max(v0, v1, v2);
        return [v, v, v];
    }
 
    function f3(s, t)
    {
        var v = Math.noise3d(s, t, .10);
        v = .5 - Math.pow(Math.abs(v - .5), .5);
        return [v, v, v];
    }    
 
    function f4(s, t)
    {
        var v0 = Math.noise3d(s, t, .10);
        var v1 = Math.noise3d(2.1 * s, 2.1 * t, 88.22);
        var v2 = Math.noise3d(2 * s, 2 * t, .34);
        var v = Math.max(v0, v1, v2);
        var n = Math.min(v0, v1, v2);
        v = Math.mix(v, n, .5);
        v = .5 + Math.sign(v - .5) * Math.pow(Math.abs(v - .5), .5);
        return [v, v, v];
    }
 
    function f5(s, t)
    {
        var v0 = Math.noise3d(s, t, .10);
        var v1 = Math.noise3d(2.1 * s, 2.1 * t, 88.22);
        var v2 = Math.noise3d(2 * s, 2 * t, .34);
        var v = Math.max(v0, v1, v2);
        var n = Math.min(v0, v1, v2);
        v = Math.mix(v, n, .5);
        v *= .5 + Math.pow(Math.abs(Math.fract(Math.mix(Math.fract(4 * s), v0, v1)) - .5), 1);
        return [v, v, v];
    }
 
    function f6(s, t)
    {
        var r =  1.62 * Math.noise3d(s, t, .31);
        s1 = s * Math.cos(r) + t * Math.sin(r);
        t1 = s * Math.sin(r) - t * Math.cos(r);
        v = Math.mix( (Math.sin(s1 * 6.28) + 1) / 2, (Math.cos(t1 * 6.28) + 1) / 2, .5);
        return [v, v, v];
    }
 
    function f7(s, t)
    {
      var v = Math.max( f6(s, t)[0], f6(s * 2, t * 2)[0] );
      return [v, v, v];
    }

Written by arthur

August 13th, 2011 at 12:12 pm

Posted in lxengine

Tagged with bricks, checker, experiments, images, javascript, noise, Perlin, Perlin noise, procedurals, rock, rock wall, textures