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

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

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

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

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

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

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

余命(〇〇年後に死亡している確率)/各年齢での死亡確率 判定
 
スポンサーリンク
全テーマ共通記事一覧

ChatGPT 自動プログラミング実験: 「街並み風景のアニメーション」を作らせてみた!む、難しい、、

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

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

ChatGPT 自動プログラミング実験: 「街並み風景のアニメーション」を作らせてみた!む、難しい、、

今回のお題: 街並み風景のアニメーション

今回はゲームなど複雑なものでなく、風景やアニメーションをプログラムを使ってどれだけ表現できるかを実験してみましたー!

ChatGPT 初回命令

ChatGPTへの命令

まずは↓の命令で風景を描画させてみました。

街並みをプログラミングで描いて下さい。javascriptで作って、ブラウザで動く形式で出力して下さい。

コード

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

index.html
<!DOCTYPE html>
<html>
<head>
	<title>街並み</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>

	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

		// 道路を描画
		ctx.fillStyle = "#808080";
		ctx.fillRect(0, 0, canvas.width, canvas.height / 2);

		// 建物を描画
		const buildingHeight = canvas.height / 2;
		const buildingWidth = 50;
		const buildingSpacing = 20;
		const buildingCount = Math.floor(canvas.width / (buildingWidth + buildingSpacing));
		const buildingColors = ["#b30000", "#ff6666", "#ffff66", "#66cc66", "#6666ff"];

		for (let i = 0; i < buildingCount; i++) {
			const buildingHeightRatio = Math.random();
			const buildingColor = buildingColors[Math.floor(Math.random() * buildingColors.length)];
			ctx.fillStyle = buildingColor;
			ctx.fillRect(
				(i * (buildingWidth + buildingSpacing)) + buildingSpacing,
				canvas.height / 2 - (buildingHeightRatio * buildingHeight),
				buildingWidth,
				buildingHeightRatio * buildingHeight
			);
		}

		// 天井を描画
		ctx.fillStyle = "#d9d9d9";
		ctx.fillRect(0, 0, canvas.width, buildingHeight / 10);
	</script>
</body>
</html>

生成された風景

生成されたのは↓のような風景です。ビル街と考えれば、まあまあなんではないでしょうか。ちなみに色もビルの高さもランダムで生成してるみたいです(表示するたびに変わる)

改変1: 地面も描画して下さい。人間も描画して下さい。

改変命令

ちょっとさすがに殺風景なので、人や地面も描画させるようにします。

地面も描画して下さい。人間も描画して下さい。

生成コード

↓のような部分が追加され、人物の描画が追加されました。

改変部分コード
		// 人間を描画
		const personCount = 5;
		const personMaxSize = 50;
		const personMinSize = 20;
		const personColors = ["#8B4513", "#A0522D", "#CD853F", "#D2691E", "#DEB887"];
		const persons = [];

		for (let i = 0; i < personCount; i++) {
			const personSize = Math.floor(Math.random() * (personMaxSize - personMinSize)) + personMinSize;
			const personX = Math.floor(Math.random() * (canvas.width - personSize));
			const personY = canvas.height / 2 - personSize;
			const personColor = personColors[Math.floor(Math.random() * personColors.length)];
			const personSpeed = Math.random() * 4 + 1;
			persons.push({ x: personX, y: personY, size: personSize, color: personColor, speed: personSpeed });
		}

生成された風景

うーん、、人間は丸で表現されていて、何がなんだかわからないですね、、

改変2: 人が動くように修正

改変命令

丸では人に見えないので、人を動かしてアニメーション化する指示をしました。あと地面が太すぎるので、その修正も依頼、、、

地面の幅を狭くしてください。地面は茶色にしてください。人はそれぞれ横方向に動くようにして下さい。

生成コード

↓のような感じになりました。人間表示部分がアニメーション化されてます

改変部分コード
		// 人間を描画
		const personCount = 5;
		const personMaxSize = 50;
		const personMinSize = 20;
		const personColors = ["#8B4513", "#A0522D", "#CD853F", "#D2691E", "#DEB887"];
		const persons = [];

		for (let i = 0; i < personCount; i++) {
			const personSize = Math.floor(Math.random() * (personMaxSize - personMinSize)) + personMinSize;
			const personX = Math.floor(Math.random() * (canvas.width - personSize));
			const personY = canvas.height / 2 - personSize;
			const personColor = personColors[Math.floor(Math.random() * personColors.length)];
			const personSpeed = Math.random() * 4 + 1;
			persons.push({ x: personX, y: personY, size: personSize, color: personColor, speed: personSpeed });
		}

生成されたシミュレーター

うーん、人物が移動するとこはいいけど、「風景をランダムで生成する」って規則が邪魔になって、毎回風景が変わってますね。これはひどい、、
あと地面を狭くしてという命令があまり伝わってなさそう。

改変3: ビルを安定化するように指示&夕日を付け加えるように依頼

とにかくビルを安定化させたいので指示&夕日も付け加えて見栄えをよくしたいので、それも依頼してみました。

ChatGPTへの命令

ビルが毎回ランダム描画されてるので固定してください。地面の縦幅が長すぎなので狭くしてください。夕日が沈むところも描画して下さい。

生成コード

変更箇所抜粋。

改変部分
        // 太陽を描画
        const time = new Date().getHours();
        const sunGradient = ctx.createRadialGradient(sunX, sunY, sunRadius / 3, sunX, sunY, sunRadius);

生成されたゲーム

なぜかまだビルが安定化しないですね(色は灰色固定になりましたが)ChatGPTでのプログラムは、このようになかなか伝わりにくい要望がでてきたりします。。難しいですね。

あと夕日の表現がおかしいですね。透過をうまく使えてなくておかしくなっている、、、ちょっとここは大変そうなのでここで終了としました。

結論:絵的な表現は本当に伝えにくい

ChatGPTを用いて、実験的に風景を描いてみましたが、少し残念な結果におわりました。そもそもChatGPTに美的センスはそなわってないはずなので、こういったものは特に難しいかもしれません。

透過して違和感ないとかも、人間の視覚からくるセンスによるところが大きいので。その視覚がないChatGPTでは難しいところがありそうですね><


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

その他関連カテゴリ




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

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




記事カテゴリ