JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="cvs" width="40" height="240" style="float : left;"></canvas>
<div>
  Power:<button onclick="setPower(10)" class="power">Low</button><button onclick="setPower(100)" class="power">Middle</button><button onclick="setPower(1000)" class="power">High</button><br>
  Color:<button onclick="setColor(['r','g','b'])">Red</button><button onclick="setColor(['b','g','r'])">Blue</button><button onclick="setColor(['g','r','b'])">Green</button><br>
  Gradation:<button onclick="setRough(32)">Rough</button><button onclick="setRough(8)">Normal</button><button onclick="setRough(4)">Smooth</button><br>
  Type:<button onclick="fire.type = 0;">0</button><button onclick="fire.type = 1;">1</button><br>
Height : <span id="height"></span>
</div>
<script>

</script>

JavaScript

/**************************************
   fire.js
**************************************/
if (!window.Fire) {

var Fire = function (cvs, width, height, opt) {
  var i;
  if (!opt) opt = {};
  this.cvs = typeof cvs === "string" ? document.getElementById(cvs) : cvs;
  this.ctx = this.cvs.getContext("2d");
  this.width = width || +this.cvs.width;
  this.height = height || +this.cvs.height;
  this.imageData = this.ctx.createImageData(this.width, this.height);

  for (var i = 0; i < this.width * this.height; i++) {
    this.imageData.data[i * 4 + 3] = 255;
  }

  this.high = 0;
  this.rough = opt.rough || 8;
  this.color = opt.color || ["r", "g", "b"];
  this.fluct = !isNaN(opt.fluct) ? opt.fluct : this.width * 0.1;
  if (this.fluct > this.width) this.fluct = this.width;
  this.speed = opt.speed || 8;
  this.power = (opt.power || 100);
  this.type = opt.type || 0;
  this.seed();
};

(function (p) {
  function shuffle(arr) {
    var a, b, x;
    for (var i = 0; i < arr.length; i++) {
      a = ~~(Math.random() * arr.length);
      b = ~~(Math.random() * arr.length);
      x = arr[a];
      arr[a] = arr[b];
      arr[b] = x;
    }
    return a;
  }


  p.seed = function () {
    var data = this.imageData.data, n, i, a = [];
    for (i = this.fluct; i < this.width; i++) a[i] = false;
    for (i = 0; i < this.fluct; i++) a[i] = true;
    shuffle(a);

    for (n = 0, i = 4 * this.width * (this.height - 1); i < data.length; i += 4, n++) {
      if (a[n]) {
        data[i + 0] = 0;
        data[i + 1] = 0;
        data[i + 2] = 0;
        data[i + 3] = 255;
      } else {
        data[i + 0] = 255;
        data[i + 1] = 255;
        data[i + 2] = 255;
        data[i + 3] = 255;
      }
    }
  };

  p.moveSeed = function () {
    var i = 4 * this.width * (this.height - 1), data = this.imageData.data;
    for (; i < data.length - 4; i += 4) {
      if (data[i] !== data[i + 4] && ~~(Math.random() * this.speed) === 0) {
        data[i] = 255 - data[i];
        data[i + 1] =...