[ Launch: Water Magnified ] 6967540 by munaf
-
-
Save munaf-zz/6967540 to your computer and use it in GitHub Desktop.
Water Magnified
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":"Water Magnified","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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},"test.css":{"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,"thumbnail":"http://i.imgur.com/8zudqSl.png","inline-console":true} |
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
// http://www.feynmanlectures.info/ | |
// Figure 1-1 | |
var w = 400, | |
h = 300; | |
var svg = d3.select('svg'); | |
var molecules = d3.range(140).map( | |
function() { | |
return { oradius: 30, hradius: 30 * 25 / 60 }; | |
} | |
); | |
var root = molecules[0]; | |
root.oradius = root.hradius = 0; | |
root.fixed = true; | |
var force = d3.layout.force() | |
.gravity(0.02) | |
.charge(-20) | |
.nodes(molecules) | |
.size([w, h]); | |
force.start(); | |
var molecule = svg.selectAll('.molecule') | |
.data(molecules.slice(1)) | |
.enter().append('g').classed('molecule', true); | |
molecule | |
.append('circle').classed('oxygen', true) | |
.attr({ | |
r: function(d) { return d.oradius; }, | |
cx: function(d) { return d.x; }, | |
cy: function(d) { return d.y; } | |
}); | |
molecule | |
.append('circle').classed('hydrogen', true) | |
.attr({ | |
r: function(d) { return d.hradius; }, | |
cx: function(d) { return d.x - (d.oradius+d.hradius) * Math.cos(deg2rad(30)); }, | |
cy: function(d) { return d.y + (d.oradius+d.hradius) * Math.sin(deg2rad(30)); } | |
}); | |
molecule | |
.append('circle').classed('hydrogen', true) | |
.attr({ | |
r: function(d) { return d.hradius; }, | |
cx: function(d) { return d.x + (d.oradius+d.hradius) * Math.cos(deg2rad(30)); }, | |
cy: function(d) { return d.y + (d.oradius+d.hradius) * Math.sin(deg2rad(30)); } | |
}); | |
force.on("tick", function(e) { | |
var q = d3.geom.quadtree(molecules), | |
i = 0, | |
n = molecules.length; | |
while (++i < n) q.visit(collide(molecules[i])); | |
/*svg.selectAll("circle") | |
.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; });*/ | |
svg.selectAll('g') | |
.attr('transform', function(d) { | |
return 'translate(' + d.x + ',' + d.y + ') rotate(' + Math.random()*360 + ')'; | |
}); | |
}); | |
function collide(node) { | |
var r = node.radius + 16, | |
nx1 = node.x - r, | |
nx2 = node.x + r, | |
ny1 = node.y - r, | |
ny2 = node.y + r; | |
return function(quad, x1, y1, x2, y2) { | |
if (quad.point && (quad.point !== node)) { | |
var x = node.x - quad.point.x, | |
y = node.y - quad.point.y, | |
l = Math.sqrt(x * x + y * y), | |
r = node.radius + quad.point.radius; | |
if (l < r) { | |
l = (l - r) / l * 0.5; | |
node.x -= x *= l; | |
node.y -= y *= l; | |
quad.point.x += x; | |
quad.point.y += y; | |
} | |
} | |
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; | |
}; | |
} | |
setInterval(force.tick, 1000); | |
function deg2rad(deg) { | |
return deg / 180 * Math.PI; | |
} | |
function generate(n) { | |
var molecules = []; | |
var or = 25; | |
for (var i = 0; i < n; i++) { | |
molecules.push({ | |
or: or, | |
hr: or * 25/60 | |
}); | |
} | |
return molecules; | |
} |
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
svg { | |
margin-left: 20px; | |
margin-top: 20px; | |
border: 1px solid gray; | |
background-color: #FFFFFF; | |
width: 400px; | |
height: 300px; | |
} | |
.background { | |
fill: none; | |
pointer-events: all; | |
} | |
text { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 12px; | |
} | |
circle.oxygen { | |
fill: powderblue; | |
stroke: steelblue; | |
stroke-width: 1px; | |
} | |
circle.hydrogen { | |
fill: lightcoral; | |
stroke: crimson; | |
stroke-width: 1px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment