perlin fill

config.json

{"description":"perlin fill","endpoint":"","display":"canvas","public":true,"require":[{"name":"perlin","url":"https://raw.github.com/josephg/noisejs/master/perlin.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/iihOAMr.jpg"}

inlet.js

//playing with noise.js from Joseph Gentle
//https://github.com/josephg/noisejs


var minPeriod = 0.573408009601449 / 300;
var maxPeriod = 4.1651784217559 / 300;
var minHue = 230;
var maxHue = 280;
var minR = 3.624;
var maxR = 5.5;


var minRot = .45114;
var maxRot = 2.29
var minMult = .484;
var maxMult = .828;
var pw = 1.2;
var ph = 1.26;

var ctx = tributary.ctx;
var canvas = tributary.canvas;
w = canvas.width;
h = canvas.height;


ctx.fillStyle = 'white';

ctx.fillRect(0, 0, w, h);

ctx.fillStyle = 'rgba(1,1,1,0.3)';

//noise.seed(Math.random());

particles = [];

for (_i = 1; _i <= 2000; _i++) {
  type = Math.floor(Math.random() * 2);
  d = Math.floor(Math.random() * 128 + type * 128);
  particles.push({
    x: Math.random() * w,
    y: 114 + Math.random() * 512
  });
}


function draw() {
  
};

var waves = {
  "sin": Math.sin,
  "cos": Math.cos,
  "tan": Math.tan,
  "quad": d3.ease("quad"),
  "cubic": d3.ease("cubic"),
  "circle": d3.ease("circle"),
  "bounce": d3.ease("bounce"),
  "back": d3.ease("back"),
  "exp": d3.ease("exp"),
  "square": function(x) { }
}

function op(t, min, max, wave) {
  if(!wave) { wave = "sin" }
  return min + (max - min) * (1 + waves[wave](t) * Math.PI*2)/2
}

tributary.run = function(g,t) {
  var period = op(t, minPeriod, maxPeriod, "circle") * op(t, minPeriod, maxPeriod, "circle");
  var r = op(t, minR, maxR, "back")
  var hue = Math.floor(op(t, minHue, maxHue, "cubic"))
  var mult = op(t, minMult, maxMult, "exp")
  var rot = op(t, minRot, maxRot, "sin")
  
  var a, p, v, _i, _len, _ref, _ref1;
  for (_i = 0, _len = particles.length; _i < _len; _i++) {
    p = particles[_i];
    v = noise.simplex2(p.x * period, p.y * period);
    ctx.fillStyle = "hsla(" + hue + ", 95%, 32%, 0.2)";
    ctx.fillRect(p.x, p.y, pw, ph);
    
    a = mult * v * 2 * Math.PI;// + p.a;
    p.x += r * Math.sin(-a * rot) * Math.tan(a + rot) + Math.tan(a * rot);
    p.y += r * Math.cos(-a * rot) * Math.tan(-a - rot) + Math.tan(a * rot) * v;
    
    if ((p.x < 0 || p.x >= w) || (p.y < 0 || p.y >= h)) {
      p.x = Math.random() * w;
      p.y = Math.random() * h;
    } 
  }
}