visualizer.js

class Visualizer {
  static drawNetwork(ctx, network) {
    const margin = 50
    const left = margin
    const top = margin
    const width = ctx.canvas.width - margin * 2
    const height = ctx.canvas.height - margin * 2

    
    const levelHeight = height/network.levels.length

    for (let i = network.levels.length - 1; i >= 0; i--) {
      const levelTop =
        top +
        lerp(
          height - levelHeight,
          0,
          network.levels.length == 1 ? 0.5 : i / (network.levels.length - 1)
        )
      ctx.setLineDash([7, 1])
    Visualizer.drawLevel(
      ctx,
      network.levels[i],
      left,
      levelTop,
      width,
      levelHeight,
      i == network.levels.length - 1 ? ['↑', '←', '→', '↓'] : []
    )
    }
  }

  static drawLevel(ctx, level, left, top, width, height, outputLabels ) {
    const right = left + width
    const bottom = top + height

    const { inputs, outputs, weights, biases} = level

    for (let i = 0; i < inputs.length; i++) {
      for (let j = 0; j < outputs.length; j++) {
        ctx.beginPath()
        ctx.moveTo(Visualizer.#getNodeX(inputs, i, left, right), bottom)
        ctx.lineTo(Visualizer.#getNodeX(outputs, j, left, right), top)
        ctx.lineWidth = 2
        ctx.strokeStyle = getRGBA(weights[i][j])
        ctx.stroke()
      }
    }

    const nodeRadius = 18

    for (let i = 0; i < inputs.length; i++) {
      const x = Visualizer.#getNodeX(inputs, i, left, right)
      ctx.beginPath()
      ctx.arc(x, bottom, nodeRadius, 0, Math.PI * 2)
      ctx.fillStyle = 'black'
      ctx.fill()

      ctx.beginPath()
      ctx.arc(x, bottom, nodeRadius * 0.6, 0, Math.PI * 2)
      ctx.fillStyle = getRGBA(inputs[i])
      ctx.fill()

      
    }
    for (let i = 0; i < outputs.length; i++) {
      const x = Visualizer.#getNodeX(outputs, i, left, right)
      
      ctx.beginPath()
      ctx.arc(x, top, nodeRadius, 0, Math.PI * 2)
      ctx.fillStyle = 'black'
      ctx.fill()
      
      ctx.beginPath()
      ctx.arc(x, top, nodeRadius * 0.6, 0, Math.PI * 2)
      ctx.fillStyle = getRGBA(outputs[i])
      ctx.fill()

      ctx.beginPath()
      ctx.lineWidth = 2
      ctx.arc(x, top, nodeRadius * 0.8, 0, Math.PI * 2)
      ctx.strokeStyle = getRGBA(biases[i])
      ctx.setLineDash([3,3])
      ctx.stroke()
      ctx.setLineDash([])

      if (outputLabels[i]) {
        ctx.beginPath()
        ctx.textAlign = 'center'
        ctx.textBaseline= 'middle'
        ctx.fillStyle= 'black'
        ctx.strokeStyle='white'
        ctx.font= (nodeRadius * 1.5) + 'px Arial'
        ctx.fillText(outputLabels[i], x, top)
        ctx.lineWidth=0.5
        ctx.strokeText(outputLabels[i], x, top)
      }
    }


  }
  static #getNodeX(nodes, index, left, right) {
    return lerp(
      left,
      right,
      nodes.length == 1 ? 0.5 : index / (nodes.length -1)
    )
  }
}