Drawing Circles in Javascript - part 4 in a series

Background Principals

First, let's review a little basic trigonometry. If 'r' is the radius of a circle, and 'a' is an angle, r x cos(a) is the x coordinate of a point on the perimeter of that circle, and r x sin(a) is the y coordinate of that same point.

We can draw a circle, by drawing a bunch of short lines from the point at the angle 'a' to the point at 'a + a small change in angle' all of the angles between 0 and Π radians. For example, if you choose "a small change in angle" to be Π/6, the circle would look like a hexagon.

Anyway, the point is to make the lines around the edge of the circle numerous enough that the circle looks smooth. Since our maximum resolution on a computer screen is a pixel, the edge of the circle will never be completely smooth, but it can get close enough to fool your eye into seeing a circle.

These are the principals I used to render a circle, using java script, and a bunch of HTML "div" tags, below.

javascript circle

A slightly irregular, but very recognizable circle
A slightly irregular, but very recognizable circle

comments on drawing a circle in Javascript

There is a certain amusing irony to making javascript draw in circles. There also interesting points to be made about drawing circles both in regard to programming and Mathematics.

I will use small rectangles, from a previous hub, to draw lines.

I will use line drawing, from a previous hub, to render the circle on the screen.

I will use coordinate mapping, also from a previous hub, so that I can make the simplifying assumption that I am drawing a unit circle (radius of one unit).

Programming is like that, small steps accumulate until you have enough tools to do something bigger.

There are many ways to interpolate the points on a curve in order to render the curve on graph, or simply to provide some other computer processable representation of the curve. The method I chose is obvious, and straight forward. I simply compute two adjacent points on the curve, and draw a line between them. This usually works well enough when the adjacent points are reasonably close on the screen. I did optimize this slightly. I compute an adjacent point further down the curve until I find two with different screen coordinates, before drawing a line.

The function, drawcurve, performs the selection of points to interpolate, and renders the lines between them. Its first argument is a function that computes a path in two dimensions. Here the javascript term "function" and its mathematical counterpart mean slightly different things. The mathematical meaning of a function in 2 dimensions is that given an x value, the function will have a unique y value. Given that definition, a circle can't be described by a 2-d function. So, I use a path function; given a distance along a path, return the x and y value of the point on the path, at that distance. A circle is a path in 2-d space.

The actual formula for the path requires me to recall some trigonometry. The projection of an angle along the x axis is cos(x), and sin(x) for the projection onto the y axis.

With that, here goes!


javascript code for drawing a circle

<html>
<head>
<style type="text/css" >
.whiterectangle { color: white; background-color: white; z-index: 0;}
.blackrectangle { color: black; background-color: black; z-index: 1;}
</style>
<script type="text/javascript" >

var jgpointbase = {
	x: 0,
	y: 0
};

function jgpoint( ) {
	this.prototype = jgpointbase;
	//this.x = x;
	//this.y = y;
};

function jgptsc( x, y ) {
		var rval = new jgpoint( );
		rval.x =  this.screenx0 + (( this.screenx1 - this.screenx0 ) / ( this.x1 - this.x0 

)) * ( x - this.x0 );
		rval.y =  this.screeny0 + (( this.screeny1 - this.screeny0 ) / ( this.y1 - this.y0 

)) * ( y - this.y0 );
		return( rval );
}

var jgcoordinatesbase = {
	x0: -1.25,
	screenx0: 50,
	y0: -1.25,
	screeny0: 450,
	x1: 1.25,
	screenx1: 450,
	y1: 1.25,
	screeny1: 50,
	pointToScreenCoordinates: jgptsc
};

function jgcoordinates() {
}

jgcoordinates.prototype = jgcoordinatesbase;


function drawrectangle( myclass, top, left, width, height )
{
	var bodylist = document.getElementsByTagName( "body" );
	var rect = document.createElement( "div" );
	var mystyle = 'position:absolute;top:' + top + ";left:" + left + ';width:' + width + 

";height:" + height;
	rect.setAttribute( "class", myclass );
	rect.setAttribute( "style", mystyle );
	bodylist[0].appendChild( rect );
}

function drawline( width, x1, y1, x2, y2 )
{
	var x, y, nexty, nextx;
	x1 = Math.round( x1 );
	y1 = Math.round( y1 );
	x2 = Math.round( x2 );
	y2 = Math.round( y2 );
	// ensure x1, y1 is leftmost point
	if( x1 > x2 ) {
		tmp = x2;
		x2 = x1;
		x1 = tmp;
		tmp = y2;
		y2 = y1;
		y1 = tmp;
	}
	var dx = x2 - x1;
	var dy = y2 - y1;

	if( dy == 0 ) { // horizontal line
		drawrectangle( "blackrectangle", y1 - width / 2, x1, dx, width );
		return;
	} else if ( dx == 0 ) { // vertical line
		drawrectangle( "blackrectangle", y1, x1 - width / 2, width, dy );
		return;
	}
	var slope = dy / dx;
	if( slope > 1 || slope < -1 ) {
		// one x per multiple y
		if( y1 < y2 ) {
			y = y1;
			for( x = x1 ; x < x2 ; x += 1 ) {
				nexty = y + slope;
				drawrectangle( "blackrectangle", y, x - width / 2, width, nexty - y 

);
				y = nexty;
			}
		} else {
			y = y1;
			for( x = x1 ; x < x2 ; x += 1 ) {
				nexty = y + slope;
				drawrectangle( "blackrectangle", nexty, x - width / 2, width, y - 

nexty );
				y = nexty;
			}
		}

	} else {
		// one y per multiple x
		if( y1 < y2 ){
			x = x1;
			for( y = y1 ; y < y2 ; y += 1 ) {
				nextx = x + 1 / slope;
				drawrectangle( "blackrectangle", y - width / 2, x, nextx - x, width 

);
				x = nextx;
			}
		} else {
			x = x2;
			for( y = y2 ; y < y1 ; y += 1 ) {
				nextx = x + 1 / slope;
				drawrectangle( "blackrectangle", y - width / 2, nextx, x - nextx, 

width );
				x = nextx;
			}
		}
	}
		
	
}

function jgcircle( angle ) {
	var rval = new jgpoint();

	rval.x = Math.cos( angle );
	rval.y = Math.sin( angle );
	return( rval );
}

function drawcurve( curvefn, coord, fnstart, fnstop, delta ) {
	var pt;
	var fofpt;
	var screenpt, newscreenpt;

	fofpt = curvefn( fnstart );
	screenpt = coord.pointToScreenCoordinates( fofpt.x, fofpt.y );
	for( pt = fnstart + delta ; pt <= fnstop + delta ; pt += delta ) {
		fofpt = curvefn( pt );
		newscreenpt = coord.pointToScreenCoordinates( fofpt.x, fofpt.y );
		if( screenpt.x != newscreenpt.x || screenpt.y != newscreenpt.y ) {
			drawline( 4, screenpt.x, screenpt.y, newscreenpt.x, newscreenpt.y );
			screenpt = newscreenpt;		
		}
	}
}
</script>
</head>
<body>
<script type="text/javascript" >
drawrectangle( "whiterectangle", 0, 0, "100%", "100%" );  // make a background rectangle, not 

necessary with default browser settings
var unitsquare = new jgcoordinates();
startpoint = unitsquare.pointToScreenCoordinates( -1, -1 );
endpoint = unitsquare.pointToScreenCoordinates( 1, 1 );
drawcurve( jgcircle, unitsquare, 0, 2 * 3.1415929, 0.1 );
</script>
</body>
</html>

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working