Structural engineer and programmer based in Richmond Hill, ON.
circle = ParamCurve(
t => 75 * Math.cos((t * Math.PI) / 180),
t => 75 * Math.sin((t * Math.PI) / 180)
)
ellipse = ParamCurve(
t => 100 * Math.cos((t * Math.PI) / 180),
t => 50 * Math.sin((t * Math.PI) / 180)
)
parabola = ParamCurve(t => 2 * t, t => t ** 2)
hypocycloid = ParamCurve(
t => 5 * (14 * Math.cos(t) + Math.cos(14 * t)),
t => 5 * (14 * Math.sin(t) - Math.sin(14 * t))
)
irrationalHypocycloid = ParamCurve(
t =>
100 * ((Math.sqrt(2) - 1) * Math.cos(t) + Math.cos((Math.sqrt(2) - 1) * t)),
t =>
100 * ((Math.sqrt(2) - 1) * Math.sin(t) - Math.sin((Math.sqrt(2) - 1) * t))
)
butterfly = ParamCurve(
t =>
50 *
Math.sin(t) *
(Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.sin(t / 12) ** 5),
t =>
50 *
Math.cos(t) *
(Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.sin(t / 12) ** 5)
)
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", 600);
const curves = [
{ c: [40, 1, 2, 2], transform: "translate(100, 100)" },
{ c: [40, 1, 4, 2], transform: "translate(400, 100)" },
{ c: [40, 1, 8, 2], transform: "translate(700, 100)" },
{ c: [40, 1, 16, 2], transform: "translate(100, 400)" },
{ c: [40, 1, 32, 2], transform: "translate(400, 400)" },
{ c: [40, 1, 64, 2], transform: "translate(700, 400)" }
];
svg
.selectAll("path")
.data(curves)
.enter()
.append("path")
.attr("stroke", "black")
.attr("stroke-width", "1")
.attr("fill", "none")
.attr("d", d =>
ButterflyCurvesFamily.constants(d.c).path(0, 8 * Math.PI, 0.001 * Math.PI)
)
.attr("transform", d => d.transform);
svg
.selectAll("text")
.data(curves)
.enter()
.append("text")
.attr("stroke", "black")
.attr("x", -50)
.attr("y", 175)
.text(d => `a/b = ${d.c[1]}/${d.c[2]}`)
.attr("transform", d => d.transform);
return svg.node();
}
lissajous = ParamCurve(
t => 475 * Math.sin(3 * t + Math.PI / 2),
t => 100 * Math.sin(50 * t)
)
LissajousCurvesFamily = ParamCurve(
(t, c) => c[0] * Math.sin(c[1] * t + c[2]),
(t, c) => c[3] * Math.sin(c[4] * t)
)
heart = ParamCurve(
t => 5 * Math.sin(t) ** 3,
t =>
4 * Math.cos(t) -
1.3 * Math.cos(2 * t) -
0.6 * Math.cos(3 * t) -
0.2 * Math.cos(4 * t)
)
import { inputsGroup } from "@bumbeishvili/input-groups"
import { slider, select } from "@jashkenas/inputs"
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.
