Tributary inlet

_.md

[ Launch: Tributary inlet ] 9619878 by tanemaki

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"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":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/BiKVJU5.png"}

inlet.js

//Original
//http://bl.ocks.org/syntagmatic/5107530	


var num = 20000;
//var num = 500;

canvas = d3.select("body").append("svg")
			.height("300")
			.width("300")

//var canvas = document.getElementById("canvas");
var width = canvas.width = 960;
var height = canvas.height = 500;
var ctx = canvas.getContext("2d");

var particles = d3.range(num).map(function(i) {
  return [Math.round(width*Math.random()), Math.round(height*Math.random())];
});

d3.timer(step);

function step() {
  ctx.fillStyle = "rgba(255,255,255,0.3)";
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  particles.forEach(function(p) {
    p[0] += Math.round(2*Math.random()-1)+2.0;
    p[1] += Math.round(2*Math.random()-1)+1.0;
    if (p[0] < 0) p[0] = width;
    if (p[0] > width) p[0] = 0;
    if (p[1] < 0) p[1] = height;
    if (p[1] > height) p[1] = 0;
    drawPoint(p);
  });
};

function drawPoint(p) {
  ctx.fillRect(p[0],p[1],1,1);
};