CNN visualization

Shows how pixels from an input image are connected to neurons in a CNN.

HTML

<!-- 
Author: Arun Mallya, http://arunmallya.github.io/
-->

<canvas id="myCanvas" width="3000" height="3000" style="border:1px solid red;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

JavaScript

// List of layers, from top to bottom.
// Last displayed layer is input.
// {'k': kernel size, 's': stride, 'd': dilation}
var layers = [
  {k: 3, s: 1, d: 2},
  {k: 3, s: 1, d: 2},
  {k: 3, s: 1, d: 1},
];
// Adjust below values so that stuff fits in screen.
var display_sizes = [3, 10, 15, 20];
var w_offset = 300;
var h_offset = 0;
var cell_size = 10;




/* DISPLAY CODE BELOW */
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext("2d");

// Draw each layer.
var rects = {};
for (var layer = 0; layer < layers.length; layer++) {
  [h_offset, rects] = drawGrid(h_offset, w_offset, display_sizes[layer], display_sizes[layer], layer, cell_size, rects);
}
// Input Image
[h_offset, rects] = drawGrid(h_offset, w_offset, display_sizes[layers.length], display_sizes[layers.length], layer, cell_size, rects);

function drawGrid(h_offset, w_offset, h, w, id, cell_size, rects) {
  var width = cell_size * w;
  var height = cell_size * h;
  for (var i = -1 * Math.floor(h / 2); i <= Math.floor(h / 2); i++) {
    var tyPoint = h_offset + height/2 + cell_size * i;
    for (var j = -1 * Math.floor(w / 2); j <= Math.floor(w / 2); j++) {
      var txPoint = w_offset + cell_size * j;     
      // Draw the rectangle.
      ctx.beginPath();
      ctx.fillStyle = 'white';
      ctx.rect(txPoint, tyPoint, cell_size, cell_size);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      // Enter this into the dict of rectangles.
      var key = makeKey(id, i, j);
      rects[key] = {x: txPoint, y: tyPoint, w: cell_size, h: cell_size, id: id, i: i, j: j};
    }
  }
  return [h_offset + height + 2*cell_size, rects];
}

canvas.onmousemove = function(e) {
  var rect = this.getBoundingClientRect(),
    x = e.clientX - rect.left,
    y = e.clientY - rect.top;
  
  // Find all cells which are connected to this neuron.
  var connected_rects = [];
  for (var key in rects) {
    var r = rects[key];
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.w, r.h);
    if...