GPTだけでコッホ曲線書いた。
お疲れ様です。
HTMLとJSで書いてもらいました。
<!DOCTYPE html>
<html>
<head>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg id="svgCanvas" width="500" height="500"></svg>
<button id="saveButton">SVGで保存</button>
<script>
const svgCanvas = document.getElementById('svgCanvas');
const saveButton = document.getElementById('saveButton');
const offsetX = 0;
const offsetY = 100;
const centerX = svgCanvas.width.baseVal.value / 2 + offsetX;
const centerY = svgCanvas.height.baseVal.value / 2 + offsetY;
const length = 200;
let depth = 0;
const MAXDEPTH = 8;
let increasingDepth = true;
function drawKochSnowflake(x1, y1, x2, y2, depth, svgDoc) {
if (depth === 0) {
const line = svgDoc.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", x1);
line.setAttribute("y1", y1);
line.setAttribute("x2", x2);
line.setAttribute("y2", y2);
line.setAttribute("stroke", "red");
line.setAttribute("stroke-width", 1);
svgCanvas.appendChild(line);
} else {
const deltaX = (x2 - x1) / 3;
const deltaY = (y2 - y1) / 3;
const x3 = x1 + deltaX;
const y3 = y1 + deltaY;
const x4 = x3 + (deltaX * Math.cos(Math.PI / 3)) - (deltaY * Math.sin(Math.PI / 3));
const y4 = y3 + (deltaX * Math.sin(Math.PI / 3)) + (deltaY * Math.cos(Math.PI / 3));
const x5 = x1 + 2 * deltaX;
const y5 = y1 + 2 * deltaY;
const x6 = x1 + 3 * deltaX;
const y6 = y1 + 3 * deltaY;
drawKochSnowflake(x1, y1, x3, y3, depth - 1, svgDoc);
drawKochSnowflake(x3, y3, x4, y4, depth - 1, svgDoc);
drawKochSnowflake(x4, y4, x5, y5, depth - 1, svgDoc);
drawKochSnowflake(x5, y5, x6, y6, depth - 1, svgDoc);
}
}
function clearSVGCanvas() {
while (svgCanvas.firstChild) {
svgCanvas.removeChild(svgCanvas.firstChild);
}
}
function saveSVG() {
const svgData = new XMLSerializer().serializeToString(svgCanvas);
const blob = new Blob([svgData], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'koch_snowflake.svg';
a.click();
URL.revokeObjectURL(url);
}
saveButton.addEventListener('click', saveSVG);
function animateKochSnowflake() {
clearSVGCanvas();
const svgDoc = svgCanvas.ownerDocument;
drawKochSnowflake(centerX - length, centerY, centerX + length, centerY, depth, svgDoc);
drawKochSnowflake(centerX + length, centerY, centerX, centerY - Math.sqrt(3) * length, depth, svgDoc);
drawKochSnowflake(centerX, centerY - Math.sqrt(3) * length, centerX - length, centerY, depth, svgDoc);
if (increasingDepth) {
depth++;
if (depth === MAXDEPTH) {
increasingDepth = false;
}
} else {
depth--;
if (depth === 0) {
increasingDepth = true;
}
}
setTimeout(animateKochSnowflake, 500);
}
animateKochSnowflake();
</script>
</body>
</html>
SVGで描画して
SVGで保存するボタンがあるので、押した瞬間の曲線を保存できます。
GIFでは増え続けるだけですが10次元まで行くと0次元までもどります。
この記事が気に入ったらサポートをしてみませんか?