hb3p8/tiled_voronoi.html

## tiled_voronoi.html
<!DOCTYPE html>
<html>
  <head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta charset=utf-8>
  </head>
  <body>
    <canvas width=2048 height=2048 style="width: 800px; height: 800px"></canvas>
  </body>
  <script language="javascript" src="https://npmcdn.com/regl/dist/regl.js"></script>
  <script language="javascript">
    var regl = createREGL({canvas: document.getElementsByTagName('canvas')[0]})

    const setupQuad = regl({
      frag: `
      precision highp float;
      varying vec2 uv;

      const float Scale = 200.0;

      vec2 hash( vec2 p )
      {
          p = mod(p, Scale); // tile
          p = vec2(dot(p,vec2(127.1,311.7)),
                   dot(p,vec2(269.5,183.3)));
          return fract(sin(p)*18.5453);
      }

      // return distance, and cell id
      vec2 voronoi( in vec2 x )
      {
          vec2 n = floor( x );
          vec2 f = fract( x );

        vec3 m = vec3( 8.0 );
          for( int j=-1; j<=1; j++ )
          for( int i=-1; i<=1; i++ )
          {
              vec2  g = vec2( float(i), float(j) );
              vec2  o = hash( n + g );
              vec2  r = g - f + o;
          float d = dot( r, r );
              if( d<m.x )
                  m = vec3( d, o );
          }

          return vec2( sqrt(m.x), m.y+m.z );
      }

      const float PHI = 1.61803398874989484820459;

      float gold_noise(in vec2 xy, in float seed)
      {
          return fract(tan(distance(xy*PHI, xy)*seed)*xy.x);
      }

      vec3 gold_noise3(in vec2 xy, in float seed)
      {
        return vec3 (gold_noise(xy, seed+1.0),
                     gold_noise(xy, seed+2.0),
                     gold_noise(xy, seed+3.0));
      }

      // -----------------------------------------------

      void main() {
        vec2 p = uv;

        // compute voronoi patterm
        vec2 c = voronoi( p * Scale );

        // colorize
        //vec3 col = 0.5 + 0.5*cos( c.y*6.2831 + vec3(0.0,1.0,2.0) );

        vec3 rnd_normal = gold_noise3(vec2(c.y, c.y), 42.0) * 2.0 - 1.0;
        vec3 normal = normalize (mix (vec3 (0.0, 0.0, 1.0), rnd_normal, 0.2));
        normal.xy = normal.xy * 0.5 + 0.5;

        gl_FragColor = vec4( normal, 1.0 );
      }

      `,

      vert: `
      precision highp float;
      attribute vec2 position;
      varying vec2 uv;
      void main() {
        uv = 0.5 * (position + 1.0);
        gl_Position = vec4(position, 0, 1);
      }`,

      attributes: {
        position: [ -4, -4, 4, -4, 0, 4 ]
      },

      depth: { enable: false },

      count: 3
    })

    regl.frame(function () {
      setupQuad(() => {
        regl.draw()
      })
    })
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta charset=utf-8>
	</head>
	<body>
	<canvas width=2048 height=2048 style="width: 800px; height: 800px"></canvas>
	</body>
	<script language="javascript" src="https://npmcdn.com/regl/dist/regl.js"></script>
	<script language="javascript">
	var regl = createREGL({canvas: document.getElementsByTagName('canvas')[0]})

	const setupQuad = regl({
	frag: `
	precision highp float;
	varying vec2 uv;

	const float Scale = 200.0;

	vec2 hash( vec2 p )
	{
	p = mod(p, Scale); // tile
	p = vec2(dot(p,vec2(127.1,311.7)),
	dot(p,vec2(269.5,183.3)));
	return fract(sin(p)*18.5453);
	}

	// return distance, and cell id
	vec2 voronoi( in vec2 x )
	{
	vec2 n = floor( x );
	vec2 f = fract( x );

	vec3 m = vec3( 8.0 );
	for( int j=-1; j<=1; j++ )
	for( int i=-1; i<=1; i++ )
	{
	vec2 g = vec2( float(i), float(j) );
	vec2 o = hash( n + g );
	vec2 r = g - f + o;
	float d = dot( r, r );
	if( d<m.x )
	m = vec3( d, o );
	}

	return vec2( sqrt(m.x), m.y+m.z );
	}

	const float PHI = 1.61803398874989484820459;

	float gold_noise(in vec2 xy, in float seed)
	{
	return fract(tan(distance(xyPHI, xy)seed)*xy.x);
	}

	vec3 gold_noise3(in vec2 xy, in float seed)
	{
	return vec3 (gold_noise(xy, seed+1.0),
	gold_noise(xy, seed+2.0),
	gold_noise(xy, seed+3.0));
	}

	// -----------------------------------------------

	void main() {
	vec2 p = uv;

	// compute voronoi patterm
	vec2 c = voronoi( p * Scale );

	// colorize
	//vec3 col = 0.5 + 0.5cos( c.y6.2831 + vec3(0.0,1.0,2.0) );

	vec3 rnd_normal = gold_noise3(vec2(c.y, c.y), 42.0) * 2.0 - 1.0;
	vec3 normal = normalize (mix (vec3 (0.0, 0.0, 1.0), rnd_normal, 0.2));
	normal.xy = normal.xy * 0.5 + 0.5;

	gl_FragColor = vec4( normal, 1.0 );
	}

	`,

	vert: `
	precision highp float;
	attribute vec2 position;
	varying vec2 uv;
	void main() {
	uv = 0.5 * (position + 1.0);
	gl_Position = vec4(position, 0, 1);
	}`,

	attributes: {
	position: [ -4, -4, 4, -4, 0, 4 ]
	},

	depth: { enable: false },

	count: 3
	})

	regl.frame(function () {
	setupQuad(() => {
	regl.draw()
	})
	})
	</script>
	</html>