1D 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) {
            //this is a basic FM signal generator
                return sin(205.3+(cos(x*freq)*amp));
        }
        
        void main(){
            
        	vec2 pos = gl_FragCoord.xy/resolution;
        
            float x = randfm(pos.x,10.,10000.0);
            
            x *= 100.;
            //x = floor(x);
            x = fract(x);
            
        	gl_FragColor = vec4(vec3(x),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 = document.getElementById('container');
			camera = new THREE.Camera();
			camera.position.z = 1;
			scene = new THREE.Scene();
			var geometry = new THREE.PlaneBufferGeometry(2,...