gwf.github.io/index.html at master · gwf/gwf.github.io · GitHub

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
<!DOCTYPE html><html><head>
<title>flake.org</title>
<style>
  * { margin: 0; padding: 0; }
  html, body, #viewport { width: 100%; height: 100%; }
</style>
<script type="text/javascript">

//////////////////////////////////////////////////////////////////////////////

window.onload = function() {

  var sz = 4, gap = 1, delay = 2, decay = 0.99, pcnt = 0.35;
  var canvas = document.getElementById("viewport");
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;
  var context = canvas.getContext("2d");
  var cw = Math.floor((width - gap) / (sz + gap));
  var ch = Math.floor((height - gap) / (sz + gap));
  var done = 0;
  var state, newstate, gray;

//////////////////////////////////////////////////////////////////////////////

  function init() {
    canvas.width = width = cw * (sz + gap) + gap;
    canvas.height = height = ch * (sz + gap) + gap;
    state = new Array(ch);
    newstate = new Array(ch);
    gray = new Array(ch);
    for (var i = 0; i < ch; i++) {
      state[i] = new Array(cw)
      newstate[i] = new Array(cw)
      gray[i] = new Array(cw)
    }

    window.onclick = function() { done = !done; };
    context.fillStyle = "rgb(40,40,40)";
    context.fillRect(0, 0, width, height);
    for (var i = 0; i < ch; i++)
      for (var j = 0; j < cw; j++) {
        state[i][j] = Math.random() > pcnt ? 1 : 0;
        gray[i][j] = state[i][j] ? 0 : 255;
      }
  }

//////////////////////////////////////////////////////////////////////////////

  function drawCell(i, j, color) {
    context.fillStyle = color;
    context.fillRect(gap + i * (sz + gap), gap + j * (sz + gap), sz, sz);
  }

//////////////////////////////////////////////////////////////////////////////

  function drawCells() {
    for (i = 0; i < ch; i++)
      for (j = 0; j < cw; j++) {
        var val = state[i][j] ? 0 : 255;
        if (val == 0)
          gray[i][j] = val;
        else {
          val =  gray[i][j] = Math.ceil(
            decay * gray[i][j] + (1 - decay) * val);
          val = Math.floor(256 + (val - 256) / 2);
        }
        val = 255 - val;
        var color = "rgb(" + val + "," + val + "," + val + ")";
        drawCell(j, i, color);
      }
  }

//////////////////////////////////////////////////////////////////////////////

  function updateState() {
    for (var i = 0; i < ch; i++) {
      for (var j = 0; j < cw; j++) {
        var sum = 0;
        for (var k = -1; k <= 1; k++) {
          for (var l = -1; l <= 1; l++) {
            if (k == 0 && l == 0) continue;
            var ni = (i + k + ch) % ch;
            var nj = (j + l + cw) % cw;
            sum += state[ni][nj];
          }
        }
        rule = "2333"
        newstate[i][j] = state[i][j];
        if (sum < parseInt(rule[0]) || sum > parseInt(rule[1]))
          newstate[i][j] = 0;
        if (sum >= parseInt(rule[2]) && sum <= parseInt(rule[3]))
          newstate[i][j] = 1;
      }
    }
    var temp = state;
    state = newstate;
    newstate = temp;
  }

//////////////////////////////////////////////////////////////////////////////

  function loop() {
    if (!done) {
      window.requestAnimationFrame(function () {
        setTimeout(loop, delay);
      });
      updateState();
      drawCells();
    }
    else
      setTimeout(loop, 250);
  }

//////////////////////////////////////////////////////////////////////////////

  init();
  loop();
}

//////////////////////////////////////////////////////////////////////////////

</script></head>
<body><canvas id="viewport"></canvas></body></html>