randcode-generator/animation.html

## animation.html
<html>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
  <body>
    x: <input type="text" id="x_t" value="0"><br>
    y: <input type="text" id="y_t" value="0"><br>
    len: <input type="text" id="len_t" value="2"><br>
    <button onclick="zerozero()">0, 0</button>
    <button onclick="count=0;reset();apply();addcount()">apply</button>
    <button onclick="reset();next();apply();addcount()">next</button><br>
    counter: <div id="counter"></div><br>
    <div id="table1"></div>
    <hr>
    <button onclick="nextalgo()">next</button>
    <div id="table2"></div>
  </body>
  <script>
    let count = 1
    let algox = 1
    let algoy = 1
    // var data = [
    //             [0, 1, 1, 1, 0],
    //             [1, 1, 1, 1, 0],
    //             [0, 1, 1, 1, 0],
    //             [0, 1, 1, 1, 0],
    //             [0, 1, 1, 1, 0]
    //             ]
    var data = [
                [1, 1, 1],
                [1, 0, 1],
                [1, 1, 1]
                ]
    function nextalgodisplay() {
      i = algox
      j = algoy
      $("#b" + i + "_" + j).css('background-color', 'yellow')
      i = algox-1
      j = algoy-1
      $("#b" + i + "_" + j).css('background-color', '#6ef041')
      i = algox
      j = algoy-1
      $("#b" + i + "_" + j).css('background-color', '#6ef041')
      i = algox-1
      j = algoy
      $("#b" + i + "_" + j).css('background-color', '#6ef041')
    }
    function nextalgo() {
      val1 = data[algox][algoy]
      if(val1 == 1) {
        data[algox][algoy] = Math.min(data[algox-1][algoy-1], Math.min(data[algox][algoy-1], data[algox-1][algoy])) + 1
      }
      algoy++
      if(algoy >= data[0].length) {
        algoy = 1;
        algox++;
      }
      $("#table2").html("")
      makeTable($("#table2"), data, "b");
      nextalgodisplay()
    }
    function zerozero() {
      $("#x_t").val(0)
      $("#y_t").val(0)
      count = 0
      addcount()
      reset()
      apply()
    }
    function addcount() {
      count++;
      $("#counter").html(count)
    }
    function next() {
      x1 = parseInt($("#x_t").val())
      x1++;
      $("#x_t").val(x1)
      if(x1 + parseInt($("#len_t").val()) > data[0].length) {
        y1 = parseInt($("#y_t").val())
        y1++;
        $("#x_t").val(0)
        $("#y_t").val(y1)
      }
    }
    function apply() {
      $("#counter").html(count)
      let startx = parseInt($("#x_t").val())
      let starty = parseInt($("#y_t").val())
      let length = parseInt($("#len_t").val())
      let endx = startx + length
      let endy = starty + length

      for(let i = starty; i < endy; i++) {
        for(let j = startx; j < endx; j++) {
          $("#a" + i + "_" + j).css('background-color', '#6ef041')
        }
      }
    }
    function reset() {
      for(let i = 0; i < data.length; i++) {
        for(let j = 0; j < data[i].length; j++) {
          $("#a" + i + "_" + j).css('background-color', '')
        }
      }
    }
    function makeTable(container, data, head="a") {
        var table = $("<table/>");
        $.each(data, function(rowIndex, r) {
            var row = $("<tr/>");
            $.each(r, function(colIndex, c) {
                row.append($("<td id="+ head + rowIndex + "_" + colIndex + ">").text(c));
            });
            table.append(row);
        });
        return container.append(table);
    }
    $(document).ready(function() {
      makeTable($("#table1"), data);
      apply()
      makeTable($("#table2"), data, "b");
      nextalgodisplay()
    });
  </script>
</html>
	<html>
	<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
	<body>
	x: <input type="text" id="x_t" value="0"><br>
	y: <input type="text" id="y_t" value="0"><br>
	len: <input type="text" id="len_t" value="2"><br>
	<button onclick="zerozero()">0, 0</button>
	<button onclick="count=0;reset();apply();addcount()">apply</button>
	<button onclick="reset();next();apply();addcount()">next</button><br>
	counter: <div id="counter"></div><br>
	<div id="table1"></div>
	<hr>
	<button onclick="nextalgo()">next</button>
	<div id="table2"></div>
	</body>
	<script>
	let count = 1
	let algox = 1
	let algoy = 1
	// var data = [
	// [0, 1, 1, 1, 0],
	// [1, 1, 1, 1, 0],
	// [0, 1, 1, 1, 0],
	// [0, 1, 1, 1, 0],
	// [0, 1, 1, 1, 0]
	// ]
	var data = [
	[1, 1, 1],
	[1, 0, 1],
	[1, 1, 1]
	]
	function nextalgodisplay() {
	i = algox
	j = algoy
	$("#b" + i + "_" + j).css('background-color', 'yellow')
	i = algox-1
	j = algoy-1
	$("#b" + i + "_" + j).css('background-color', '#6ef041')
	i = algox
	j = algoy-1
	$("#b" + i + "_" + j).css('background-color', '#6ef041')
	i = algox-1
	j = algoy
	$("#b" + i + "_" + j).css('background-color', '#6ef041')
	}
	function nextalgo() {
	val1 = data[algox][algoy]
	if(val1 == 1) {
	data[algox][algoy] = Math.min(data[algox-1][algoy-1], Math.min(data[algox][algoy-1], data[algox-1][algoy])) + 1
	}
	algoy++
	if(algoy >= data[0].length) {
	algoy = 1;
	algox++;
	}
	$("#table2").html("")
	makeTable($("#table2"), data, "b");
	nextalgodisplay()
	}
	function zerozero() {
	$("#x_t").val(0)
	$("#y_t").val(0)
	count = 0
	addcount()
	reset()
	apply()
	}
	function addcount() {
	count++;
	$("#counter").html(count)
	}
	function next() {
	x1 = parseInt($("#x_t").val())
	x1++;
	$("#x_t").val(x1)
	if(x1 + parseInt($("#len_t").val()) > data[0].length) {
	y1 = parseInt($("#y_t").val())
	y1++;
	$("#x_t").val(0)
	$("#y_t").val(y1)
	}
	}
	function apply() {
	$("#counter").html(count)
	let startx = parseInt($("#x_t").val())
	let starty = parseInt($("#y_t").val())
	let length = parseInt($("#len_t").val())
	let endx = startx + length
	let endy = starty + length

	for(let i = starty; i < endy; i++) {
	for(let j = startx; j < endx; j++) {
	$("#a" + i + "_" + j).css('background-color', '#6ef041')
	}
	}
	}
	function reset() {
	for(let i = 0; i < data.length; i++) {
	for(let j = 0; j < data[i].length; j++) {
	$("#a" + i + "_" + j).css('background-color', '')
	}
	}
	}
	function makeTable(container, data, head="a") {
	var table = $("<table/>");
	$.each(data, function(rowIndex, r) {
	var row = $("<tr/>");
	$.each(r, function(colIndex, c) {
	row.append($("<td id="+ head + rowIndex + "_" + colIndex + ">").text(c));
	});
	table.append(row);
	});
	return container.append(table);
	}
	$(document).ready(function() {
	makeTable($("#table1"), data);
	apply()
	makeTable($("#table2"), data, "b");
	nextalgodisplay()
	});
	</script>
	</html>