emotionalmarkup

Well, not really but the keywords are nice.

This is part of an idea that came to me after slipping in a puddle of cat’s piss. I’ve always wanted to start my own comic. I like drawing and writing and this activity, apart from writing children’s novels, seems to be one of the ways I could combine the two.

My problem is that I’m also lazy. Motivation rhymes with profanation and THAT’S IT. Why should I have to draw things twice?

So, after I picked myself up from my mighty fall cursing the feral feline who’d put me on my buttocks, I came upon the concept of developing a library of resuable images with the goal of creating the most visually repetitive and boring comic in the galaxy.

Have a look for yourselves.

It’s only conceptual and there are a few things I’ll concede:

• PNGs are a tad large - I know.
• Doesn’t work in ie6 - I don’t care.
• Not much variety - working on more drawings/photos later

My clock stopped working at home this afternoon so I thought I’d build a new one in JavaScript! It just shows the hour, minutes and seconds. Nothing special. If I ever come back to it, I want to add days and months so that I can remember the date as well.

It was a rush job so there are probably scenario bugs and better ways to organise the code, but hey, it’s nearly 6pm and it’s time to go out.

Also, because I want to alienate ie6 users I’m using a transparent png with no css hack.

Take a look at the time

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.