iSlammedMyKindle/noiseGenerator.html

## noiseGenerator.html
<!DOCTYPE html>
<html>
    <body>
        <canvas id="noise" ondblclick="this.requestFullscreen()" style="border:1px solid black"></canvas><br>
        <button onclick="console.log('starting...'); frameList = renderFrames(noise.width, noise.height, fRate, coloredNoise)">Render Frames</button> <button onclick="startStop()">Start/stop</button>
        <script>
            var rnd = n=>Math.floor(Math.random() * n);
            var frameList = [];
            var interval;
            var canvasCtx = noise.getContext("2d");
            var index = 0;
            var coloredNoise = false;
            var fRate;

            {
                let searchParams = new URL(document.URL).searchParams;
                noise.width = searchParams.get('w') || 1920;
                noise.height = searchParams.get('h') || 1080;
                coloredNoise = searchParams.get('c');
                fRate = searchParams.get('f') || 60;
            }

            function renderFrames(w = 1920, h = 1080, frameCount = 60, color = false){
                console.log(arguments);
                console.time("renderFrames");
                const returnedFrames = [];

                for(let i = 0; i < frameCount; i++){
                    //For every pixel: rgba
                    var resFrame =  canvasCtx.createImageData(w, h);
                    for(let j = 0; j < resFrame.data.length; j+=4){
                        let bw;
                        if(!color) bw = 255 * rnd(2);

                        resFrame.data[j] = color ? rnd(256) : bw;
                        resFrame.data[j+1] = color ? rnd(256) : bw;
                        resFrame.data[j+2] = color ? rnd(256) : bw;
                        resFrame.data[j+3] = 255
                    }

                    returnedFrames.push(resFrame);
                }

                console.timeEnd("renderFrames");
                return returnedFrames;
            }

            function startStop(){
                if(!interval) interval = setInterval(()=>{
                    console.log('yes');
                    canvasCtx.putImageData(frameList[index++], 0, 0);
                    if(index >= frameList.length) index = 0;
                }, 1000 / frameList.length);

                else{
                    clearInterval(interval);
                    interval = undefined;
                }
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<canvas id="noise" ondblclick="this.requestFullscreen()" style="border:1px solid black"></canvas><br>
	<button onclick="console.log('starting...'); frameList = renderFrames(noise.width, noise.height, fRate, coloredNoise)">Render Frames</button> <button onclick="startStop()">Start/stop</button>
	<script>
	var rnd = n=>Math.floor(Math.random() * n);
	var frameList = [];
	var interval;
	var canvasCtx = noise.getContext("2d");
	var index = 0;
	var coloredNoise = false;
	var fRate;

	{
	let searchParams = new URL(document.URL).searchParams;
	noise.width = searchParams.get('w') \|\| 1920;
	noise.height = searchParams.get('h') \|\| 1080;
	coloredNoise = searchParams.get('c');
	fRate = searchParams.get('f') \|\| 60;
	}

	function renderFrames(w = 1920, h = 1080, frameCount = 60, color = false){
	console.log(arguments);
	console.time("renderFrames");
	const returnedFrames = [];

	for(let i = 0; i < frameCount; i++){
	//For every pixel: rgba
	var resFrame = canvasCtx.createImageData(w, h);
	for(let j = 0; j < resFrame.data.length; j+=4){
	let bw;
	if(!color) bw = 255 * rnd(2);

	resFrame.data[j] = color ? rnd(256) : bw;
	resFrame.data[j+1] = color ? rnd(256) : bw;
	resFrame.data[j+2] = color ? rnd(256) : bw;
	resFrame.data[j+3] = 255
	}

	returnedFrames.push(resFrame);
	}

	console.timeEnd("renderFrames");
	return returnedFrames;
	}

	function startStop(){
	if(!interval) interval = setInterval(()=>{
	console.log('yes');
	canvasCtx.putImageData(frameList[index++], 0, 0);
	if(index >= frameList.length) index = 0;
	}, 1000 / frameList.length);

	else{
	clearInterval(interval);
	interval = undefined;
	}
	}
	</script>
	</body>
	</html>