Adding Colors to Disappearing Dots

July 30, 2012

This is a second iteration to the disappering dots.
As the title says, I’m adding colors to dots.
How about some nice color variations in blue.

I found a very minimum implementation of HSV to RGV conversion here: http://spphire9.wordpress.com/2011/03/03/javascript%E3%81%A7hsv%E3%81%8B%E3%82%89rgb%E5%A4%89%E6%8F%9B/

Hue is a random value from 200 to 240.
Saturation is between 50 to 100.
Value is also between 50 to 100.

Size of circles is also randomized this time.

Use of HSV, I learned from this lecture notes: http://yoppa.org/cuc_prog12/3766.html
It’s all in Japanese but code is in processing, so you don’t really need to read Japanese.

window.onload = (function(win, doc) {
  var c,
      TWOPI = 2*Math.PI, 
      last = +(new Date()),
      // a bit slower fading out
      MY_BLACK = "rgba(0, 0, 0, 0.4)",
      WIDTH = 400,
      HEIGHT = 400;

  var hsva(h, s, v, a) {
      var f = h/60,
          i = f^0,
          m = v-v*s,
          k = v*s*(f-i),
          p = v-k,
          q = k+m;
          return 'rgba('
            +[[v,p,m,m,q,v][i]*255^0,
            [q,v,v,p,m,m][i]*255^0,
            [m,m,q,v,v,p][i]*255^0,a].join(',')
            +')';
  }

  function randomWithin(a, b) {
      var diff = b - a;
      var val = Math.floor(Math.random() * diff + a);
      return val;
  }

  var randomPoint = function() {
    return Math.floor(Math.random() * WIDTH  + 1);
  }

  var draw = function() {
    var now = +(new Date());
    c.fillStyle = MY_BLACK;
    c.fillRect(0, 0, WIDTH, HEIGHT);
    if (now - last > 1000) {
      // hue being 200 to 240 generates bluish color variations
      c.fillStyle = hsva(randomWithin(200, 240), 
                         randomWithin(50, 100)/100,
                         randomWithin(50, 100)/100,
                         .5);
      c.beginPath();
      c.arc(randomPoint(), randomPoint(), 5, 0, TWOPI, true);
      c.fill();
      last = now;
    }
    win.requestAnimationFrame(draw);
  }

  var init = function() {
    var canvas = doc.getElementById("ground");

    c = canvas.getContext("2d");
    c.fillStyle = "#000";
    c.fillRect(0, 0, WIDTH, HEIGHT);

    win.requestAnimationFrame(draw);
  };

  return init;
}(window, document));

Read more