Walker good one - picture

Autonomous walker based on image brightness

by blackpolygon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<html>

  <head>
    <title>Flows with picture</title>
    <script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
  </head>

  <body>
    <div class='controls'>
      <button onclick='stop()'>
          Stop/Restart
        </button>
      <button onclick='showImage()'>
          Show/Hide image
        </button>
      <button onclick='showLines()'>
          Show/Hide lines
        </button>
      <button onclick='clearCanvas()'>
          Clear
        </button>
      <button onclick='downloadSvg()'>
          Download svg
        </button>
    </div>

    <div class="results">
      <div class="images">
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"> </canvas>
        <canvas id="canvas3"> </canvas>
      </div>
      <svg id='svg' xmlns="http://www.w3.org/2000/svg"></svg>
    </div>

  </body>

</html>

CSS

html {
  width: 100%;
  height: 100%;
  font-family: Segoe UI, Verdana, sans-serif;
}

body {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
}

canvas {
  position: absolute;
  top: 80px;
  left: 0;
}

#canvas1 {
  /*display: none;*/
  left: 0;
}

.controls {
  height: 30px;
  background: #EEE;
  width: 50%;
  padding: 10px;
}

.controls button {
  padding: 3px;
  color: #FFF;
  background: #05C;
  border: 1px solid #276ce4;
  font-stretch: semi-expanded;
}

button:hover {
  cursor: pointer;
}

.results {
  display: flex;
}

.results .images {
  position: relative;
  width: 90%;
}

JavaScript

var canvas, canvas2, ctx, ctx2;
var halfPI = Math.PI / 2,
  TWOPI = Math.PI * 2;
var image;
var walker;
var runAnimation = true;
var svg = document.getElementById('svg');
var startingPoints = [];
var minDistance = 100;

function imageLoaded() {
  canvas.width = canvas2.width = image.getWidth();
  canvas.height = canvas2.height = image.getHeight();

  svg.setAttribute("width", canvas.width + "px");
  svg.setAttribute("height", canvas.height + "px");

  canvas.addEventListener('click', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    console.log(message, getData({
      x: mousePos.x,
      y: mousePos.y
    }));
  }, false);

  var imageOut = new MarvinImage(image.getWidth(), image.getHeight());

  image.draw(canvas);
  // Edge Detection (Prewitt approach)
  // Marvin.prewitt(image, imageOut);
  // Invert color
  // Marvin.invertColors(imageOut, imageOut);
  // Marvin.colorChannel(image, imageOut, 14, 0, -8);
  Marvin.blackAndWhite(image, imageOut, 0.3);
  // Threshold
  //Marvin.thresholding(image, imageOut, 0.1);
  imageOut.draw(canvas);


    walker = new Walker();
    walker.findStart();
  
}

function stop() {
  runAnimation = !runAnimation;
}

function showImage() {
  if (canvas.style.display === "none") {
    canvas.style.display = 'block';
  } else {
    canvas.style.display = 'none';
  }
}

function showLines() {
  if (canvas2.style.display === "none") {
    canvas2.style.display = 'block';
  } else {
    canvas2.style.display = 'none';
  }
}


function clearCanvas() {
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  svg.innerHTML = '';
}

function setup() {

  canvas = document.getElementById('canvas1');
  ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;
  ctx.fillStyle = '#000';

  canvas2 = document.getElementById('canvas2');
  ctx2 = canvas2.getContext('2d');
  ctx2.lineWidth = 0.5;
  ctx2.strokeStyle = "#000";

  image = new MarvinImage();
 ...