├── README.md
├── style.css
├── script.js
├── rgb.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # liquidrgb
2 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 |     margin: 0;
3 |     height: 100%;
4 |   }
5 |   
6 |   canvas {
7 |     display: block;
8 |   }


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | var container;
 2 | var camera, scene, renderer;
 3 | var uniforms;
 4 | var startTime;
 5 | 
 6 | init();
 7 | animate();
 8 | 
 9 | function init() {
10 |   container = document.getElementById('container');
11 | 
12 |   startTime = Date.now();
13 |   camera = new THREE.Camera();
14 |   camera.position.z = 1;
15 | 
16 |   scene = new THREE.Scene();
17 | 
18 |   var geometry = new THREE.PlaneBufferGeometry(16, 9);
19 | 
20 |   uniforms = {
21 |     iGlobalTime: { type: "f", value: 1.0 },
22 |     iResolution: { type: "v2", value: new THREE.Vector2() }
23 |   };
24 | 
25 |   var material = new THREE.ShaderMaterial( {
26 | 
27 |     uniforms: uniforms,
28 |     vertexShader: document.getElementById('vertexShader').textContent,
29 |     fragmentShader: document.getElementById('fragmentShader').textContent
30 | 
31 |   } );
32 | 
33 |   var mesh = new THREE.Mesh(geometry, material);
34 |   scene.add(mesh);
35 | 
36 |   renderer = new THREE.WebGLRenderer();
37 |   container.appendChild(renderer.domElement);
38 | 
39 |   onWindowResize();
40 | 
41 |   window.addEventListener('resize', onWindowResize, false);
42 | }
43 | 
44 | function onWindowResize(event) {
45 |   uniforms.iResolution.value.x = window.innerWidth;
46 |   uniforms.iResolution.value.y = window.innerHeight;
47 | 
48 |   renderer.setSize(window.innerWidth, window.innerHeight);
49 | }
50 | 
51 | function animate() {
52 |   requestAnimationFrame(animate);
53 |   render();
54 | }
55 | 
56 | function render() {
57 |   var currentTime = Date.now();
58 |   uniforms.iGlobalTime.value = (currentTime - startTime) * 0.001;
59 |   renderer.render(scene, camera);
60 | }


--------------------------------------------------------------------------------
/rgb.js:
--------------------------------------------------------------------------------
 1 | uniform vec2 iResolution;
 2 |   uniform float iGlobalTime;
 3 |   
 4 |   // Some utils first
 5 | 
 6 |   // From Stackoveflow
 7 |   // http://stackoverflow.com/questions/15095909/from-rgb-to-hsv-in-opengl-glsl
 8 |   vec3 hsv2rgb(vec3 c)
 9 |   {
10 |       vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
11 |       vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
12 |       return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
13 |   }
14 | 
15 |   // Simplex 2D noise
16 |   // from https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
17 |   vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
18 | 
19 |   float snoise(vec2 v){
20 |       const vec4 C = vec4(0.211324865405187, 0.366025403784439,
21 |                           -0.577350269189626, 0.024390243902439);
22 |       vec2 i  = floor(v + dot(v, C.yy) );
23 |       vec2 x0 = v -   i + dot(i, C.xx);
24 |       vec2 i1;
25 |       i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
26 |       vec4 x12 = x0.xyxy + C.xxzz;
27 |       x12.xy -= i1;
28 |       i = mod(i, 289.0);
29 |       vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
30 |                        + i.x + vec3(0.0, i1.x, 1.0 ));
31 |       vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
32 |                               dot(x12.zw,x12.zw)), 0.0);
33 |       m = m*m ;
34 |       m = m*m ;
35 |       vec3 x = 2.0 * fract(p * C.www) - 1.0;
36 |       vec3 h = abs(x) - 0.5;
37 |       vec3 ox = floor(x + 0.5);
38 |       vec3 a0 = x - ox;
39 |       m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
40 |       vec3 g;
41 |       g.x  = a0.x  * x0.x  + h.x  * x0.y;
42 |       g.yz = a0.yz * x12.xz + h.yz * x12.yw;
43 |       return 130.0 * dot(m, g);
44 |   }
45 | 
46 |   // This is my code
47 |   void main(void)
48 |   {
49 |     vec2 uv = gl_FragCoord.xy / iResolution.xy;
50 |     float xnoise = snoise(vec2(uv.x, iGlobalTime / 5.0 + 10000.0));
51 |     float ynoise = snoise(vec2(uv.y, iGlobalTime / 5.0 + 500.0));
52 |     vec2 t = vec2(xnoise, ynoise);
53 |     float s1 = snoise(uv + t / 2.0 + snoise(uv + snoise(uv + t/3.0) / 5.0));
54 |     float s2 = snoise(uv + snoise(uv + s1) / 7.0);
55 |     vec3 hsv = vec3(s1, 1.0, 1.0-s2);
56 |     vec3 rgb = hsv2rgb(hsv);
57 |     gl_FragColor = vec4(rgb, 1.0);
58 |   }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="./style.css">
 8 |     <script src="./script.js"></script>
 9 |     <title>Liquid RGB </title>
10 | </head>
11 | <body>
12 |     <div id="container"></div>
13 | <script id="vertexShader" type="x-shader/x-vertex">
14 | 
15 |   void main() {
16 |     gl_Position = vec4(position, 1.0);
17 |   }
18 | 
19 | </script>
20 | 
21 | <script id="fragmentShader" type="x-shader/x-fragment">
22 | 
23 |   uniform vec2 iResolution;
24 |   uniform float iGlobalTime;
25 |   
26 |   // Some utils first
27 | 
28 |   // From Stackoveflow
29 |   // http://stackoverflow.com/questions/15095909/from-rgb-to-hsv-in-opengl-glsl
30 |   vec3 hsv2rgb(vec3 c)
31 |   {
32 |       vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
33 |       vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
34 |       return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
35 |   }
36 | 
37 |   // Simplex 2D noise
38 |   // from https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
39 |   vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
40 | 
41 |   float snoise(vec2 v){
42 |       const vec4 C = vec4(0.211324865405187, 0.366025403784439,
43 |                           -0.577350269189626, 0.024390243902439);
44 |       vec2 i  = floor(v + dot(v, C.yy) );
45 |       vec2 x0 = v -   i + dot(i, C.xx);
46 |       vec2 i1;
47 |       i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
48 |       vec4 x12 = x0.xyxy + C.xxzz;
49 |       x12.xy -= i1;
50 |       i = mod(i, 289.0);
51 |       vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
52 |                        + i.x + vec3(0.0, i1.x, 1.0 ));
53 |       vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
54 |                               dot(x12.zw,x12.zw)), 0.0);
55 |       m = m*m ;
56 |       m = m*m ;
57 |       vec3 x = 2.0 * fract(p * C.www) - 1.0;
58 |       vec3 h = abs(x) - 0.5;
59 |       vec3 ox = floor(x + 0.5);
60 |       vec3 a0 = x - ox;
61 |       m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
62 |       vec3 g;
63 |       g.x  = a0.x  * x0.x  + h.x  * x0.y;
64 |       g.yz = a0.yz * x12.xz + h.yz * x12.yw;
65 |       return 130.0 * dot(m, g);
66 |   }
67 | 
68 |   // This is my code
69 |   void main(void)
70 |   {
71 |     vec2 uv = gl_FragCoord.xy / iResolution.xy;
72 |     float xnoise = snoise(vec2(uv.x, iGlobalTime / 5.0 + 10000.0));
73 |     float ynoise = snoise(vec2(uv.y, iGlobalTime / 5.0 + 500.0));
74 |     vec2 t = vec2(xnoise, ynoise);
75 |     float s1 = snoise(uv + t / 2.0 + snoise(uv + snoise(uv + t/3.0) / 5.0));
76 |     float s2 = snoise(uv + snoise(uv + s1) / 7.0);
77 |     vec3 hsv = vec3(s1, 1.0, 1.0-s2);
78 |     vec3 rgb = hsv2rgb(hsv);
79 |     gl_FragColor = vec4(rgb, 1.0);
80 |   }
81 | 
82 | </script>
83 | </body>
84 | </html>


--------------------------------------------------------------------------------