Canvas ImageData setPixel Example 4

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' );
	context.fillStyle = '#000000';
	context.fillRect( 0, 0, 512, 512 );

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

function additiveBlendPixel( x, y, c ) {

	var i = ( x + y * imageData.width ) * 4;
    
    var r = data[ i ] + c.r;
    var g = data[ i + 1 ] + c.g; 
    var b = data[ i + 2 ] + c.b; 

    data[ i ] = r;
    data[ i + 1 ] = g;
    data[ i + 2 ] = b;
    data[ i + 3 ] = 255;
    
};

function drawSpiral() {

    var centerX = Math.floor( Math.random() * 512 );
    var centerY = Math.floor( Math.random() * 512 );
    var radius = 0;
    var angle = 0;
    var iterations = 50;
    var r = Math.floor( Math.random() * 255 );
    var g = Math.floor( Math.random() * 255 );
    var b = Math.floor( Math.random() * 255 );
    var color = { r:r, g:g, b:b, a:255 };

    for ( var i = 0; i < 10000; i++) {

        radius += 0.05;
        iterations += 0.05;

        angle += ( Math.PI * 2 ) / iterations;

        var x = centerX + radius * Math.cos( angle );
        var y = centerY + radius * Math.sin( angle );

        color.r -= 0.05;
        color.g -= 0.05;
        color.b -= 0.05;

        if ( x > 0 && x <= 512 && y > 0 && y <= 512 )
            additiveBlendPixel( x | 0, y | 0, color );

    }
    
}

for ( var i = 0; i < 100; i++) {

	drawSpiral();

}

context.putImageData( imageData, 0, 0 );