Simulating the physical world
github.com/vasturiano | bl.ocks.org/vasturiano | twitter.com/vastur
September 22-23, 2017 | San Francisco
F1
F2
...
Fn
Forces
Calc (\(x\),\(y\)) coords
(\(\Delta x = vx\))
alpha < min
stop
y
alpha decay
n
Init nodes
\(x\),\(y\)
\(vx\),\(vy\)
tick
(raf)
(still phyllotaxis)
onTick()
function tick() {
var i, n = nodes.length, node;
alpha += (alphaTarget - alpha) * alphaDecay;
forces.each(function(force) {
force(alpha);
});
for (i = 0; i < n; ++i) {
node = nodes[i];
if (node.fx == null) node.x += node.vx *= velocityDecay;
else node.x = node.fx, node.vx = 0;
if (node.fy == null) node.y += node.vy *= velocityDecay;
else node.y = node.fy, node.vy = 0;
}
}
F1
F2
...
Fn
Forces
Calc (\(x\),\(y\)) coords
(\(\Delta x = vx\))
alpha < min
stop
y
alpha decay
n
Init nodes
\(x\),\(y\)
\(vx\),\(vy\)
tick
(raf)
(still phyllotaxis)
onTick()
function myForce(alpha) {
const k = alpha * 1e-4;
nodes.forEach(node => {
node.vx -= node.x * k;
node.vy -= node.y * k;
});
}function myForce(alpha) {
const k = alpha * 1e-4;
nodes.forEach(node => {
node.vx -= node.x * k;
node.vy -= node.y * k;
});
}
const myNodes = [ /* nodes data */ ];
d3.forceSimulation()
.nodes(myNodes)
.force('toZero', myForce)
.on('tick', () => {
// Draw nodes
const dot = domNode
.selectAll('circle')
.data(myNodes);
dot.merge(
dot.enter
.append('circle')
.attr('r', 5)
)
.attr('cx', d => d.x)
.attr('cy', d => d.y);
});d3.forceSimulation()
.force("link", d3.forceLink(links)) // distance: 30
.force("charge", d3.forceManyBody()) // strength: -30
.force("center", d3.forceCenter(width/2, height/2));positioning
charge
linked
collision
Compilation of all-things D3-force
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
d3ForcePod()(document.body)
.genNodes()
.addForce(d3.forceBounce()
.radius(d => d.r)
)
.addForce(d3.forceX()
.x(width/2)
.strength(0.002)
);a
a
aaa
a
a
a
d3.forceSimulation()
.numDimensions(/* 1, 2 or 3*/)a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
a
a
a
aaa
a
a
a
and may the force be with you...
github.com/vasturiano | bl.ocks.org/vasturiano | twitter.com/vastur
<vastur@gmail.com>