17:32:05

A canvas experiment to create abstract shapes from the current time.

Javascript

Canvas

Data Visualisation

This experiment was only very quick to make. I was feeling quite bored and it was around the time of me having to write my dissertation. I decided I needed a welcome distraction. I'd recently seen something online called what color is it?

It was incredibly simple, colour representing time by splitting the time into a 6 string hexadecimal value and then setting that as a colour property on the dom. I thought I'd try some data visualisation too. I'd dabbled in canvas a bit before so I thought this would be fun.

I also used it as an excuse to properly try out gulp and browserify. These allowed me to write my code in modules similiar to the commonjs format that is massively popular in nodejs.

I now had a chance to abstract ideas out, this mainly consisted of abstracting away a point class / object that could be generated and placed onscreen based on x, y and radius.

How I visualised it

I decided, that I would make a shape with 6 points, I would map them using polar coordinates around a circle based on splitting up a realtime timestring representation. Each number simply acted as a point of the shape and then I would connect and fill all the points creating a shape that looks like it has depth, yet also looks very abstract. The angles are worked out by dividing 360/amount of possible numbers. For the hours this means 0 or 1, so 2 and so on. This was more of an art piece other than actually being helpful.

Polar Coordinates

In order to map points around a circle that was the first thing I was going to have to learn. I did some google searching (I don't ever remember learning to do this at school) I learned that I needed to use something called polar coordinates.

To do this the formula was equal to something along the lines of x = x + (radius * cos of the angle) and for y it was y = y + (radius * sin of angle)

To make this as easy as possible I decided it would be cool to make a polarcoords function that would return a new x and y based on the x,y,radius and angle I passed it. This also meant that it's possible to pass it directly to my point / circle's update method.

  function polarCoords(x,y,r,angle) {
    return {
      x: x + (r * Math.cos(angle)),
      y: y + (r * Math.sin(angle))
    };
  }

Mapping the points to the time

Everything was now in place to turn the time into the points. To do this I made a timeToPoints function which accepts an array which is made from the current time. I then tied this into draw loop and simply get the time each tick, regenerate the array based of the new time. map them using the timeToPoints function and then connect them all, then repeat every frame.

The result was the abstract time you see at the top of the page. Here is the draw function

  function draw() {
    ctx.clearRect(0,0,_window.innerWidth,_window.innerHeight);
    circle.draw();
    var timeArray = timeToArray();
    timeToPoints(timeArray);
    DOMtime.innerHTML = timeToString(timeArray);
    connectDots(points);
  }

There is a lot more than what I mention going on in this project. However the important details to cover was learning about polar coordinates and mapping the time from an array to those points each second.

For a couple of days it was really good. I learned how to map points to a circle which I'm sure if something that can easily be applied to other things in the future. I was also able to play around with gulp and write client side code in a more modular fashion.

*I tweaked some values to get a more desirable shape. so have a fiddle.

If you're really interested on how the code works then please check it out on github