17:32:05

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))
    };
  }

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