ChatGPTで、マトリックスに出てくる縦スクロール・アニメを作るjsコードを書いてもらった

JavaScript

ChatGPTで、マトリックスに出てくる縦スクロール・アニメを作るjsコードを書いてもらいました。

先に結果から。下記のように成功しました。表示する要素に指定する文字は、0-9,A-Zだけだと変化が乏しいので、記号や空白も混ぜて調整してます。記号とか漢字も混ぜると、より、それっぽくなるかも。

 

指示文(プロンプト):

映画マトリックスに出てくる、文字が上から下に縦スクロールしていくアニメーションを表示するjsプログラムを書いてください。HTMLの <canvas> 要素を使用してください。

 

回答:
  • 以下は、JavaScriptを使用して、マトリックスのように上から下に縦に流れる文字列アニメーションを表示する方法の例です。
  • このスクリプトは、ランダムに選択した文字列の配列から文字を選択し、指定された文字列の長さのマトリックスを初期化します。
  • それから、一定の間隔で、各行に対して文字列を表示し、配列の先頭に新しいランダムな文字を追加し、配列の最後から文字を削除して、アニメーションを作成します。
  • HTMLの canvas 要素を使用して、同じアニメーションを作成します。文字列を表示するために fillText() を使用し、キャンバスの背景を透過させるために fillRect() を使用しています。
  • また、CSSで canvas 要素をスタイル設定しています。

<!DOCTYPE html>
<html>
<head>
	<title>Matrix Animation</title>
	<style>
		body {
			background-color: black;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// canvas要素を取得
		var canvas = document.getElementById("canvas");

		// canvasの大きさを設定
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		// canvasの描画コンテキストを取得
		var ctx = canvas.getContext("2d");

		// 文字列の配列
		var chars = [" "," "," "," "," "," "," "," "," "," "," "," "," ",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".","・","・","・","・","・","+","+","*","."*".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".",".","0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

		// 文字列をランダムに選択
		function randomChar() {
			return chars[Math.floor(Math.random() * chars.length)];
		}

		// 文字列の長さ
		var length = 100;

		// 初期化
		var matrix = [];
		for (var i = 0; i < length; i++) {
			matrix[i] = [];
			for (var j = 0; j < window.innerHeight / 20; j++) {
				matrix[i][j] = randomChar();
			}
		}

		// 文字列を表示
		function draw() {
			ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

			ctx.fillStyle = "#0F0"; // 文字の色
			ctx.font = "15px Courier"; // フォント
			for (var i = 0; i < length; i++) {
				var row = matrix[i];
				for (var j = 0; j < row.length; j++) {
					var char = row[j];
					ctx.fillText(char, i * 20, j * 20);
				}
				matrix[i].unshift(randomChar());
				matrix[i].pop();
			}
		}

		// 一定間隔でアニメーションを表示
		setInterval(draw, 100);
	</script>
</body>
</html>