様々な学問/勉強課目をシミュレーションで解説!シミュレーター/ツール/ゲームで、いろんな学問を楽しく分かりやすく解説するサイトです!思考の改善や、効率化の話題も!
⇒ 本ブログの詳細/連絡先はコチラ!
学問系TOP AI/ChatGPT 数学 物理 統計学 コンピューター 経済学 Webツール
  1. ホーム
  2. 〇学問シミュレーター/改善・効率化
  3. AI/ChatGPT
  4. ChatGPTプログラム生成実験
  5. ChatGPT 自動プログラミング実験: 「ライフゲーム」を作らせてみた!
■注目記事一覧

高校数学 教科書用シミュレーターの制作に携わりました!!

余命(〇〇年後に死亡している確率)/各年齢での死亡確率 判定

コンピューターの半理基礎:半加算器の原理をシミュレーターで理解しよう!

サイコロ シミュレーターで解説!当たり回数が必ず一定に収束するわけではない!

コンピューターの全理基礎:半加算器の原理をシミュレーターで理解しよう!

なぜ賭け/投資(株式/FX)市場はほとんどの人が勝てないのか?シミュレーションで解説!

本サイトの「サイコロ シミュレーター」が熊本の特別教育テレビ授業で使われました!
 
全テーマ共通記事一覧

ChatGPT 自動プログラミング実験: 「ライフゲーム」を作らせてみた!

自分が今まで理系の学問系中心に、内容を深く理解するためのシミュレータープログラムを作成してきました。このシミュレーター、簡単なものなら結構短いプログラムで書けてしまうこともあります。

「それなら、ChatGPTに全てプログラムを書かせるのも有り?」とふと思いました。ということで、様々なブラウザで動くようなシミュレーターやゲームをChatGPTに作成させる実験をしていきたいと思っています!

ChatGPT 自動プログラミング実験: 「ライフゲーム」を作らせてみた!

今回のお題: ライフゲームを作成させる

これは↓のページでも解説していますが、簡単なルールに従って動く生物のシミュレーターですね。

簡単にいうと↓のルールで消滅と再生を繰り返すものです

対象マスが黒(生存)の場合
 周囲の黒が2個か3個 ⇒ 生存したまま
 その他 ⇒ 消滅

対象マスが白(死滅)の場合
 周囲の黒が3個 ⇒ 復活
 その他 ⇒ 死んだまま

ChatGPT 初回命令

ChatGPTへの命令

↓で簡易的に命令してみました

ライフゲームのプログラムを作成して下さい。javascriptで作って、canvasで描画し、ブラウザで動く形式で出力して下さい。

コード

生成されたプログラムが↓です。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conway's Game of Life</title>
  <style>
    canvas {
      display: block;
      margin: auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="800"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const resolution = 10;
    canvas.width = 800;
    canvas.height = 800;

    const cols = canvas.width / resolution;
    const rows = canvas.height / resolution;

    function buildGrid() {
      return new Array(cols).fill(null)
        .map(() => new Array(rows).fill(null)
          .map(() => Math.floor(Math.random() * 2)));
    }

    let grid = buildGrid();

    function update() {
      grid = nextGen(grid);
      draw(grid);
      requestAnimationFrame(update);
    }

    function nextGen(grid) {
      const nextGen = grid.map(arr => [...arr]);

      for (let col = 0; col < grid.length; col++) {
        for (let row = 0; row < grid[col].length; row++) {
          const cell = grid[col][row];
          let liveNeighbors = 0;

          for (let i = -1; i < 2; i++) {
            for (let j = -1; j < 2; j++) {
              if (i === 0 && j === 0) continue;
              const x_cell = col + i;
              const y_cell = row + j;

              if (x_cell >= 0 && y_cell >= 0 && x_cell < cols && y_cell < rows) {
                liveNeighbors += grid[x_cell][y_cell];
              }
            }
          }

          if (cell === 1 && (liveNeighbors < 2 || liveNeighbors > 3)) {
            nextGen[col][row] = 0;
          } else if (cell === 0 && liveNeighbors === 3) {
            nextGen[col][row] = 1;
          }
        }
      }
      
      return nextGen;
    }

    function draw(grid) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let col = 0; col < grid.length; col++) {
        for (let row = 0; row < grid[col].length; row++) {
          const cell = grid[col][row];

          ctx.beginPath();
          ctx.rect(col * resolution, row * resolution, resolution, resolution);
          ctx.fillStyle = cell ? 'black' : 'white';
          ctx.fill();
          ctx.stroke();
        }
      }
    }

    update();
  </script>
</body>
</html>

生成された実際のライフゲーム

完璧ですね。申し分ないです(重くなるのでコチラはリンクページにだけのせることに)


https://retu27.com/wp-content/themes/retu27theme/chatgpt/lifegame/test1/index.html

改変1:リスタートボタンを付ける

このままだとリスタートが出来ないので、そのボタンだけ作ってもらう事にしました

ChatGPTへの命令

リスタートボタンを付けて下さい

コード

↓の部分を追加。

index.html
    function restart() {
        grid = buildGrid();
    }

    const restartButton = document.getElementById('restartButton');
    restartButton.addEventListener('click', restart);

生成された実際の時計

完全完璧ですね。ここから何かいじるとなると大変そうですが、これだけであれば完成品ですね。

結論:典型的なプログラムでは威力を発揮

やっぱりもはや型になっているようなプログラムであれば、瞬時に生成できそうです。


⇒「ChatGPTプログラム生成実験」カテゴリ記事一覧

その他関連カテゴリ




お気軽にコメントお願いします!

Your email address will not be published. Required fields are marked *




記事カテゴリ