Canvas ImageData setPixel Example 2

Example

by Niklas Knaack

JavaScript

var canvas = document.createElement( 'canvas' );
	canvas.width = 512;
	canvas.height = 512;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );

var imageData = context.getImageData( 0, 0, 512, 512 );
var data = imageData.data;

function setPixel( x, y, c ) {

    var i = ( x + y * imageData.width ) * 4;

    data[ i ] = c.r;
    data[ i + 1 ] = c.g;
    data[ i + 2 ] = c.b;
    data[ i + 3 ] = c.a;

};

var centerX = Math.floor( Math.random() * 512 );
var centerY = Math.floor( Math.random() * 512 );
var td = Math.floor( Math.random() * 49 ) + 1;

for ( var y = 0; y < 512; y++ ) {

    for ( var x = 0; x < 512; x++ ) {
    
		var x2 = x - centerX;
		var y2 = y - centerY;
		var d = Math.sqrt( x2 * x2 + y2 * y2 );
		var t = Math.sin( d / td );

		var r = t * 200;
		var g = 235 + t * 20;
		var b = 125 + t * 80;

        var color = { r:Math.max( 0, Math.min( 255, r ) ), 
					  g:Math.max( 0, Math.min( 255, g ) ), 
					  b:Math.max( 0, Math.min( 255, b ) ), 
					  a:255 };

        setPixel( x | 0, y | 0, color );
        
    }
}

context.putImageData( imageData, 0, 0 );