Helps programmers make code easier to maintain.
Published
Edited
Jul 5, 2021
11 stars
class Hex {
constructor(x, y, radius, rotation = 0) {
this.x = x;
this.y = y;
this.radius = radius;
this.rotation = rotation;
// Trigonometry :)
this.corners = [
[x + radius * Math.cos(Math.PI * 0/6 - rotation), y + radius * Math.sin(Math.PI * 0/6 - rotation)],
[x + radius * Math.cos(Math.PI * 2/6 - rotation), y + radius * Math.sin(Math.PI * 2/6 - rotation)],
[x + radius * Math.cos(Math.PI * 4/6 - rotation), y + radius * Math.sin(Math.PI * 4/6 - rotation)],
[x + radius * Math.cos(Math.PI * 6/6 - rotation), y + radius * Math.sin(Math.PI * 6/6 - rotation)],
[x + radius * Math.cos(Math.PI * 8/6 - rotation), y + radius * Math.sin(Math.PI * 8/6 - rotation)],
[x + radius * Math.cos(Math.PI * 10/6 - rotation), y + radius * Math.sin(Math.PI * 10/6 - rotation)]
];
}
render(svg, stroke) {
svg.append("path")
.attr("d", draw(this.corners))
.attr("stroke", stroke)
.attr("fill", "none");
}
}
class HexFlower {
constructor(x, y, radius, rotation = 0) {
this.x = x;
this.y = y;
this.radius = radius;
this.rotation = rotation;
// See the above explanation to learn how to arrive at this formula
this.cellRadius = radius / Math.sqrt(7);
// You can use basic trigonometry to arrive at this formula for the 'height' of a regular hexagon. By
// 'height' here, I mean the height of the hexagon when it's resting on one of its six sides. The √3/2
// relation is well-known. See e.g. https://en.wikipedia.org/wiki/Hexagon
this.cellHeight = 2 * this.cellRadius * Math.sqrt(3) / 2;
// These coordinates give the directions towards the centers of each of the surrounding cells.
const directions = [
[Math.cos(Math.PI * 1/6 - rotation), Math.sin(Math.PI * 1/6 - rotation)],
[Math.cos(Math.PI * 3/6 - rotation), Math.sin(Math.PI * 3/6 - rotation)],
[Math.cos(Math.PI * 5/6 - rotation), Math.sin(Math.PI * 5/6 - rotation)],
[Math.cos(Math.PI * 7/6 - rotation), Math.sin(Math.PI * 7/6 - rotation)],
[Math.cos(Math.PI * 9/6 - rotation), Math.sin(Math.PI * 9/6 - rotation)],
[Math.cos(Math.PI * 11/6 - rotation), Math.sin(Math.PI * 11/6 - rotation)]
];
this.petals = directions.map(
([x1, y1]) => new Hex(x + this.cellHeight * x1, y + this.cellHeight * y1, this.cellRadius, rotation));
this.center = new Hex(x, y, this.cellRadius, rotation);
}
render(svg, petalStroke, centerStroke = petalStroke) {
for (const petal of this.petals) {
petal.render(svg, petalStroke);
}
this.center.render(svg, centerStroke);
}
renderFractal(renderer, colors, level) {
if (level <= 0) {
return;
}
renderer.render(this, colors.getPetalColor(level), colors.getCenterColor(level));
// See notes below for an explanation of this formula
const flowerRotation = -Math.asin(Math.sqrt(3/7)/2);
const flowers = [this.center].concat(this.petals).map(
h => new HexFlower(h.x, h.y, this.cellRadius, this.rotation + flowerRotation));
for (const flower of flowers) {
flower.renderFractal(renderer, colors, level - 1);
}
}
}
class AllCellsRenderer {
constructor(svg) {
this.svg = svg;
}
render(flower, petalStroke, centerStroke = petalStroke) {
for (const petal of flower.petals) {
petal.render(this.svg, petalStroke);
}
flower.center.render(this.svg, centerStroke);
}
}
class RandomCellSkippingRenderer {
constructor(svg, renderProbability = 0.5) {
this.svg = svg;
this.renderProbability = renderProbability;
}
render(flower, petalStroke, centerStroke = petalStroke) {
for (const petal of flower.petals) {
if (Math.random() < this.renderProbability) {
petal.render(this.svg, petalStroke);
}
}
if (Math.random() < this.renderProbability) {
flower.center.render(this.svg, centerStroke);
}
}
}
class LinearColorRanges {
constructor(levels, petalColors, centerColors = petalColors) {
this.getPetalColor = d3.scaleLinear().domain([1, levels]).range(petalColors);
this.getCenterColor = d3.scaleLinear().domain([1, levels]).range(centerColors);
}
}
class RandomColorDimmer {
constructor(inner, dimFactor = 1) {
this.inner = inner;
this.dimFactor = dimFactor;
}
getPetalColor(level) {
const color = this.inner.getPetalColor(level);
return d3.color(color).darker(Math.random() * this.dimFactor);
}
getCenterColor(level) {
const color = this.inner.getCenterColor(level);
return d3.color(color).darker(Math.random() * this.dimFactor);
}
}
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.
