maxgen = 11
viewof depth = Inputs.range([0, 10], { label: "Depth", step: 1, value: 1 })
class RobinsonTriangle {
constructor({ points, type, depth = 0, subbed, col }) {
this.type = type;
this.points = points;
this.depth = depth;
this.subbed = false;
this.col = col;
this.type === "acute"
? (this.col = "steelblue")
: (this.col = "rgb(160,40,5)");
}
logSubbed() {
console.log("getsubbed", this.depth);
}
get path() {
let [a, b, c] = this.points;
return lineGen([b, a, c]);
}
get svg() {
let [a, b, c] = this.points;
let strokeWidth = 0.1 * Math.pow(0.87, depth);
return htl.svg`<g>
<path d="${lineGen([b, a, c])}" fill="${this.color}"></path>
</g>`;
}
get color() {
return this.type === "acute" ? "steelblue" : "rgb(160,40,5)";
}
flip() {
let [a, b, c] = this.points;
return new RobinsonTriangle({ type: this.type, points: [a, c, b] });
}
subdivide() {
//console.log("subb", this.subbed);
// this.subbed = true;
let [a, b, c] = this.points;
if (this.type === "acute") {
let p = lerpxy(a, b, 1 / PHI);
// console.log("sub1");
this.subbed = true;
return [
new RobinsonTriangle({
type: "acute",
points: [c, p, b],
depth: this.depth + 1
}),
new RobinsonTriangle({
type: "obtuse",
points: [p, c, a],
depth: this.depth + 1
})
];
} else {
let q = lerpxy(b, a, 1 / PHI);
let r = lerpxy(b, c, 1 / PHI);
// const triA = new RobinsonTriangle({
// type: "obtuse",
// points: [r, c, a],
// depth: this.depth + 1
// });
// const triB = new RobinsonTriangle({
// type: "obtuse",
// points: [q, r, b],
// depth: this.depth + 1
// });
// const triC = new RobinsonTriangle({
// type: "acute",
// points: [r, q, a],
// depth: this.depth + 1
// });
// console.log("sub2");
this.subbed = true;
return [
new RobinsonTriangle({
type: "obtuse",
points: [r, c, a],
depth: this.depth + 1
}),
new RobinsonTriangle({
type: "obtuse",
points: [q, r, b],
depth: this.depth + 1
}),
new RobinsonTriangle({
type: "acute",
points: [r, q, a],
depth: this.depth + 1
})
];
}
//this.subbed = true;
}
}
class Decagon {
constructor(
x,
y,
size,
//radius,
triangles
// depthStop,
// position,
// skryt,
// clusterRadius
) {
this.x = x;
this.y = y;
//this.radius = radius;
this.size = size;
this.triangles = triangles;
// this.depthStop = depthStop; // map skrytText.length to a depth value
// this.position = position; // center of persons decagon. also center of white deca
// this.skryt = skryt;
// this.clusterRadius = clusterRadius; // Calculated from center decagon to outmost perim of outmost decagon
const renderSize = this.size;
this.triangles = triangles;
// Array.from(
// { length: 10 },
// (d, i) =>
// new RobinsonTriangle({
// type: "acute",
// points: [
// { x: this.x, y: this.y },
// {
// x: Math.cos((TAU / 10) * i) * size,
// y: Math.sin((TAU / 10) * i) * size
// },
// {
// x: Math.cos((TAU / 10) * (i + 1)) * size,
// y: Math.sin((TAU / 10) * (i + 1)) * size
// }
// ]
// })
// )
// .map((s, i) => (i % 2 ? s.flip() : s));
// for (let i = 0; i < depth; i++) {
// this.triangles = this.triangles.flatMap((s, j) => s.subdivide());
// }
// return triangles;
}
get getSum() {
const num = 2 * 3;
return (this.triangles = num);
}
}
dec = new Decagon(0, 0, 400)
triangles = dec.triangles
//dec.triangles.forEach((tri) => tri.logSubbed())
draw = d3
.line()
.curve(d3.curveLinearClosed)
.x((d) => d[0])
.y((d) => d[1])
lineGen = d3
.line()
.curve(d3.curveLinearClosed)
.x((d) => d.x)
.y((d) => d.y)
deg = (d) => d / 360 * TAU
TAU = Math.PI * 2
lerp = (a, b, t) => a + (b - a) * t
lerpxy = (p1, p2, t) => ({ x: lerp(p1.x, p2.x, t), y: lerp(p1.y, p2.y, t) })
PHI = (1 + Math.sqrt(5)) / 2
d3 = require("d3@6")
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.
