Skip to content

Instantly share code, notes, and snippets.

@plmrry
Last active November 19, 2015 19:25
Show Gist options
  • Save plmrry/77c4603b3cbbfd22cbf5 to your computer and use it in GitHub Desktop.
Save plmrry/77c4603b3cbbfd22cbf5 to your computer and use it in GitHub Desktop.
Particle Experiments II
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
var margin = { top: 50, left: 50, bottom: 50, right: 50 },
width = 1200 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var canvas = d3.select('body').style({ width: "95vw" })
.append('canvas')
.attr({
width: width,
height: height
})
.style({
display: "block", margin: "0 auto", width: "500px", "margin-top": "100px"
})
.node().getContext('2d');
var n = 3e3;
var random = d3.random.normal();
function newData() { return { x: Math.random() - 0.5, y: random(), vel: 0 }; }
var data = d3.range(n).map(newData);
var x = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.x; }))
.range([0 + 20, width - 20]);
var y = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.y; }))
.range([height - 50, 50]);
var rate = 2.0, sample = n * 0.5;
var random2 = d3.random.normal(Math.floor(sample), 10);
d3.timer(function() {
data.forEach(function(d) {
// d.vel += 0.003 * random() - 0.002 * d.vel - 0.03 * d.x; With random()
// d.vel += 0.003 * random() - 0.9 * d.vel - 0.003 * d.x;
d.vel += 0.003 * random() - 1 * d.vel - 0.004 * d.x;
d.x += d.vel;
});
drawWithCanvas();
});
canvas.globalAlpha = 0.2;
function drawWithCanvas() {
canvas.clearRect(0, 0, width, height);
var outside = false;
if (outside) canvas.beginPath();
data.forEach(function(d) {
var cx = x( d.x );
var cy = y( d.y );
if (!outside) canvas.beginPath();
canvas.moveTo(cx, cy);
canvas.arc(cx-10, cy, 8, 0, 2 * Math.PI);
if (!outside) canvas.stroke();
});
if (outside) canvas.stroke();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment