totalNodes = 512
viewof canvasGrid = {
const q5 = new Q5();
q5.createCanvas(width, height);
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
// q5.background(chance.pickone(colors));
q5.background("#FFF");
q5.colorMode(q5.HSB, 100);
q5.noStroke();
q5.fill("black");
while (true) {
if (clear) q5.clear();
simulation.nodes().forEach((n, i) => {
q5.fill(n.color);
// q5.circle(n.x, n.y, n.r * (t * n.trate));
q5.circle(n.x, n.y, n.r);
});
yield el;
}
}
simulation = {
const simulation = d3
.forceSimulation(nodes)
// .force("center", d3.forceCenter(width / 2, height / 2))
// .force("charge", d3.forceManyBody().strength(-0.12))
.force(
"collide",
d3
.forceCollide()
.radius((d) => {
return d.r * 0.95;
})
.strength(0.25)
)
.alpha(0.01)
.alphaDecay(0.0001)
.velocityDecay(0.01);
return simulation;
}
function makeNode(i = 0) {
const startMargin = 1.2;
return {
// x: width / 2,
// y: height / 2,
// x: chance.integer({ min: 0, max: width }),
// y: chance.integer({ min: 0, max: height }),
x:
width / 2 +
chance.integer({ min: -width / startMargin, max: width / startMargin }),
// y:
// height / 2 +
// chance.integer({ min: -height / startMargin, max: height / startMargin }),
y: 0,
vy: chance.integer({ min: 0, max: 1 }),
vx: 0,
r: _.clamp(i * 0.05, 2.5, 64),
trate: chance.floating({ min: 0.1, max: 4 }),
color: chance.pickone(colors)
};
}
nodes = {
more;
const nodes = [];
for (let nodeCount = 0; nodeCount < totalNodes; ++nodeCount) {
nodes.push(makeNode(nodeCount));
}
return nodes;
}
simulation.nodes()
height = width * 0.9
palettes
colors = {
more;
const paletteName = chance.pickone(Object.keys(palettes));
return chance.pickone(palettes[paletteName]);
// return ["#000", "#FFF"];
}
_ = require("lodash")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
