JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<input type="file" id="input" />
<br>

<canvas id="canvas" style="background-color:#f00"></canvas>

JavaScript

// Setup and hacks for rendering 

var input = document.getElementById('input');
input.addEventListener('change', setImage, false);


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var dijkstra = null;
var run = 0;
var currentY = 0;
var yDone = -1;
var image = null;
var imageData = null;
var imageGraph = null;

canvas.onclick = function (e) {
  var x = e.pageX - this.offsetLeft; 
  var y = e.pageY - this.offsetTop;
  currentY = 0;
  if (yDone == -1) {
    start(x, y);
  } else {
    showPath(x, y);
  }
}

function setImage(e){
    yDone = -1;
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            image = img;
            canvas.width = img.width;
            canvas.height = img.height;
            convertToSw();
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

function convertToSw() {
  ctx.drawImage(image,0,0);
  imageData = ctx.getImageData(0, 0, image.width, image.height);
  var data = imageData.data;
  for (var i = 0; i < data.length; i+=4) {
     var total = data[i] + data[i+1] + data[i+2];
     data[i] = data[i+1] = data[i + 2] = total /3;
  }
  ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
}

function start(x, y) {
  imageGraph = new ImageGraph(imageData);
  dijkstra = new Dijkstra(imageGraph, {x: x, y: y});
  step();
}

function showPath(x, y) {
  var data = imageData.data;
  var min = 9e9;
  for (var j = 0; j < 10000; j++) {
    var newX = -1;
    var newY = -1;
    for (var dy = -1; dy < 2; dy++) {
      var row = imageGraph.distances[y + dy];
      if (row != null) {
        if (dy == 0) {
          for (var dx = -1; dx < 2; dx += 2) {
            if (row[x + dx] != null && row[x + dx] < min) {
              newX = x + dx;
              newY = y;
              min = row[x + dx];
            }
          }
        } else {
          if...