Public
Edited
Apr 11
shapes = ({
square: { m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1 },
triangle: { m: 3, n1: 1, n2: 1, n3: 1, a: 1, b: 1 },
rectangle: { m: 4, n1: 0.5, n2: 1, n3: 1, a: 1.5, b: 0.8 },
line: { m: 2, n1: 0.01, n2: 1, n3: 1, a: 1, b: 0.01 },
circle: { m: 0, n1: 1, n2: 1, n3: 1, a: 1, b: 1 },
sphere: { m: 0, n1: 1, n2: 1, n3: 1, a: 1, b: 1 },
cube: { m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1 },
octahedron:{ m: 3, n1: 1, n2: 1, n3: 1, a: 1, b: 1 },
cylinder: { m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1 }
});
viewof s = Inputs.select(Object.keys(shapes), {label: "Shape to choose", format: x => x})
shapes[sf]
viewof sf = selectFlat({
options: Object.keys(shapes),
value: "B",
output: false,
description: "your choice"
})
renderSuperformulaShape(shapes[sf])
function renderSuperformulaShape({ m, n1, n2, n3, a, b }) {
const width = 400;
const height = 400;
console.log({ m, n1, n2, n3, a, b })
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("background", "#f9f9f9");
function superformula(theta) {
const t1 = Math.pow(Math.abs(Math.cos(m * theta / 4) / a), n2);
const t2 = Math.pow(Math.abs(Math.sin(m * theta / 4) / b), n3);
const r = Math.pow(t1 + t2, -1 / n1);
return r;
}
const points = d3.range(0, 2 * Math.PI, 0.01).map(theta => {
const r = superformula(theta);
return [r * 150 * Math.cos(theta), r * 150 * Math.sin(theta)];
});
svg.append("path")
.attr("d", d3.line()(points) + "Z")
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "steelblue");
return svg.node();
}
import {selectFlat} from "@fil/selectflat"
d3 = require("d3@4")
superformula = import("https://cdn.jsdelivr.net/gh/sifbuilder/d3forms@master/superformula.js")
d3
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.
