Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/_.md

Created August 10, 2013 02:50
Show Gist options
  • Save enjalot/6198816 to your computer and use it in GitHub Desktop.
Save enjalot/6198816 to your computer and use it in GitHub Desktop.
Download ZIP
bart particles
Raw
_.md
Raw
bart.html
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="694.36px" height="552.46px" viewBox="0 0 694.36 552.46" enable-background="new 0 0 694.36 552.46" xml:space="preserve">
<g id="water">
<path id="path4193" sodipodi:nodetypes="ccsczzsszzzzzzzzzzzzzzzzzzzzzzsszzzzsszzzzzzzzzzzzzsszzzzzzzzzzzcczzzzzzzzzzzzzzzzcccczzzzczzzzzzzzzsszzzczzss" inkscape:export-ydpi="90" inkscape:export-xdpi="90" fill="#EBF9F6" stroke="#AFE9DD" stroke-width="0.7247" d="
M505.215,560.656h1.703c8.211-0.051,7.418,3.578,7.418,6.727s0.168,6.727-7.418,6.727H411.02c-4.379,0-8.936-2.363-12.031-5.725
l-12.145-13.186c-3.068-3.332-4.902-8.383-4.902-13.096v-0.332c0-3.676-3.84-7.752-7.225-7.752h-13.846
c-4.322,0-8.842-2.273-11.898-5.59l-60.931-66.156c-3.032-3.291-4.799-8.303-4.799-12.959v-26.43
c-0.005-3.664-4.071-7.395-7.431-7.395h-2.162c-3.269,0-7.161-3.725-7.161-7.275v-1.906c0-3.615,3.965-7.41,7.296-7.41h13.646
c3.512,0,7.404-4.326,7.404-8.139v-1.467c0-4.672-2.12-9.544-5.164-12.848l-13.24-14.376c-3.058-3.319-5.061-8.274-5.061-12.97
v-74.176c0-4.627-1.958-9.517-4.972-12.789l-48.62-52.788c-3.228-3.504-8.075-5.722-12.639-5.722h-60.691
c-4.247,0-8.888-1.704-11.891-4.964l-2.293-2.489c-3.08-3.343-7.733-5.383-12.088-5.383h-11.369c-3.038,0-6.54,3.592-6.54,6.89
v4.564c0,5-2.475,10.111-5.731,13.646l-4.585,4.979c-3.145,3.415-7.93,5.412-12.377,5.412H54.531c-4.329,0-8.948,2.045-12.01,5.369
l-7.337,7.966c-3.083,3.348-5.187,8.305-5.187,13.039v487.713v42.32H-91.217V-36.824L96.672,167.173
c3.27,3.55,8.123,5.942,12.747,5.942h14.332c4.32,0,8.978-1.913,12.033-5.229l4.132-4.486c3.026-3.286,7.562-5.386,11.842-5.386
h11.188c3.107,0,6.379-4.006,6.379-7.38v-0.617c0-4.395-1.803-9.064-4.665-12.171l-4.14-4.494
c-2.361-2.563-2.629-8.283-0.291-10.871l0.524-0.58c2.146-2.375,7.025-2.279,9.191,0.073l14.126,15.337
c3.227,3.504,8.118,5.601,12.682,5.601h13.2c2.264,0,4.663-1.111,6.263-2.849l23.673-23.988c1.642-1.664,3.894-2.979,6.134-2.979
h22.493c3.69,0,7.838-4.48,7.838-8.487v-15.71c0-4.807-2.021-9.892-5.151-13.291l-3.814-4.142
c-3.047-3.309-4.944-8.291-4.944-12.97V10.921c0-4.648,1.798-9.636,4.826-12.923l4.099-4.45c2.998-3.254,7.46-5.413,11.699-5.413
h62.422c4.662,0,9.501,2.542,12.796,6.12l8.885,9.646c3.238,3.517,7.557,6.997,12.139,6.997h377.885v13.789h-378.42
c-4.324,0-8.723,2.576-11.779,5.895L325.018,76.16c-3.193,3.468-4.885,8.819-4.885,13.724v52.147c0,3.395,3.476,7.236,6.603,7.236
h0.649c3.174,0,6.658,3.946,6.658,7.393v102.216c0,4.906,2.333,9.97,5.528,13.439l52.886,57.42c1.41,1.531-0.414,5.95-2.408,5.95
h-7.117c-3.371,0-6.98,4.282-6.98,7.942v1.994c0,4.613,1.912,9.508,4.918,12.771l3.902,4.237c3.096,3.36,7.729,5.525,12.105,5.525
h14.855c4.342,0,8.969,2.062,12.039,5.396l0.76,0.825c3.232,3.509,5.518,8.669,5.518,13.632v90.807
c0,4.764,1.988,9.811,5.092,13.18l58.086,63.066C496.303,558.4,500.866,560.656,505.215,560.656z"/>
</g>
<g id="lines">
<g>
<path id="richmond" fill="none" stroke="#D40000" stroke-width="6" d="M226.268,494.363
l-68.682-68.682c-6.028-6.027-9.962-15.029-9.962-23.555v-10.774c0-11.491,5.132-23.696,13.258-31.821l10.865-10.865
c4.809-4.808,8.002-11.965,8.002-18.764v-12.568c0-11.479,5.236-23.626,13.353-31.743l41.627-41.627
c8.027-8.027,20.165-12.903,31.517-12.903h126.1c6.273,0,13.428-6.916,13.428-13.19V113.155c0-6.105-6.607-13.187-12.715-13.187
h-54.208"/>
<path id="richmondfremont" fill="none" stroke="#FF7F2A" stroke-width="6" d="M338.892,93.968
h53.455c8.992,0,19.316,9.838,19.316,18.83v159.524c0,6.988,2.959,14.479,7.9,19.42l244.646,244.646"/>
<path id="pbbaypoint" fill="none" stroke="#FFCC00" stroke-width="6" d="
M264.31,468.792h-43.9c-6.922,0-14.285-3.068-19.179-7.963l-39.585-39.586c-4.831-4.83-8.011-12.033-8.011-18.863v-10.404
c0-10.197,4.478-21.061,11.688-28.271l10.92-10.921c5.9-5.899,9.561-14.79,9.561-23.135v-12.493
c0-9.861,4.399-20.339,11.372-27.312l41.717-41.716c6.987-6.986,17.598-11.116,27.479-11.116h138.652
c5.988,0,12.689-6.725,12.689-12.712v-45.474c0-6.225,6.836-13.348,13.061-13.348h29.25c6.863,0,14.172-3.016,19.025-7.868
L595.018,41.639"/>
<path id="dublin" fill="none" stroke="#006680" stroke-width="6" d="M645.465,396.32
h-92.941c-6.994,0-14.463-3.023-19.41-7.969L397.477,252.713c-6.023-6.024-15.131-9.685-23.65-9.685H266.372
c-8.349,0-17.336,3.434-23.24,9.337l-41.627,41.628c-5.989,5.988-9.616,15.049-9.616,23.52v12.136
c0,9.985-4.433,20.604-11.494,27.665l-10.642,10.642c-5.985,5.985-10.085,14.842-10.085,23.308v33.592
c0,6.92,3.106,14.264,7.999,19.156l53.391,53.391"/>
<path id="fremont" fill="none" stroke="#225500" stroke-width="6" d="M671.17,534.73
L392.936,256.496c-4.807-4.808-12.057-7.781-18.855-7.781H266.499c-6.934,0-14.342,2.995-19.245,7.898l-41.564,41.564
c-4.966,4.967-7.946,12.49-7.946,19.514v11.958c0,11.423-5.014,23.592-13.091,31.669l-10.768,10.768
c-4.925,4.926-8.303,12.211-8.303,19.178v7.143"/>
</g>
</g>
</svg>
<canvas id=canvas></canvas>
</div>
Raw
config.json
{"description":"bart particles","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bart.svg":{"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},"seglist.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bart.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"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/27SoumJ.png"}
Raw
inlet.js
var r = 10; //max offset from subway line
var pAlpha = 0.2;
var svg = d3.select("svg");
var display = d3.select("#display");
tributary.canvas = d3.select("#canvas")
.classed("tributary_canvas",true)
.node();
tributary.ctx = tributary.canvas.getContext('2d');
var ctx = tributary.ctx;
var canvas = tributary.canvas;
tributary.canvas.width = tributary.sw;
tributary.canvas.height = tributary.sh;
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.25;
function clear() {
if(!tributary.canvas) return;
tributary.ctx.fillStyle = 'rgba(255,255,255,0.01)'
tributary.ctx.fillRect(0, 0, tributary.sw, tributary.sh);
}
tributary.ppl = [];
var circleData = d3.range(6).map(function() { return {} });
var lines = svg.select("#lines")
.selectAll("path")
.data(circleData)
.each(function() {
})
function generate(node, t) {
var n = Math.round(1 * Math.random() * 3);
var dt = 1/1000;
if(t < 0.1) n = 10;
d3.range(n).forEach(function() {
var len = node.getTotalLength();
var extent = [0.0, 1.0];
var v = extent[1] - extent[0];
var offset = d3.scale.linear()
.domain([0, 1])
.range([t, 1-t]);
var freq = 0.52 * Math.random() * Math.PI
tributary.ppl.push({
len: len,
node: node,
color: d3.rgb(d3.select(node).attr("stroke")),
pos: function(t) {
//return the point for this
return node.getPointAtLength(extent[0] * len + offset(t) * v * len);
},
perp: function(t) {
//return the offset vector
//TODO Make perpendicular
var tt = offset(t);
var nx = this.pos(tt).y - this.pos(tt - dt).y;
var ny = this.pos(tt).x - this.pos(tt - dt).x;
var l = Math.sqrt(nx*nx + ny*ny);
nx = nx/l;
ny = -ny/l;
if(!l) nx = 0;
if(!l) ny = 0;
this.r = r + 6 * Math.cos(t * Math.PI * 7 + freq);
return {x: nx, y: ny}
},
w: 2,
h: 2,
r: r + 6 * Math.random()
})
})
}
tributary.run = function(g,t) {
var display = d3.select("#display");
var ctx = tributary.ctx;
clear();
if(t < 0.001) {
//reset
console.log("reset")
tributary.ppl = [];
//tributary.ctx.clearRect(0, 0, tributary.sw, tributary.sh);
var lines = svg.select("#lines")
.selectAll("path")
.each(function() {
generate(this, t);
});
}
tributary.ppl.forEach(function(d,i) {
//var o = (Math.sin(2 *Math.PI * (d.start + t/10)) + 1)/2;
//var p = d.node.getPointAtLength(t*d.len);
var p = d.pos(t);
var pp = d.perp(t);
var x = p.x + pp.x * d.r;
var y = p.y + pp.y * d.r;
ctx.fillStyle = 'rgba(' + d.color.r + ',' + d.color.g + ',' + d.color.b + ',' + pAlpha + ')';
//ctx.fillRect(x - d.w/2, y-d.h, d.w, d.h);
ctx.beginPath();
ctx.arc(x,y,d.w,0,2*Math.PI);
ctx.fill();
})
}
tributary.loop_type = "period";
Raw
style.css
#canvas {
position: absolute;
top: 70px;
left: 0;
}
#lines {
opacity: 0.02;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment