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='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');

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.9);
  // Threshold
  //Marvin.thresholding(image, imageOut, 0.1);
  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 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();
   //image.load("https://i.imgur.com/3ebFIRq.jpg?3", imageLoaded);
  //...