open web tools for creativity and community
MIN = 0
MAX = 11
DELTA = MAX - MIN
interpolators = Array(DELTA)
.fill()
.map((_, i) => {
const from = i + MIN;
return d3.interpolate(
// To interpolate between n and n+1, double the points in n
doubleArray(sierpinskiCurve(size, from).points),
sierpinskiCurve(size, from + 1).points
);
})
timeUpdater = {
const elapsed = playing ? now - startTime : 0;
if (elapsedTime !== elapsed) {
mutable elapsedTime = elapsed;
}
}
mutable elapsedTime = 0
playhead = Math.abs(
((elapsedTime + TIME_TOTAL) % (TIME_TOTAL * 2)) - TIME_TOTAL
) // Linear interpolation back and forth (saw wave) from 0 to TIME_TOTAL
goingUp = !playing || Math.floor(elapsedTime / TIME_TOTAL) % 2 === 0
// It took a couple of days to think how to do this in a stateless way
interp = playing ? DELTA * (playhead / TIME_TOTAL) : sliderValue - MIN
interpIndex = Math.floor(interp)
interpRemainder = interp % 1
smoothRemainder = Math.sin(interpRemainder * Math.PI + Math.PI / 2) / -2 + 0.5
points = {
if (!playing) {
let index = interpIndex;
let remainder = interpRemainder;
if (index >= interpolators.length) {
index = interpolators.length - 1;
remainder = 1;
}
return yield interpolators[index](remainder);
}
while (playing) {
yield interpolators[interpIndex](smoothRemainder);
}
}
pathEl = d3.select(animatedSVG).select('path#curve')
{
// So we don't remake the svg on every frame of animation,
// this cell will update the path's d attribute when the
// points array changes
pathEl.attr('d', lineGen(points) + "Z");
}
triangles = Array(DELTA + 1)
.fill()
.map((_, i) => {
const from = i + MIN;
return sierpinskiCurve(size, from).triangles.reduce((d, tri) => {
return (
d +
`M ${tri[0][0]},${tri[0][1]} L ${tri[1][0]},${tri[1][1]} L ${tri[2][0]},${tri[2][1]} Z `
);
}, '');
})
triIndexUpdater = {
// Make grid match the target iteration of the curve animation
let index = goingUp ? Math.ceil(interp) : Math.floor(interp);
if (index >= triangles.length) {
index = triangles.length - 1;
}
if (triIndex !== index) {
mutable triIndex = index;
}
}
mutable triIndex = 0
gridPathEl = d3.select(animatedSVG).select('path#grid')
{
const path = triangles[triIndex];
gridPathEl.attr('d', path);
}
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.
