JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<body>
<div>
<input type="number" />
<input type="button" id="randomizeButton" value="randomize" />
</div>
<div id="sliders" style="background-color:red; float:left">
</div>
 <canvas id="myCanvas" width="200" height="200"></canvas>

</body>

JavaScript

function main(){
  var net = new Network([2, 2,  1])
  var sliders = document.getElementById('sliders')
  var randomizeButton = document.getElementById('randomizeButton')
  var canvas = document.getElementById('myCanvas')
  var ctx = canvas.getContext("2d")
  sliders.appendChild(net.htmlLayerList())
  //colorByValue(ctx, (x, y)=>Math.sin(10*x)*Math.sin(2*y))
  //
  //runButton.addEventListener('mousedown', function(){
  //  colorByValue(ctx, (x,y)=>net.forward([x,y]))
  //})
  function redraw(){
    colorByValue(ctx, (x,y)=>net.forward([x,y]))
  }
  net.registerEvent('mousedown', redraw)
  randomizeButton.addEventListener('click', function(){
    var sliders = net.getSliders()
    sliders.map(function(s){
      var min = parseFloat(s.min)
      var max = parseFloat(s.max)
      s.value = Math.random()*(max-min) + min
    })
    redraw()
  })
}

function colorByValue(ctx, fun){
  console.log('starting')
  var STEP = 5
  var RANGE = 2
  var w = ctx.canvas.clientWidth
  var h = ctx.canvas.clientHeight
  ctx.fillStyle = 'green'
  ctx.fillRect(0,0,w, h)
  for(var xInd=0; xInd<w; xInd+=STEP){
    for(var yInd=0; yInd<h; yInd+=STEP){
      var x = RANGE*2*(xInd - w/2)/w
      var y = RANGE*2*(yInd - h/2)/h
      //console.log('cbv')
      //console.log(x)
      //console.log(y)
      var out = fun(x, y)
      ctx.fillStyle =  valueToColor(out)
      ctx.fillRect(xInd, yInd, STEP, STEP)
          
    }
  }
  console.log('done')
}

function valueToColor(x, min=-1, max=1){
  //console.log('value to color')
  //console.log(x)
  x = (x-min)/(max-min)
  x = Math.max(x, 0)
  x = Math.min(x, 1)
  x = Math.floor(255*x)
  //console.log(x)
  return 'rgb('+x+',' +x+','+x+')'
}


class Network {
  constructor(countsList){
    this.layers = []
    for(var i=0; i<countsList.length-1; i++){
    		this.layers.push(new Layer(countsList[i], countsList[i+1]))
    }
    this.activation = x => Math.max(x, 0)
  }
  
  forward(x){
    for(var i=0; i<this.layers.length; i++){
      x =...