Skip to content

Instantly share code, notes, and snippets.

@jordic
Created August 11, 2012 20:09
Show Gist options
  • Save jordic/3326904 to your computer and use it in GitHub Desktop.
Save jordic/3326904 to your computer and use it in GitHub Desktop.
HTML Noise Canvas
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Noise Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script>
<script type="text/javascript">
/*
Un pequeño ejemplo de como escribir bitmaps en un objeto canvas,
en este caso generamos un bitmap de ruido y lo escribimos en el canvas.
*/
$(document).ready(function() {
// Puntero al objeto canvas
var canvas = document.getElementById('ejercicio');
// contexto para empezar a escrivir
var pt = canvas.getContext('2d');
// Programamos un intervalo que se ejecutará
// cada 10 ms 10/1000 segundos
setInterval(function() {
// Generamos una imágen aleatória ( ruido )
var image_data = write_image( pt );
// la escribimos en el objeto canvas
pt.putImageData( image_data, 0, 0);
}, 10);
write_image = function(pt) {
var imageData = pt.createImageData(200, 200);
var pixels = imageData.data;
var numPixels = imageData.width*imageData.height;
// Cada posicion de la imagen, esta compuesta por quatro
// elementos, uno por color, mas el canal alpha
for (var i = 0; i < numPixels; i++) {
pixels[i*4] = Math.floor(Math.random()*255); // Red
pixels[i*4+1] = Math.floor(Math.random()*255); // Green
pixels[i*4+2] = Math.floor(Math.random()*255); // Blue
pixels[i*4+3] = 255; // Alpha
};
return imageData
}
});
</script>
</head>
<body>
<canvas width="200" height="200" style="border:1px solid grey" id="ejercicio"> </canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment