azeemh/fractalliedoscope.markdown

## fractalliedoscope.markdown

      
    Raw
  

              fractalliedoscope.markdown
            
          
    fractalliedoscope

A Pen by Azeem Hussein on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>fractalliedoscope</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
      <div id="container"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

      <script id="vertexShader" type="x-shader/x-vertex">
          void main() {
              gl_Position = vec4( position, 1.0 );
          }
      </script>


      <script id="fragmentShader" type="x-shader/x-fragment">
      //参考　https://tympanus.net/Development/ScrollSpiral/

      #define TWO_PI 6.2831853072
    	#define PI 3.14159265359

    	precision highp float;
    	uniform vec2 resolution;
    	uniform float time;

    	const float displace = 1.;
    	const float gridSize = 6.;
    	const int layers = 1;
    	const float detail = 1.0;
    	const float wave = 5.0;

    	vec2 rotate(vec2 v, float angle) {
    		float c = cos(angle);
    		float s = sin(angle);
    		return v * mat2(c, -s, s, c);
    	}

    	vec3 coordToHex(vec2 coord, float scale, float angle) {
    		vec2 c = rotate(coord, angle);
    		float q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;
    		float r = 2.0 / 3.0 * c.y * scale;
    		return vec3(q, r, -q - r);
    	}

    	vec3 hexToCell(vec3 hex, float m) {
    		return sin(hex / m) * 2.0 - 1.0;
    	}

    	float absMax(vec3 v) {
    		return max(max(abs(v.x), abs(v.y)), abs(v.z));
    	}

    	float nsin(float value) {
    		return sin(value * TWO_PI) * 0.5 + 0.5;
    	}

    	float hexToFloat(vec3 hex, float amt) {
    		return mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);
    	}

    	float calc(vec3 hex, float time, float len) {
    		float value = 0.0;
    		for (int i = 0; i < layers; i++) {
    			vec3 cell = hexToCell(hex, 1.0);
    			value += nsin(
    				hexToFloat(
    					cell,
    					nsin(len * wave + time + float(i) / float(layers))
    				) * detail + nsin(time * 0.5)
    			);
    		}

    		return value / float(layers);
    	}

    	void main(void) {
    		vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
    		float t = time *0.02;

    		float rgb[3];
    		float len = 1.0 - length(uv)*0.03;


    		float zoom = nsin(t*0.1) + len *10.0;
    		float angle = TWO_PI * nsin(t * 0.05);
    		vec3 hex = coordToHex(uv, gridSize*zoom, angle);

    		for (int i = 0; i < 3; i++) {
    			float t2 = t + float(i) * displace;
          hex[i] += 0.2;
    			//rgb[i] = pow(calc(hex, t2, len), float(i)*0.5) * (0.2 + 0.8 * sin(PI * len * 0.5));
          rgb[i] = pow(calc(hex, t * displace, len),5.0) * (0.2 + 0.8 * sin(PI * len * 0.5)) * 2. - 1.0;
    		}

    		gl_FragColor = vec4(
    			rgb[0],
    			rgb[1],
    			rgb[2],
    			1.0
    		);
    	}

      </script>
  </body>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

## script.js
      var container;
          var camera, scene, renderer;
          var uniforms;

          init();
          animate();

          function init() {
              container = document.getElementById( 'container' );

              camera = new THREE.Camera();
              camera.position.z = 1;

              scene = new THREE.Scene();

              var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

              uniforms = {
                  time: { type: "f", value: 1.0 },
                  resolution: { type: "v2", value: new THREE.Vector2() }
              };

              var material = new THREE.ShaderMaterial( {
                  uniforms: uniforms,
                  vertexShader: document.getElementById( 'vertexShader' ).textContent,
                  fragmentShader: document.getElementById( 'fragmentShader' ).textContent
              } );

              var mesh = new THREE.Mesh( geometry, material );
              scene.add( mesh );

              renderer = new THREE.WebGLRenderer();
              renderer.setPixelRatio( window.devicePixelRatio );

              container.appendChild( renderer.domElement );

              onWindowResize();
              window.addEventListener( 'resize', onWindowResize, false );

          }

          function onWindowResize( event ) {
              renderer.setSize( window.innerWidth, window.innerHeight );
              uniforms.resolution.value.x = renderer.domElement.width;
              uniforms.resolution.value.y = renderer.domElement.height;
          }

          function animate() {
              requestAnimationFrame( animate );
              render();
          }

          function render() {
              uniforms.time.value += 0.05;
              renderer.render( scene, camera );
          }

## style.css
      *{
          padding: 0;
          margin: 0;
      }
	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>fractalliedoscope</title>
	<link rel="stylesheet" href="./style.css">

	</head>
	<body>
	<!-- partial:index.partial.html -->
	<body>
	<div id="container"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

	<script id="vertexShader" type="x-shader/x-vertex">
	void main() {
	gl_Position = vec4( position, 1.0 );
	}
	</script>


	<script id="fragmentShader" type="x-shader/x-fragment">
	//参考　https://tympanus.net/Development/ScrollSpiral/

	#define TWO_PI 6.2831853072
	#define PI 3.14159265359

	precision highp float;
	uniform vec2 resolution;
	uniform float time;

	const float displace = 1.;
	const float gridSize = 6.;
	const int layers = 1;
	const float detail = 1.0;
	const float wave = 5.0;

	vec2 rotate(vec2 v, float angle) {
	float c = cos(angle);
	float s = sin(angle);
	return v * mat2(c, -s, s, c);
	}

	vec3 coordToHex(vec2 coord, float scale, float angle) {
	vec2 c = rotate(coord, angle);
	float q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;
	float r = 2.0 / 3.0 * c.y * scale;
	return vec3(q, r, -q - r);
	}

	vec3 hexToCell(vec3 hex, float m) {
	return sin(hex / m) * 2.0 - 1.0;
	}

	float absMax(vec3 v) {
	return max(max(abs(v.x), abs(v.y)), abs(v.z));
	}

	float nsin(float value) {
	return sin(value * TWO_PI) * 0.5 + 0.5;
	}

	float hexToFloat(vec3 hex, float amt) {
	return mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);
	}

	float calc(vec3 hex, float time, float len) {
	float value = 0.0;
	for (int i = 0; i < layers; i++) {
	vec3 cell = hexToCell(hex, 1.0);
	value += nsin(
	hexToFloat(
	cell,
	nsin(len * wave + time + float(i) / float(layers))
	) * detail + nsin(time * 0.5)
	);
	}

	return value / float(layers);
	}

	void main(void) {
	vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
	float t = time *0.02;

	float rgb[3];
	float len = 1.0 - length(uv)*0.03;


	float zoom = nsin(t0.1) + len 10.0;
	float angle = TWO_PI * nsin(t * 0.05);
	vec3 hex = coordToHex(uv, gridSize*zoom, angle);

	for (int i = 0; i < 3; i++) {
	float t2 = t + float(i) * displace;
	hex[i] += 0.2;
	//rgb[i] = pow(calc(hex, t2, len), float(i)0.5) (0.2 + 0.8 * sin(PI * len * 0.5));
	rgb[i] = pow(calc(hex, t * displace, len),5.0) * (0.2 + 0.8 * sin(PI * len * 0.5)) * 2. - 1.0;
	}

	gl_FragColor = vec4(
	rgb[0],
	rgb[1],
	rgb[2],
	1.0
	);
	}

	</script>
	</body>
	<!-- partial -->
	<script src="./script.js"></script>

	</body>
	</html>
	var container;
	var camera, scene, renderer;
	var uniforms;

	init();
	animate();

	function init() {
	container = document.getElementById( 'container' );

	camera = new THREE.Camera();
	camera.position.z = 1;

	scene = new THREE.Scene();

	var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

	uniforms = {
	time: { type: "f", value: 1.0 },
	resolution: { type: "v2", value: new THREE.Vector2() }
	};

	var material = new THREE.ShaderMaterial( {
	uniforms: uniforms,
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
	} );

	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );

	container.appendChild( renderer.domElement );

	onWindowResize();
	window.addEventListener( 'resize', onWindowResize, false );

	}

	function onWindowResize( event ) {
	renderer.setSize( window.innerWidth, window.innerHeight );
	uniforms.resolution.value.x = renderer.domElement.width;
	uniforms.resolution.value.y = renderer.domElement.height;
	}

	function animate() {
	requestAnimationFrame( animate );
	render();
	}

	function render() {
	uniforms.time.value += 0.05;
	renderer.render( scene, camera );
	}