[ Launch: bart particles ] 6199398 by enjalot
[ Launch: bart particles ] 6199373 by enjalot
[ Launch: bart particles ] 6198816 by enjalot
[ Launch: bart paths ] 6149065 by enjalot
-
-
Save enjalot/6199398 to your computer and use it in GitHub Desktop.
bart particles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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/zWflUZk.png"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var r = 10; //max offset from subway line | |
var pAlpha = 0.82; | |
var speed = 4; | |
tributary.duration = 15000; | |
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 { | |
n: 50, | |
diff: 0 | |
} | |
}); | |
var lines = svg.select("#lines") | |
.selectAll("path") | |
.data(circleData) | |
.each(function() { | |
}) | |
//map ride time to t | |
var ridesday = 60 * 16 / 10; | |
console.log("rides per day", ridesday) | |
function generate(node, t, count) { | |
//var n = Math.round(1 * Math.random() * 2); | |
var dt = 1/1000; | |
//if(t < 0.1) n = 10; | |
var n = 2; | |
d3.range(n).forEach(function(i) { | |
var len = node.getTotalLength(); | |
var extent = [0.0, 1.0]; | |
var v = extent[1] - extent[0]; | |
var scale = d3.scale.linear() | |
.domain([0, 1]) | |
.range(extent); | |
var offset = function(tt) { | |
tt = (tt - t) * speed | |
if(tt > 1) tt = 1; | |
return scale(tt); | |
} | |
var freq = 52 * Math.random() * Math.PI | |
tributary.ppl.push({ | |
len: len, | |
node: node, | |
color: d3.rgb(d3.select(node).attr("stroke")), | |
pos: function(t) { | |
return node.getPointAtLength(extent[0] * len + offset(t) * v * len); | |
//return node.getPointAtLength(offset(t) * 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 * count;// * Math.sin(tt * Math.PI * 7 + freq); | |
return {x: nx, y: ny} | |
}, | |
w: 2, | |
h: 2, | |
offset: offset | |
}) | |
}) | |
} | |
tributary.run = function(g,t) { | |
var display = d3.select("#display"); | |
var ctx = tributary.ctx; | |
clear(); | |
var lines = svg.select("#lines") | |
.selectAll("path") | |
if(t < 0.001) { | |
//reset | |
console.log("reset") | |
tributary.ppl = []; | |
tributary.ctx.clearRect(0, 0, tributary.sw, tributary.sh); | |
lines.each(function(d) { d.count = 0; }); | |
} | |
lines.each(function(d) { | |
d.diff += d.n/1000; | |
if(Math.floor(d.diff)) { | |
d.count++; | |
generate(this, t, d.count); | |
d.diff = 0; | |
} | |
}); | |
console.log(tributary.ppl.length) | |
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; | |
var a = pAlpha; | |
if(d.offset(t) >= 1) { | |
a = 0.0001; | |
tributary.ppl.splice(tributary.ppl.indexOf(d),1); | |
} | |
ctx.fillStyle = 'rgba(' + d.color.r + ',' + d.color.g + ',' + d.color.b + ',' + a + ')'; | |
//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.run(null, 0); | |
tributary.loop_type = "period"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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