Man I hated maths in high school. Not due to the endless formulae one had to commit to memory, nor thanks to the high-panted teachers whose droning nearly caused me several times to thrust the blackboard protractor into my heart; but because, apart from helping me to estimate how many beers my teenage income would allow me on a Friday night, maths never presented me with practical solutions for my everyday problems.
Because of this, I knew I was condemned to a life of esoteric artistic theory, beyond the influence of the harsh laws of the universe.
Now I realise I wasn’t being half has geeky as I should have been.
So, at present I’m working on an interface to present XML data of programme scheduling, which plots coordinates around a centre grouped by broadcasting network and positioned by the programme’s proximity to the current time. See Figure 1.
Each colour represents a different network’s programmes. In my version version you get the program information when you mouse over the circles.
The math is simple. We’re rotating around a centre point in degrees, defining a length from the centre (in my case based on the time from now) and, using trigonometry, calculating x and y values (the end point of the hypotenuse) to plot our points.
The basic setup will be a div - let’s give it an id of canvas.
<div id="canvas"></div>
And apply some CSS:
#canvas {
height:400px;
width:400px;
position:relative;
}
We’ll also need to define the CSS for our circles. Firstly the default style for the small dots:
.circle, .circle-red {
background:url (circle-blue.png) 0 0 no-repeat;
position:absolute;
cursor:pointer;
width:20px;
height:20px;
}
.circle-red {
background-image:url (circle-red.png);
}
And then our centre point:
#now.circle {
background:url (centre.png) 0 0 no-repeat;
width:40px;
height:40px;
}
The width and height is up to you. I’ve kept it as a square to make the calculations easier.
And the JavaScript. You will see that I’m using jquery.
First we need to store the centre point of our canvas. Unless you specify otherwise, JavaScript will think that your centre point is 0, 0. So it’s up to us to add the offset. 
var CENTER_X = 200; // or $('#canvas').width()/2
var CENTER_Y = 200; // or $('#canvas').height()/2
This is where we get x y coords. We need to pass an angle in degrees (0 - 360) along which we want to plot our points and the distance (len) from the centre. In my version, I calculate the distance based on a ratio of the programme’s start time minus the current time.
function getCoords(degrees, len) {
// to use JavaScript's trig functions we need to convert degrees into radians
var radians = toRadians(degrees);
// calculate store our coords
// make sure to add the offset of our centre point so it actually appears in the centre rather than at 0, 0
var coords = {};
coords.x = CENTER_X + Math.floor(Math.cos(radians)*len);
coords.y = CENTER_Y + Math.floor(Math.sin(radians)*len);
return coords;
}
// degrees to radians
function toRadians(deg) {
return deg * Math.PI/180;
}
This is where we store all our created points for later reference.
var CIRCLES = {};
Now our circle factory. Arguments:
- an id (for each point)
- a class name (to control the look of our
- the size of my point in pixels
- the direction (angle) in which we want to travel from the centre
- the distance from the centre we want to travel
You might find that you don’t need to pass through an id or want further parameters like mouseover content or whatever.
function Circle (id, classname, size, angle, len) {
// create and append the div that will be our point to our canvas
$('#canvas').append('<div id="' + id + '" class="' + classname + '></div>');
// get our x and y values
var coords = getCoords(angle, len);
// because we want them to line up nicely we change the registration point to the centre
var _left = coords.x - (size/2);
var _top = coords.y - (size/2);
// position it
$('#'+id).css({left:_left+"px", top:_top+"px"});
// store our default values
this.id = id;
this.size = size;
this.angle = angle;
this.len = len;
this.x = _left;
this.y = _top;
CIRCLES[id] = this;
}
So now we just need to create a circle on the page. Let’s start with the centre!
new Circle('now', 'circle', 40, 0, 0);
Now you’ll notice that I’ve been too lazy to check my arguments, provide fallbacks and defaults and have probably left a 100 things out, but you get the general idea.
