White Noise

Developer
Chris Newcombe
Size
2,552 Kb
Views
4,048
  1. White Noise Previews
  2. White Noise HTML Codes
  3. White Noise CSS Codes
  4. White Noise JS Codes

How do I make an white noise?

What is a white noise? How do you make a white noise? This script and codes were developed by Chris Newcombe on 27 January 2023, Friday.

White Noise Previews
IQ Test

White Noise - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>White Noise</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="snow">
</canvas> <script src="js/index.js"></script>
</body>
</html>

White Noise - Script Codes CSS Codes

html {	margin: 0 0 0 0;	width: 100%;	height: 100%;	}	body {	background-color: #eee;	margin: 0 0 0 0;	width: 100%;	height: 100%;	}	#snow {	display: block;	width: 100%;	height: 100%;	margin: 0 0 0 0;	padding: 0 0 0 0;	}

White Noise - Script Codes JS Codes

(function () {	var lastTime = 0;	var vendors = ['webkit', 'moz'];	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];	window.cancelAnimationFrame =	window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];	}	if (!window.requestAnimationFrame)	window.requestAnimationFrame = function(callback, element) {	var currTime = new Date().getTime();	var timeToCall = Math.max(0, 16 - (currTime - lastTime));	var id = window.setTimeout(function() { callback(currTime + timeToCall); },	timeToCall);	lastTime = currTime + timeToCall;	return id;	};	if (!window.cancelAnimationFrame)	window.cancelAnimationFrame = function(id) {	clearTimeout(id);	};	})();	var h;	var w;	var blocksize;	var tilesize;	var tiles_w;	var tiles_h;	var blocks_w = 0	var blocks_h = 0	var context;	var drawing;	var offBlockCanvas;	var offBlockContext;	var colors = [	[255, 255, 255, 255],	[250, 250, 250, 255],	[245, 245, 245, 255],	[240, 240, 240, 255],	[235, 235, 235, 255]	]; function snowloop() {	requestAnimationFrame(snowloop);	for (i = 0; i <= tiles_h; i++) {	for (j = 0; j <= tiles_w; j++) {	var next_x = Math.floor(Math.random() * (blocksize - tilesize))	var next_y = Math.floor(Math.random() * (blocksize - tilesize))	context.drawImage(offBlockCanvas, next_x, next_y, tilesize, tilesize, j * tilesize, i * tilesize, tilesize, tilesize);	}	}	}	function snowinit() {	var doc = document;	h = Math.max(	doc.body.scrollHeight, doc.documentElement.scrollHeight,	doc.body.offsetHeight, doc.documentElement.offsetHeight,	doc.body.clientHeight, doc.documentElement.clientHeight	);	w = Math.max(	doc.body.scrollWidth, doc.documentElement.scrollWidth,	doc.body.offsetWidth, doc.documentElement.offsetWidth,	doc.body.clientWidth, doc.documentElement.clientWidth	);	blocksize = Math.floor(h / 2);	tilesize = Math.floor(blocksize / 8);	tiles_w = Math.floor(w / tilesize);	tiles_h = Math.floor(h / tilesize);	drawing = document.getElementById("snow");	drawing.width = w;	drawing.height = h;	context = drawing.getContext("2d");	context.beginPath(); context.rect(0, 0, w, h); context.fillStyle = 'black'; context.fill();	offBlockCanvas = document.createElement("canvas");	offBlockContext = offBlockCanvas.getContext("2d");	offBlockCanvas.width = blocksize;	offBlockCanvas.height = blocksize;	imageData = offBlockContext.getImageData(0, 0, blocksize, blocksize); var imagedata = imageData.data;	for (i = 0; i < blocksize * blocksize * 4; i+=4) {	var pixelcolor = parseInt(Math.random() * 8)	if (pixelcolor > 3) {	pixelcolor = 4;	}	imagedata[i] = colors[pixelcolor][0];	imagedata[i + 1] = colors[pixelcolor][1];	imagedata[i + 2] = colors[pixelcolor][2];	imagedata[i + 3] = colors[pixelcolor][3];	}	offBlockContext.putImageData(imageData, 0, 0);	snowloop();	}
snowinit();
White Noise - Script Codes
White Noise - Script Codes
Home Page Home
Developer Chris Newcombe
Username Newcombe
Uploaded January 27, 2023
Rating 3
Size 2,552 Kb
Views 4,048
Do you need developer help for White Noise?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Newcombe (Newcombe) Script Codes
Name
IB Slider
CSS Filters
JQuery Auto-Update Copyright Year
Verification
Tester SK
Testing
Value Based Conditional CSS
Required Input Field
Delta 2
JS Add HTML Tag
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!