ChatGPTで図形を描画させる

# 経緯
ChatGPTが流行ってるので遊んでいる。
「SVGで」と頼めば図形も描画してくれるらしい。

# svgで円を書いてください
>SVGで円を描くには、<circle>タグを使用します。以下は、SVG内で円を描く基本的な例です。半径、中心のX座標、中心のY座標、および塗りつぶし色を指定します。
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

</body>
</html>
```
>このコードは、半径40ピクセル、中心座標が(50, 50)で、青色の円を描画します。widthとheight属性でSVGキャンバスのサイズを調整できます。また、fill属性を変更することで、円の塗りつぶし色を変更できます。

![円.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/e9753e49-c270-c654-875d-75cb80253184.jpeg)

# svgで星を書いてください
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="yellow" />
</svg>

</body>
</html>

```
![星.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/498dde38-07d1-dc4f-fb4d-b22f5e44fbcb.jpeg)

# svgで11角形を書いて下さい
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="300" height="300">
  <polygon points="
    150,25
    227.522,60.363
    244.966,137.639
    195.105,208.972
    104.895,208.972
    55.034,137.639
    72.478,60.363
  " fill="green" />
</svg>

</body>
</html>
```
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/d0f8942c-04fa-7689-6473-906095944e27.jpeg)

# 7角形に見えます
>申し訳ありません。正しい正11角形のSVGコードを以下に示します。
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="300" height="300" viewBox="0 0 300 300">
  <polygon points="
    150,25;
    219.641,60.450;
    248.268,132.082;
    218.142,203.644;
    150,235.450;
    81.858,203.644;
    51.732,132.082;
    80.359,60.450;
  " fill="green" />
</svg>

</body>
</html>
```
セミコロンが余分なようだ。
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/9c871182-92d8-94c0-8cfa-f5c5f4e469bd.jpeg)



# pointsの中にあるセミコロンは省いてください。あと8角形に見えます。
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="300" height="300">
  <polygon points="
    150,20
    231.416,60.45
    246.283,143.402
    200,215.45
    100,215.45
    53.717,143.402
    68.584,60.45
  " fill="green" />
</svg>

</body>
</html>
```
![7b.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/875c4508-ae57-f291-7c49-7b677dee5672.jpeg)

# 7角形に戻りました。11角形は難しいかな？
>申し訳ありません。今度こそ正11角形のSVGコードを提供します。
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="300" height="300">
  <polygon points="
    150,30
    215.23,66.674
    242.076,130.602
    200.276,191.147
    130.234,207.608
    69.766,207.608
    0.276,191.147
    57.924,130.602
    84.77,66.674
  " fill="green" />
</svg>

</body>
</html>
```
![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/2f6cb4a9-7cf7-2d15-abee-1393f3ca0f26.jpeg)

# 9角形に見えます
>申し訳ありません。再度、正確な正11角形のSVGコードを提供します。
```:html
<!DOCTYPE html>
<html>
<body>

<svg width="300" height="300">
  <polygon points="
    150,25
    212.879,65.684
    239.471,132.082
    211.281,196.517
    150,230
    88.719,196.517
    60.529,132.082
    87.121,65.684
  " fill="green" />
</svg>

</body>
</html>
```
![8b.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/1060c51d-0582-67f1-0b1a-f20603e37ba2.jpeg)

# 11角形を書くには難しそうなので、svgで正N角形を描画する関数をjsで作って下さい
>JavaScriptを使用して、SVG内に正N角形を描画する関数を作成しました。この関数は、要素ID、頂点数、半径、塗りつぶし色を引数にとります。
```:html
<!DOCTYPE html>
<html>
<body>

<svg id="my-svg" width="300" height="300">
</svg>

<script>
function drawRegularPolygon(elementId, n, radius, fillColor) {
  const svgElement = document.getElementById(elementId);
  let points = '';

  for (let i = 0; i < n; i++) {
    const angle = (2 * Math.PI / n) * i;
    const x = radius * Math.cos(angle) + radius;
    const y = radius * Math.sin(angle) + radius;

    points += `${x},${y} `;
  }

  const polygonElement = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  polygonElement.setAttribute("points", points);
  polygonElement.setAttribute("fill", fillColor);

  svgElement.appendChild(polygonElement);
}

// 関数を使用して正11角形を描画します
drawRegularPolygon("my-svg", 11, 100, "green");
</script>

</body>
</html>
```
>このコードは、緑色の正11角形を描画します。関数 drawRegularPolygon を使用して、任意の正N角形を描画できます。必要に応じて、他の要素ID、頂点数、半径、および塗りつぶし色で関数を呼び出します。

![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563735/6bcd5b03-f1ac-5131-9629-b619c19c5c93.jpeg)

おみごと！

# 余談
もう少し知能が上がればプログラマ要らなくなるかもね。