GPTだけでコッホ曲線書いた。

HK

お疲れ様です。
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では増え続けるだけですが１０次元まで行くと0次元までもどります。

動作


この記事が気に入ったらサポートをしてみませんか？