Published
Edited
Aug 5, 2020
{
const ctx = DOM.context2d();
ctx.canvas.width = width;
ctx.canvas.height = height;
// Draw the control points.
ctx.strokeStyle = 'coral';
ctx.beginPath();
ctx.arc(cpx1, cpyAnim1, 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(cpx2, cpyAnim2, 5, 0, 2 * Math.PI);
ctx.stroke();
// The clip path.
ctx.beginPath();
ctx.moveTo(0, height);
ctx.lineTo(0, y);
ctx.quadraticCurveTo(cpx1, cpyAnim1, endX1, y);
ctx.quadraticCurveTo(cpx2, cpyAnim2, endX2, y);
ctx.lineTo(width, height);
ctx.closePath();
ctx.clip();
// Then, draw the clip content
ctx.fillStyle = 'skyblue';
ctx.fillRect(0, 0, width, height);
// Draw control points again (to show in front of blue wave).
ctx.strokeStyle = 'coral';
ctx.beginPath();
ctx.arc(cpx1, cpyAnim1, 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(cpx2, cpyAnim2, 5, 0, 2 * Math.PI);
ctx.stroke();
return ctx.canvas;
}
cpyAnim2 = y - amplitude * weight
cpyAnim1 = y + amplitude * weight
weight = {
const weight = {
top: lift,
bottom: 1 - lift,
both: 1 - lift < 0.5 ? 1 - lift : lift,
none: 1
};
return weight[weightType];
}
amplitude = Math.sin(now / 1000) * 150
y = height * lift
lift = (Math.sin(now / 2000) + 1) / 2
yOffset = Math.sin(now / 1000) * 0.3
cpy1 = height * 0.5 + height * yOffset
xOffset = xMove === "true" ? Math.cos(now / 1000) * 0.25 : 0
cpx1 = width * 0.25 + width * xOffset
endX1 = width * 0.5 + width * xOffset
cpx2 = width * 0.75 + width * xOffset
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.
