Help us understand the problem. What is going on with this article?

javascriptでMatrix text rain作ってみた

More than 1 year has passed since last update.

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.

berry-clione
python / shell script / R / Mac / Ubuntu / data scientist / credit risk analyst / quants / macroeconometrics
http://y-hagurin.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした