js-graphics/fire.htm at master · filetray/js-graphics · 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
124
125
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Fire</title>
  <style>
  #canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
  </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {window.setTimeout(callback, 1000 / 60);};
})();
</script>

  <script>

  var q = window.innerHeight / window.innerWidth;
  var w = 320, h = Math.floor(q * w);

  var paleta = [], m = [];
  for (var i = 0; i < 255; i++)
    paleta[i] = [i, i/3, 0];

  var canvas = document.getElementById("canvas");
  canvas.height = h;
  canvas.width = w;

  var ctx = canvas.getContext("2d");
  var image = ctx.getImageData(0, 0, w, h);
  var mem = image.data;

  for (var i = 0; i < mem.length; i += 4)
  {
    m[i / 4] = 0;
    mem[i + 3] = 255;
  }
  ctx.putImageData(image, 0, 0);

  function draw()
  {
    ctx.putImageData(image, 0, 0);
  }

  function memset(i, v, f = 0) {
    while (v > 255) v -= 255;
    p = paleta[v];
	m[i] = v;
    mem[4*i] = p[0];
    mem[4*i + 1] = p[1];
    mem[4*i + 2] = p[2];
    if (f)
      draw();
  }
  function memget(i)
  {
    return typeof(m[i]) == "undefined" ? 0 : m[i];
  }

  function kvadrat()
  {
    var imax = w - 10;
    var i, j;
    var v = 250;
    j = 10;
    for (i = 10; i < imax; i++)
    {
      memset(w*j + i, v);
    }
  }

  function ogenj_nastavi()
  {
    for (var i = 0; i < w; i++) {
      memset((h - 1) * w + i, Math.round(Math.random() * 160))
      memset((h - 2) * w + i, Math.round(Math.random() * 160))
    }
  }
  function ogenj_gori() {
    var imax = w - 1;
    for (var j = 1; j < (h - 2); j++) {
    for (var i = 1; i < w; i++) {
      var v = memget((j+2)*w+i) + memget((j+1)*w+i) + memget((j+1)*w+i-1) + memget((j+1)*w+i+1) >>> 2;
      if (v > 1) {
        v--;
      }
      memset(j*w+i, v);
    }
    }
    ogenj_nastavi();
  }

  function ogenj_animacija() {
    ogenj_gori();
    draw();
    requestAnimFrame(ogenj_animacija);
  }

  window.addEventListener("load", ogenj_animacija);

  </script>

</body>
</html>