Flows in picture

Particles moving when the nosie comes from a picture

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>
    </div>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"> </canvas>
  </body>

</html>

CSS

html {
  width: 100%;
  height: 100%;
}

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

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

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

.controls {
  height: 20px;
  background: #EEE;
  width: 100%;
  padding: 5px;
}

JavaScript

var canvas, canvas2, ctx, ctx2, w2, mic, h2, halfPI;

var image;

var particleCount = 80;
var particles = [];

var shown = 0;

var scl = 1;

var runAnimation = true;

colors = [
"#577aff",
"#9661e6",
"#FF0000"
]

function imageLoaded() {
  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, 2);
  // 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 setup() {
  energySlots = 100;
  halfPI = Math.PI / 2;
  canvas = document.getElementById('canvas1');
  canvas.width = 400; //window.innerWidth;
  canvas.height = 533; //window.innerHeight;

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

  w2 = window.innerWidth / 2;
  h2 = window.innerHeight / 2;

  canvas2 = document.getElementById('canvas2');
  canvas2.width = 400; //window.innerWidth;
  canvas2.height = 600; //window.innerHeight;

  ctx2 = canvas2.getContext('2d');
  ctx2.lineWidth = 1;
  ctx2.fillStyle = '#000';
  ctx2.strokeStyle = "#F00";

  scl = canvas2.height / particleCount;

  image = new MarvinImage();
  image.load("https://i.imgur.com/3ebFIRq.jpg?3", imageLoaded);
  //image.load("https://i.imgur.com/bHsSSwt.jpg?1", imageLoaded);

  createParticles();

}

function createParticles() {
  for (var i = 0; i < particleCount; i++) {
    particles.push(new Particle(i));
  }
}



function getData(p) {
  var...