Canvas ImageData getRandomSpherePos

Example

by Niklas Knaack

JavaScript

var quantity = 5000;

var w = 480;
var h = 480;

var center2D = { x:w / 2, y:h / 2 };
var center3D = { x:0, y:0, z:0 };

var radius = 150;

var color = { r:255, g:255, b:255, a:255 };

var fov = 450;

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

var context = canvas.getContext( '2d' );
	context.fillStyle = '#000000';
	context.fillRect( 0, 0, w, h );

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

function getRandomSpherePos( center, radius ) {
 
    var u = Math.random();
    var v = Math.random();
    var theta = 2 * Math.PI * u;
    var phi = Math.acos( 2 * v - 1 );
 
    var x = center.x + ( radius * Math.sin( phi ) * Math.cos( theta ) );
    var y = center.y + ( radius * Math.sin( phi ) * Math.sin( theta ) );
    var z = center.z + ( radius * Math.cos( phi ) );
 
    return { x:x, y:y, z:z };
 
};

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;

};

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

	var position3D = getRandomSpherePos( center3D, radius );

	scale = fov / ( fov + position3D.z );
    
    var position2D = {};
    	position2D.x = position3D.x * scale + center2D.x | 0; 
    	position2D.y = position3D.y * scale + center2D.y | 0;
    
    setPixel( position2D.x, position2D.y, color );

}

context.putImageData( imageData, 0, 0 );