Walker - 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='showRestarts()'>
      Show/Hide spawns
    </button>
      <button onclick='clearCanvas()'>
      Clear
    </button>

      <button onclick='downloadSvg()'>
      Download svg
    </button>
      <input type="checkbox" id="accumulate" checked="true" />
      <label for="other">Accumulate angle</label>

      <input type="checkbox" id="colors" checked="true" />
      <label for="other">Use colors</label>

    </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;*/
}

.controls {
  height: 30px;
  background: #EEE;
  width: 100%;
  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: 50%;
}

JavaScript

var canvas, canvas2, canvas3, ctx, ctx2, ctx3;
var halfPI = Math.PI / 2,
  TWOPI = Math.PI * 2;
var image;
var walker;
var runAnimation = true;


var svg = document.getElementById('svg');

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

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

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

  document.getElementById('pixelsTotal').innerHTML = canvas2.width * canvas2.height;
  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.1);
  // Threshold
  //Marvin.thresholding(imageOut, imageOut, 220);
  imageOut.draw(canvas);
}

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 showRestarts() {
  if (canvas3.style.display === "none") {
    canvas3.style.display = 'block';
  } else {
    canvas3.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;

  canvas3 = document.getElementById('canvas3');
  ctx3 = canvas3.getContext('2d');
  ctx3.fillStyle = 'blue';


  image = new MarvinImage();
  //...