#MonthOfCode - Day 2: border

My entry for the 2nd day of the month of code. The theme for today is: border.

It’s not perfect, but I’ve already spent way too much time of this one :-)

Code after the break.

border.jsview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
document.addEventListener('DOMContentLoaded', function() {
  var requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

  var canvas = document.getElementById('moc-2');
  var ctx = canvas.getContext('2d');

  function rand(n) {
    return Math.floor(Math.random() * n);
  }

  function randColor() {
    return 'rgb(' + rand(256) + ', ' + rand(256) + ', ' + rand(256) + ') ';
  }

  function Circle(x, y, growth, color) {
    this.x = x;
    this.y = y;
    this.r = 0;
    this.growth = growth;
    this.color = color;
    this.fixed = [];
  }
  Circle.prototype.draw = function () {
    ctx.fillStyle = this.color;
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;

    ctx.translate(this.x, this.y);
    ctx.beginPath();
    for (var i = 0; i <= 100; i++) {
      var a = i * Math.PI/50;
      if (this.fixed[i]) {
        x = this.fixed[i].x;
        y = this.fixed[i].y;
      } else {
        x = this.r * Math.cos(a);
        y = this.r * Math.sin(a);
      }
      ctx.lineTo(x, y);
    }
    ctx.stroke();
    ctx.fill();
    ctx.translate(-this.x, -this.y);
  };

  Circle.prototype.fix = function (i) {
    // fix a point
    this.fixed[i] = {
      x : this.r * Math.cos(i*Math.PI/50),
      y : this.r * Math.sin(i*Math.PI/50)
    }
  };

  Circle.prototype.eachFreePoint = function (f) {
    for (var i = 0; i <= 100; i++) {
      var a = i * Math.PI/50;
      if (!this.fixed[i]) {
        var x = this.x + this.r * Math.cos(a);
        var y = this.y + this.r * Math.sin(a)
        f(i, x, y);
      }
    }
  };

  Circle.prototype.contains = function (x, y) {
    var dx = this.x - x;
    var dy = this.y - y;
    var distToPoint = dx * dx + dy * dy;
    var distToBorder = this.r * this.r;
    return distToPoint < distToBorder;
  };

  Circle.prototype.update = function () {
    // linear radius growth is too quick at the beginning
    // linear surface growth is too slow at the end
    // let's do something in between

    var p = 1.6;
    this.r = Math.pow(Math.pow(this.r, p) + this.growth, 1/p);
  };

  var circles;

  function init() {
    circles = [];
    circles.push(new Circle( 25 + rand(225),  25 + rand(225), 10 + rand(30), randColor()));
    circles.push(new Circle( 25 + rand(225), 275 + rand(225), 10 + rand(30), randColor()));
    circles.push(new Circle(275 + rand(225), 275 + rand(225), 10 + rand(30), randColor()));
    circles.push(new Circle(275 + rand(225),  25 + rand(225), 10 + rand(30), randColor()));
  }


  function loop() {
    for (var i = 0; i < circles.length; i++) {
      if (circles[i].r > 300) {
        init();
        break;
      }
    }

    for (var i = 0; i < circles.length; i++) {
      circles[i].update();
    }

    // check collisions
    for (var j = 0; j < circles.length; j++) {
      for (var k = 0; k < circles.length; k++) {
        if (j !== k) {
          circles[j].eachFreePoint(function (i, x, y) {
            if (circles[k].contains(x, y)) {
              circles[j].fix(i);
            }
          });
        }
      }
    }

    canvas.width = canvas.width; // clear screen

    for (var i = 0; i < circles.length; i++) {
      circles[i].draw();
    }

    requestAnimFrame(loop);
  }
  init();
  loop();

});