Skip to content

Instantly share code, notes, and snippets.

@nbenns

nbenns/flame.html

Last active October 15, 2020 13:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nbenns/f263f05efddff26dce0b82f155326438 to your computer and use it in GitHub Desktop.
Save nbenns/f263f05efddff26dce0b82f155326438 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flame.html
<html>
<body>
<canvas id="canvas1" width="500", height="500">
Random Canvas
</canvas>
<script type="text/javascript">
element = document.getElementById("canvas1");
c = element.getContext("2d");
// read the width and height of the canvas
width = parseInt(element.getAttribute("width"));
height = parseInt(element.getAttribute("height"));
// create a new pixel array
imageData = c.createImageData(width, height);
function setPixel(x, y, r, g, b, a) {
index = (x + (height - 1 - y) * width) * 4;
imageData.data[index+0] = r;
imageData.data[index+1] = g;
imageData.data[index+2] = b;
imageData.data[index+3] = a;
}
function draw() {
// draw random dots
for (i = 0; i < width; i++) {
setPixel(i, 0, parseInt(Math.random() * 256), 0, 0, 0xff);
}
// flame average
for (y1 = height; y1 > 0; y1--) {
for (xi = 1; xi < 50; xi++) {
x1 = parseInt(Math.random() * width);
r1 = imageData.data[((x1 - 1) + (height - y1) * width) * 4];
r2 = imageData.data[(x1 + (height - y1) * width) * 4];
r3 = imageData.data[((x1 + 1) + (height - y1) * width) * 4];
r = (r1 + r2 + r3) / 3;
if (r > 50) {
r = r + parseInt(Math.random() * 100) - 50;
}
setPixel(x1, y1, r, 0, 0, 0xff);
}
}
c.putImageData(imageData, 0, 0); // at coords 0,0
}
setInterval("draw()", 1);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment