<!-- index.html -->
<body>
<canvas></canvas>
</body>
body {
width: 100%;
}
canvas {
display: block;
margin: 50px auto;
}
const chaikin = ({ points, step, isClosed = false }) => {
if (step <= 0) {
return { points, isClosed };
}
const result = [];
// use the isClosed variable to determine the max for loop index
const maxIndex = isClosed ? points.length : points.length - 1;
for (let i = 0; i < maxIndex; i++) {
const pointA = points[i];
const pointB = points[(i + 1) % points.length];
const [xA, yA] = pointA;
const [xB, yB] = pointB;
// 25% in point's x and y
const x1 = 0.25 * xB + 0.75 * xA;
const y1 = 0.25 * yB + 0.75 * yA;
// 75% in point's x and y
const x2 = 0.75 * xB + 0.25 * xA;
const y2 = 0.75 * yB + 0.25 * yA;
result.push([x1, y1]);
result.push([x2, y2]);
}
// NEW! pass the isClosed value to any future calls
return chaikin({ points: result, step: step - 1, isClosed });
};
// Set up the canvas
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
// set the size to smaller of window width or height
var size = Math.min(window.innerWidth, window.innerHeight);
canvas.width = size - 100;
canvas.height = size - 100;
// draw a gray rectangle covering the entire canvas
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgba(0,0,0, 0.1)";
context.fill();
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.