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

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

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

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

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

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

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

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

ChatGPT 自動プログラミング実験: 「サイコロ シミュレーター」を作らせてみた!

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

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

ChatGPT 自動プログラミング実験: 「サイコロ シミュレーター」を作らせてみた!

今回のお題: サイコロを振るシミュレーター

今回はサイコロを振るプログラムを作成させてみました。以前に自分で↓のようにつくっているので、これと同じものを作らせたい感じですね。

ChatGPT 初回命令

ChatGPTへの命令

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

ボタンを押したらサイコロを振れるプログラムを作成して下さい。javascriptで作って、サイコロをcanvasで描画し、ブラウザで動く形式で出力して下さい。

コード

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

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サイコロを振る</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="roll-dice">サイコロを振る</button>
<canvas id="dice-canvas" width="200" height="200"></canvas>

<script>
    const canvas = document.getElementById('dice-canvas');
    const ctx = canvas.getContext('2d');
    const button = document.getElementById('roll-dice');

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function drawCircle(x, y, radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
    }

    function drawDiceFace(value) {
        clearCanvas();
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        const dotRadius = 10;
        ctx.fillStyle = 'black';

        if (value === 1 || value === 3 || value === 5) {
            drawCircle(canvas.width / 2, canvas.height / 2, dotRadius);
        }
        if (value > 1) {
            drawCircle(canvas.width / 4, canvas.height / 4, dotRadius);
            drawCircle(3 * canvas.width / 4, 3 * canvas.height / 4, dotRadius);
        }
        if (value > 3) {
            drawCircle(3 * canvas.width / 4, canvas.height / 4, dotRadius);
            drawCircle(canvas.width / 4, 3 * canvas.height / 4, dotRadius);
        }
        if (value === 6) {
            drawCircle(canvas.width / 4, canvas.height / 2, dotRadius);
            drawCircle(3 * canvas.width / 4, canvas.height / 2, dotRadius);
        }
    }

    function rollDice() {
        const value = Math.floor(Math.random() * 6) + 1;
        drawDiceFace(value);
    }

    button.addEventListener('click', rollDice);
</script>
</body>
</html>

生成されたサイコロ

初回からかなり優秀なものができました!これはサイコロというものが色んな人が既に作っているからだと思われます。
自分の作ったものと違って、コロコロ転がる要素がなくてさみしいですが、これはこれでありだと思います!

おまけ:1~10の目に改変してみる

自分の以前のプログラムで↓のように自由にサイコロの目の数を変えられるものがあったので、それを真似させてみました。

ChatGPTへの命令

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

1から6まででなく、1から10まで目のあるサイコロにしてほしいです。

コード

生成されたプログラムが↓です。やっぱり10の目などは既存にないので早々諦め、数字で出力する形になりました。

1から10までの目があるサイコロを実装するには、サイコロの描画方法を変更する必要があります。以下のコードは、1から10までの目があるサイコロを実装したものです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サイコロを振る</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="roll-dice">サイコロを振る</button>
<canvas id="dice-canvas" width="200" height="200"></canvas>

<script>
    let canvas = document.getElementById('dice-canvas');
    const ctx = canvas.getContext('2d');
    const button = document.getElementById('roll-dice');

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function drawText(text, x, y, fontSize) {
        ctx.font = `${fontSize}px Arial`;
        ctx.fillText(text, x, y);
    }

    function drawDiceFace(value) {
        clearCanvas();
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'black';
        drawText(value, canvas.width / 2 - 10, canvas.height / 2 + 10, 30);
    }

    function rollDice() {
        const value = Math.floor(Math.random() * 10) + 1;
        drawDiceFace(value);
    }

    button.addEventListener('click', rollDice);
</script>
</body>
</html>

生成されたサイコロ

数字で表示してるので違和感ありますが、とりあえず完成。やっぱり既存にないものを作らせるのは難しいのでありました。

結論:典型的なパターンを外れると急にプログラムを作れなくなる

今回はサイコロという簡単なプログラムを生成させてみました。やっぱり、かなり典型的な例であるので、サイコロの目までほぼ完ぺきに表現してくれました。

しかし、1~10の目と典型例から外れると途端に例外的な扱いになり、マス目が表現できなくなりました。このように、独自の仕様のプログラムについては、やはり人間がプログラムを書く必要があるのかなと考えています。


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

その他関連カテゴリ




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

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




記事カテゴリ