{
const svg = d3.select(DOM.svg(width, height));
svg
.append("rect")
.attr("id", "background-rect")
.attr("width", width)
.attr("height", height)
.style("fill", "steelblue");
const grid = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
grid
.selectAll("circle")
.data([...combine(alive)].map((d) => d.split(",")))
.enter()
.append("circle")
.attr("cx", (d) => d[0] * squareSide)
.attr("cy", (d) => d[1] * squareSide)
.attr("r", circleRadius)
.style("fill", "white");
return svg.node();
}
Dots
glider = new Set(['-1,-1', '0,-1', '1,-1', '1,0', '0,1']) // https://conwaylife.com/wiki/Glider
alive = {
let gliders = this || [];
let i = 0;
while (true) {
if (fps === 0) return yield gliders;
yield Promises.tick(1000 / fps, (gliders = next(gliders)));
}
}
next = (arrayOfGames) => {
if (arrayOfGames.length < gliderCount) arrayOfGames.push(drop());
return arrayOfGames.map(tick).filter(inBounds);
}
combine = (arrayOfSets) =>
arrayOfSets.reduce((a, b) => new Set([...a, ...b]), new Set())
Dropper
drop = () => {
/*const angle = angles[Math.floor(Math.random() * angles.length)];
const dx = (() => Math.floor(dist() * widthBound))();
const dy = (() => Math.floor(dist() * heightBound))();*/
const dropSide =
dropLocations[Math.floor(Math.random() * dropLocations.length)];
const angle = dropAngles[dropSide][Math.floor(Math.random() * 2)];
const dx = dropTranslations[dropSide][0]();
const dy = dropTranslations[dropSide][1]();
const coords = coordinateSetToArray(glider)
.map((coordinate) => rotate(degreesToRadians(angle), coordinate))
.map((coordinate) => translate(dx, dy, coordinate));
return new Set(coords.map((a) => a.toString()));
}
angles = [0, 90, 180, 270]
dropLocations = ['N', 'E', 'S', 'W']
dropAngles = ({
N: [90, 180],
E: [180, 270],
S: [270, 0],
W: [0, 90]
})
dropTranslations = ({
N: [
() => Math.floor(dist() * widthBound),
() => -(heightBound + boardMargin)
],
E: [() => widthBound + boardMargin, () => Math.floor(dist() * heightBound)],
S: [() => Math.floor(dist() * widthBound), () => heightBound + boardMargin],
W: [() => -(widthBound + boardMargin), () => Math.floor(dist() * heightBound)]
})
dist = () =>
(new Array(f)
.fill(0)
.map(() => Math.random())
.reduce((a, b) => a + b) /
f) *
2 -
1
Dimensions
squareSide = (circleRadius + circleMargin) * 2
boardWidth = oddStep(Math.ceil(width / squareSide))
boardHeight = oddStep(Math.ceil(height / squareSide))
widthBound = Math.floor(boardWidth / 2)
heightBound = Math.floor(boardHeight / 2)
boardMargin = 3 // a glider is 3 x 3
inBounds = (coordinateSet) => {
return coordinateSetToArray(coordinateSet).every(
(c) =>
Math.abs(c[0]) < widthBound + 2 * boardMargin &&
Math.abs(c[1]) < heightBound + 2 * boardMargin
);
}
State transition functions
taken from Visnu Pitiyanuvathhttps://observablehq.com/@visnup's implementation of Conway’s Game of Lifehttps://observablehq.com/@visnup/game-of-life
function tick(cells) {
const counts = {}
for (const cell of cells)
for (const n of neighbors(cell.split(",").map(Number)))
counts[n] = (counts[n] ?? 0) + 1
const next = new Set()
for (const [cell, count] of Object.entries(counts))
if (count === 3 || (count == 2 && cells.has(cell))) next.add(cell)
return next
}
function* neighbors([x, y]) {
for (const dx of [-1, 0, 1])
for (const dy of [-1, 0, 1])
if (dx !== 0 || dy !== 0) yield [x + dx, y + dy]
}
Set and array utility
coordinateSetToArray = (set) =>
[...set].map((coordinate) => coordinate.split(","))
oddStep = (x) => x + (x % 2 === 0 ? 1 : 0)
Rotation
rotate = function (φ, [x, y]) {
return [x * cos(φ) - y * sin(φ), x * sin(φ) + y * cos(φ)].map(round);
}
degreesToRadians = (degrees) => (degrees * π) / 180
π = Math.PI
sin = Math.sin
cos = Math.cos
round = Math.round
Translation
translate = (δx, δy, [x, y]) => [x + δx, y + δy]
View height
height = width / 2
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.
