lissajous = (t, a, b, δ) =>
t.map(t => [Math.sin(a * t + δ), Math.cos(b * t), 0])
{
// The WebGL and regl context is defined below so that we don't recreate it every
// time we execute this cell.
const { canvas, regl, camera } = plot1;
// We do recreate the draw command every time, but this doesn't seem to cause problems.
const drawLines = createDrawLineCommand(regl);
camera(() => {
drawLines({
// We pass a list of [[x0, y0, z0], [x1, y1, z1], ...]
position: lissajous(t, a, b, δ)
});
});
return canvas;
}
{
const { canvas, regl, camera } = plot2;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
camera(() => {
drawBorderedLines({
position: lissajous(t, a, b, δ),
borderColor: { constant: [0.4, 0.8, 1, 1] }
});
});
return canvas;
}
{
const { canvas, regl, camera } = plot3;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
// Construct a buffer *once*
const buffer = regl.buffer(lissajous(t, a, b, δ));
function draw() {
// Needed for regl to maintain its state with our custom timing loop
regl.poll();
camera(({ time }) => {
// Update the buffer data in-place. This is much faster and less
// disruptive than passing array data to the draw command or manually
// creating a new buffer for each frame.
buffer.subdata(lissajous(t, a, b, time));
drawBorderedLines({
// buffer doesn't expose the number of items, so we need to specify
// the number of vertices
count: t.length,
position: buffer
});
});
return canvas;
}
if (play) {
while (true) yield draw();
} else {
yield draw();
}
}
{
const { canvas, regl, camera } = plot4;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
camera(() => {
drawBorderedLines({
position: lissajous(t, a, b, δ),
width: { constant: lineWidth },
color: { constant: hexToFloatRgba(lineColor) },
borderWidth: { constant: borderWidth },
borderColor: { constant: hexToFloatRgba(borderColor) },
maxExpectedTurningAngle
});
});
return canvas;
}
{
const { canvas, regl, camera } = plot5;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
const spectrum = t => [
0.5 + 0.5 * Math.cos(t),
0.5 + 0.5 * Math.cos(t - (2 / 3) * Math.PI),
0.5 + 0.5 * Math.cos(t - (4 / 3) * Math.PI),
1
];
const wavyGrayscale = t => [
0.5 + 0.5 * Math.cos(t * 10),
0.5 + 0.5 * Math.cos(t * 10),
0.5 + 0.5 * Math.cos(t * 10),
1
];
camera(() => {
drawBorderedLines({
position: lissajous(t, a, b, δ),
width: t.map(t => 5 + 3 * Math.cos(t)),
color: t.map(spectrum),
borderWidth: t.map(t => 5 + 3 * Math.cos(t)),
borderColor: t.map(wavyGrayscale),
maxExpectedTurningAngle
});
});
return canvas;
}
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.
