True 2D Noise

by SQShu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  	<style>
		body {
			margin: 0px;
			background-color: #000000;
			overflow: hidden;
		}
	</style>
     <script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body, #container {
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div id="container"></div>
	<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">
					//============================================================
		//PUT YOUR GLSL CODE HERE
		//============================================================

      precision mediump float;
        
        uniform vec2 resolution;
        uniform vec2 mouse;
        uniform highp float time;
        
        float rand(vec2 pos) {
        
        // This uses frequency modulation, but with dot product distance to generate
        // A single value from a vector
                return sin(sin(dot(pos,vec2(mouse * 100000.)))* mouse.x * 10000000.);

        }
        
        void main(){
            
        	vec2 pos = gl_FragCoord.xy/resolution;
         	vec2 intPart = vec2(0.);
         	vec2 floatPart = vec2(0.);

       	
         	//pos*=10.;
        
// This contains the integer part        
         	//intPart=floor(pos);
        
// This contains the fractional part. Hmm how do they work?

         	floatPart=fract(pos);
        	
        	vec3 colour = vec3(rand(floatPart));
 
// This shows us how we are dividing up the space

//            colour += vec3(pos3,0);

        	gl_FragColor = vec4(colour,1.0);
        }
		//============================================================
		//END OF GLSL CODE
		//============================================================
	</script>
	<script>
		//change the...