SF映画「Matrix」の冒頭で流れる文字が降ってくるアニメーションをjavascriptで作ってみた。
CodePenで「Matrix」と検索するといっぱい出てくるので、いくつかのサンプル見ていじってみていい感じのMatrix rainを作った。
cf. 映画「マトリックス」の上から文字が落ちてくるアレをわずか1KB以下のコードで再現
以下のhtmlファイルをブラウザで開くと見れる。
<body style="margin:0">
<canvas id="q"></canvas>
</body>
<script type="text/javascript">
var width = q.width = window.innerWidth; // ブラウザ画面の幅
var height = q.height = window.innerHeight; // ブラウザ画面の高さ
var letters = Array(256).join(1).split('');
// Matrix rainで降らせる文字（日本語を入れてもよい）
var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789@#$%^&*()*&^%";
var draw = function () {
q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
q.getContext('2d').fillRect(0,0,width,height);
q.getContext('2d').fillStyle='#0F0';
letters.map(function(y_pos, index){
text = Math.floor( Math.random() * 10 );
text = matrix[Math.floor(Math.random() * matrix.length)];
x_pos = index * 10;
q.getContext('2d').fillText(text, x_pos, y_pos);
q.getContext('2d').font = "12px 'Monaco'"; // MonacoはMacOS標準搭載のフォントらしい。コメントアウトするとcanvasデフォルトのフォントとなる
letters[index] = (y_pos > 0 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
setInterval(draw, 30); // Matrix rainが降ってくる速さ
</script>
See the Pen matrix_js by Berry Clione (@berry_clione) on CodePen.