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 randfm(float x,float freq, float amp) {
                return sin((cos(x*freq)*amp));
        }
        
        void main(){
            
        	vec2 pos = gl_FragCoord.xy/resolution;
        
        //you can do it twice - and it can produce some good results
        //If you want it to look like noise, you need to increase the amplitude of the modulator
        
            float x = randfm(pos.y,10.,10.);
            float y = randfm(pos.x,10.,10.);
        
            float colour =y + x ;
            //colour=floor(colour);
            //colour=fract(colour);
        	gl_FragColor = vec4(vec3(colour),1.0);
        }
		//============================================================
		//END OF GLSL CODE
		//============================================================
	</script>
	<script>
		//change the resolution here. 1 is highest
		var pixel_resolution = 2;
		var container, stats;
		var camera, scene, renderer;
		var uniforms;
		init();
		animate();
		function init() {
			container =...