🧪 Indie software researcher & developer
👾 React game developer
Published
Edited
Jun 20, 2022
display1 = {
const space = spacetime[step % spacetime.length];
const forces = calcForces(space);
const viewBox = [-15, -15, 30, 30];
const svg = d3
.create("svg")
.style("border", "1px solid")
.style("height", "600px")
.attr("viewBox", viewBox);
const defs = svg.append("svg:defs");
for (const color of colorMap) {
addArrowMarker(defs, "arrow_" + color.substr(1), color);
}
const g = svg.append("g");
g.append("g")
.selectAll("circle")
.data(hexagonDots(viewBox[2]))
.join("circle")
.attr("cx", (qr) => hec.axialToFlatCart(qr)[0])
.attr("cy", (qr) => hec.axialToFlatCart(qr)[1])
.attr("r", 0.05);
g.append("g")
.selectAll("circle")
.data(space)
.join("circle")
.attr("cx", ({ pos }) => hec.axialToFlatCart(pos)[0])
.attr("cy", ({ pos }) => hec.axialToFlatCart(pos)[1])
.attr("fill", ({ kind }) => colorMap[kind])
.attr("r", 0.5);
g.append("g")
.selectAll("path")
.data(forces.filter(({ vec }) => vec3.len(vec) > 0))
.join("path")
.attr("stroke", (f) => colorMap[f.target.kind])
.attr("stroke-width", 0.1)
.attr("d", (force) =>
d3.line()([
hec.axialToFlatCart(force.target.pos),
hec.axialToFlatCart(vec3.add([], force.target.pos, force.vec))
])
)
.attr(
"marker-end",
(f) => `url(#arrow_${colorMap[f.target.kind].substr(1)})`
);
svg.call(
d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform))
);
return svg.node();
}
simulate = (space) => {
const newSpace = _.cloneDeep(space);
const forces = calcForces(newSpace);
for (const force of forces) {
vec3.add(force.target.pos, force.target.pos, force.vec);
}
return newSpace;
}
calcForces(initialSpace)
spacetime = {
const spacetime = Array.from({ length: 100 });
spacetime[0] = initialSpace;
for (var i = 1; i < spacetime.length; i++) {
spacetime[i] = simulate(spacetime[i - 1]);
}
return spacetime;
}
<h2>Todo</h2>
<ul>
<li>spawner impl -- a static position in space, that spawns buttons of a given kind (a condition to spawn?)</li>
<li>consumer impl -- a static position in space, that consumes all buttons of a given kind at that position</li>
<li>compose a cyclic task</li>
<li>write introduction and game goal text</li>
<li>correctly display multiple buttons on a single position</li>
<li>spawner in editor</li>
<li>consumer in editor</li>
<li>flip impl -- a button has a flippable multiplier +1/-1 applied on a force vector both from source and target</li>
<li>flip rule editor</li>
<li>merge impl -- a rule to transform button kinds like (buttonKind1, buttonKind2) => buttonKind3 if they are at the same position (and of the same flip?)</li>
<li>merge rule editor</li>
<li>?? annihilation impl -- a rule to annihilate two buttons if they are at the same position</li>
<li>?? appearance impl -- a rule to create a new button (if two buttons get on the same position? a button splits into two as some anti-annihilation?)</li>
<li><s>test</s></li>
</ul>
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.
