JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<canvas id="c" style="width:500px; height:500px; background-color: grey">
    
  
  </canvas>

JavaScript

var canvas = document.getElementById("c");
  var context = canvas.getContext("2d");

    var width = 500;//canvas.width;
    var height = 500;//canvas.height;

    var grid = [];
    function init_grid() {
      for(var i = 0; i < width; i++) {
        grid[i] = [];
        for(var j = 0; j < height; j++) {
          grid[i][j] = 0.0;
        }
      }
    }
    
    function assert_point_in_grid(x, y) {
      if(x < 0 || x > width || y < 0 || y > height)
        throw "Point (" + x + ", " + y + ") not in grid [" + width + " , " + height + "]";
    }

    var radius = 3;
    
    // from http://homepages.inf.ed.ac.uk/rbf/HIPR2/gsmooth.htm
    function _gaussian(x, y) {
      stdev = 1;
      return 1.0 / Math.sqrt(2 * Math.PI * stdev) * Math.exp(- (x*x + y*y) / (2 * stdev*stdev));
    }
  
    // from http://homepages.inf.ed.ac.uk/rbf/HIPR2/gsmooth.htm
    function gaussian_grid(radius) {
      var _gaussian_grid = [];
      for(var x = -radius; x <= radius; x++) {
        _gaussian_grid[x + radius] = [];
        for(var y = -radius; y <= radius; y++) {
          _gaussian_grid[x + radius][y + radius] = Math.round(127 * _gaussian(x, y));
        }
      }      
      return _gaussian_grid;
    }

    var radius = 2;    
    var _gaussian_grid = gaussian_grid(radius);
    

    function gaussian(xi, yi) {
      return _gaussian_grid[xi + radius][yi + radius];
    }

    var maximum = 0;
    function apply_gaussian(x, y) {
      for(var xi = -radius; xi <= radius; xi++) {
        for(var yi = -radius; yi <= radius; yi++) {
          var cell_value = grid[x + xi][y + yi] += gaussian(xi, yi);
          maximum = Math.max(cell_value, maximum);
        }
      }
    }

    function add_point(x, y) {
      assert_point_in_grid(x, y);
      apply_gaussian(x, y)
    }
    
    function each_row(action) {
      for(var y = 1; y <= height; y++) {
        action(y);
      }
    }
    
    function each_cell(action) {
      each_row(function(y) {
        for(var x = 1; x <=...