operator-DD3/noise.html

## noise.html
<style type="text/css">
html, body, canvas {
  height: 100%;
  width: 100%;
  border-radius: 16px;
}
body {
  display: flex;
  background: black;
}

div{
	flex: 1;
}
.c {
  flex: 1;
}

.c {
	width: 100%;
}
</style>
<body>
<div>
<canvas id='c'></canvas>
 </div>
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

//alert(window.screen.availWidth);
var w = canvas.width = 320;
//var w = canvas.width = window.screen.availWidth;
var h = canvas.height = 240;
//var h = canvas.height = window.screen.availHeight;
var t1 = new Date().getTime();
var frame_count = 0;
ctx.font = 'normal 400 24px/2 Unknown Font, sans-serif';
var img = ctx.createImageData(w, h);

var index_init = 0;
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
img.data[index_init + 3] = 255; // alpha
index_init += 4;
}
}

function animate() {
var index = 0;
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
var value = (Math.random() > 0.5) ? 255 : 0;
img.data[index ] = value;
img.data[index + 1] = value;
img.data[index + 2] = value;
// alpha channel is constant
index += 4;
}
}

ctx.putImageData(img, 0, 0);

frame_count++;
if (frame_count % 50 == 0) {
var fps = frame_count / (new Date().getTime() - t1) * 1000;
window.status = fps.toFixed(2) + " fps";
}

setTimeout(animate, 0);
}

animate();
</script>
</body>
	<style type="text/css">
	html, body, canvas {
	height: 100%;
	width: 100%;
	border-radius: 16px;
	}
	body {
	display: flex;
	background: black;
	}

	div{
	flex: 1;
	}
	.c {
	flex: 1;
	}

	.c {
	width: 100%;
	}
	</style>
	<body>
	<div>
	<canvas id='c'></canvas>
	</div>
	<script>
	var canvas = document.getElementById('c');
	var ctx = canvas.getContext('2d');

	//alert(window.screen.availWidth);
	var w = canvas.width = 320;
	//var w = canvas.width = window.screen.availWidth;
	var h = canvas.height = 240;
	//var h = canvas.height = window.screen.availHeight;
	var t1 = new Date().getTime();
	var frame_count = 0;
	ctx.font = 'normal 400 24px/2 Unknown Font, sans-serif';
	var img = ctx.createImageData(w, h);

	var index_init = 0;
	for (var x = 0; x < w; x++) {
	for (var y = 0; y < h; y++) {
	img.data[index_init + 3] = 255; // alpha
	index_init += 4;
	}
	}

	function animate() {
	var index = 0;
	for (var x = 0; x < w; x++) {
	for (var y = 0; y < h; y++) {
	var value = (Math.random() > 0.5) ? 255 : 0;
	img.data[index ] = value;
	img.data[index + 1] = value;
	img.data[index + 2] = value;
	// alpha channel is constant
	index += 4;
	}
	}

	ctx.putImageData(img, 0, 0);

	frame_count++;
	if (frame_count % 50 == 0) {
	var fps = frame_count / (new Date().getTime() - t1) * 1000;
	window.status = fps.toFixed(2) + " fps";
	}

	setTimeout(animate, 0);
	}

	animate();
	</script>
	</body>