Skip to content

Instantly share code, notes, and snippets.

@joglr
Created December 20, 2013 20:38
Show Gist options
  • Save joglr/8061145 to your computer and use it in GitHub Desktop.
Save joglr/8061145 to your computer and use it in GitHub Desktop.
Grain
<html>
<head>
<title>Grain</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
* {
margin: 0; padding: 0;
overflow: hidden;
}
</style>
<script>
$(function() {
var canvas = document.getElementById('ctx'), H, W, x, y;
resize();
var c = canvas.getContext('2d');
function resize() {
H = $(window).innerHeight(),
W = $(window).innerWidth();
canvas.width = W;
canvas.height = H;
}
function pixel() {
for(var i = 0; i < 1000; i++) {
function n() {
return Math.round(Math.random() * 255);
}
var x = Math.round(W * Math.random()),
y = Math.round(H * Math.random());
var p = c.getImageData(x, y, 1, 1).data;
if(p[0] == 0) j = 255;
if(p[0] == 255) j = 0;
var color = 'rgb('+j+','+j+','+j+')';
/*color = 'rgb('+n()+','+n()+','+n()+')';*/
/*color = 'rgb('+j+','+j+','+j+')';*/
c.fillStyle = color;
c.fillRect(x, y, 1, 1);
}
};
window.setInterval(pixel, 1);
$(window).resize(function() { resize(); });
});
</script>
</head>
<body>
<canvas id="ctx"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment