// source http://jsbin.com/vewuji

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/addons/p5.dom.min.js"></script>
<style id="jsbin-css">
#container {
  background-color: #cccccc;
  padding: 16px 16px 40px 16px;
  
}

#canvas {
  border: 1px solid #555;
}

#sliders {
  background-color: #fff;
  padding: 8px;
  margin: 8px;
}
</style>
</head>
<body>
  <div id="container">
    <div id="canvas"></div>
    <div id="sliders"></div>
  </div>
<script id="jsbin-javascript">
var slider;
var nodes = [];
var isPainting = false;
var prev;
var time = 0;
var tinc = 0.5;

function setup() {
  var canvas = createCanvas(540, 400);
  canvas.parent('canvas');
  slider = createSlider(1, 100, 20);
  slider.parent('sliders');
  
  var clear = createButton('Clear');
  clear.parent('sliders');
  clear.mousePressed(function() {background(255); nodes=[];});
  //background(255);
  prev = millis();
}

function draw() {
  background(255);
  
  speed = slider.value() * 2;
  
  noFill();
  stroke(40, 180);
  strokeWeight(0.8);
  
  beginShape();
  for (var i = 0; i < nodes.length; i++) {
    curveVertex(nodes[i].x, nodes[i].y);
    ellipse(nodes[i].x, nodes[i].y, 8, 8);
  }
  endShape();
  jitter();
}

function jitter() {
  for (var i = 0; i < nodes.length; i++) {
    var offx = map(noise(time), 0, 1, -1, 1);
    time += tinc;
    var offy = map(noise(time), 0, 1, -1, 1);
    time += tinc;
    nodes[i].x += offx;
    nodes[i].y += offy;
  }
}
</script>

#canvas {
  border: 1px solid #555;
}

#sliders {
  background-color: #fff;
  padding: 8px;
  margin: 8px;
}</script>

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/addons/p5.dom.min.js