jordic/canvas_noise.html

## canvas_noise.html
<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>
	<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[i4] = Math.floor(Math.random()255); // Red
	pixels[i4+1] = Math.floor(Math.random()255); // Green
	pixels[i4+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>