mutable atcp = [];
canvas = {
const context = DOM.context2d(width, height);
const line = d3.lineRadial()
.context(context)
.curve(d3.curveLinearClosed)
.angle((r, i) => i * 2 * Math.PI / n)
.radius(r => r);
let prevTime = performance.now();
while (true) {
context.clearRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
context.lineWidth = lineWidth;
context.lineJoin = "round";
context.globalCompositeOperation = glCompOp;
colors.forEach((color, j) => {
context.beginPath();
line(Float64Array.from({length: n}, (_, i) => {
const a = i * 2 * Math.PI / n;
const t = (paused ? prevTime : performance.now()) * speed;
const c = Math.cos(a * frequency - j * shift + t);
const p = Math.pow((1 + Math.cos(a - t)) / 2, 3);
return radius + amplitude * c * p;
}));
context.strokeStyle = color;
context.stroke();
});
context.restore();
yield context.canvas;
}
}
colors = ["cyan", "magenta", "yellow"]
// colors = ['#ff4242', '#1841fe', '#74E9AE']
shift = 2 * Math.PI / shiftAmt
speed = speedAmt //1 / 1000
frequency = freqAmt
amplitude = amplitudeAmt
width = widthAmt
radius = radiusAmt //Math.min(width, height) / 2 - amplitude * 2
height = 640
mutable n = nAmt //360
import {slider, select, color} from "@jashkenas/inputs"
d3 = require("d3-shape@1")
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.
