Flows in picture - UI

Particles moving when the noise comes from a picture, better ui with controls, creates svg

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='stats'>
      <span>Pixels taken: <span id='pixels'> 0</span></span>
      <span>Total pixels: <span id='pixelsTotal'> 0</span></span>

    </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 pixels2, pixelsCount = 0;
var image;
var particleCount = 100;
var particles = [];
var shown = 0;

var totalPixels = 0;
var map = {};

var runAnimation = true;

var ranges = [
[0.3, 0.4],
[0.4, 0.5],
[0.5, 0.6],
[0.6, 0.7],
[0.7, 0.8]
];

var thresholds = [0.01, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85];
thresholds = [0.39, 0.5, 0.7, 0.8, 0.85, 0.9, 0.96, 1.0, 1.2];

var blackColor = "#000";
var colors = [
  "#577aff",
  "#9661e6",
  "#FF0000",
  "#d00000",
  "#a00000",
  "#750000",
  "#500000",
  "#480000"
];

var otherCheckbox = document.getElementById('accumulate');
var colorsCheckbox = document.getElementById('colors');
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") {
   ...