created by http://livecoding.io

options.json

{
    "libraries": [
        "Processing"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)"
}

water.css

pre {
  position: absolute;
  color: #FFF;
  background: #000;
}

water.html

<canvas></canvas>

water.js

var numberOfIterations = 10000;

// walker prototype
var particle = {
  x: null,
  y: null,
  
  init: function(startX, startY) {
    this.x = startX;
    this.y = startY;
  },
  
  display: function(p) {
    p.stroke(0);
    p.point(this.x, this.y);
  },
  
  step: function(p) {
    this.x += rand() * 2 - 1;
    this.y += rand() * 2 - 1;
  }
};



// walker "object"
function Walker(x, y) {
  function F() {};
  F.prototype = particle;
  
  var f = new F();
  f.init(x, y);
  return f;
}



// processing sketch
function sketch(p) {
  
  var walker;
  
  p.setup = function() {
    
    p.size($(window).width()*0.99, $(window).height()*0.99);
    
    walker = Walker(p.width/2, p.height/2);
    
    p.background(245);
    walker.display(p);
    
    for (var i = 0; i < numberOfIterations; i++) {
      walker.step(p);
      walker.display(p);
    }
  };
}

var canvas = $('canvas').get(0);
var processingInstance = new Processing(canvas, sketch);