JavaScriptでMatrix風の「text rain」を描画するプログラムを解説

2020年4月6日システムJavaScript,プログラムコード,プログラム入門

【サンプルコード】JavaScriptでMatrix風の「text rain」を描画
【サンプルコード】JavaScriptでMatrix風の「text rain」を描画

どうも、UT(@ut_1029)です。

JavaScriptで映画マトリックス風のtext rainをこちら「javascriptでMatrix text rain作ってみた」の記事を参考に実装しました。

HTML5canvasタグJavaScriptを利用してマトリックス風のtext rainを描画しています。

JavaScriptでプログラミング〜Matrix風の「text rain」〜

JavaScriptでMatrix風の"text rain"を描画するサンプルコード

JavaScriptでMatrix風の"text rain"を描画するサンプルコード
JavaScriptでMatrix風の"text rain"を描画するサンプルコード

JavaScriptHTML5canvasタグでマトリックス風のtext rainを描画するプログラミングコードを紹介します。

<html>
<head>
    <title>textrain</title>
    <meta charset="UTF-8">
</head>
<body style="margin:0">
<canvas id="textrain"></canvas>
</body>
<script type="text/javascript">
    var textrain = document.getElementById('textrain');
    if (!textrain) {
        alert('canvas非対応ブラウザです。');
    }
    else {
        var width  = textrain.width  = window.innerWidth;
        var height = textrain.height = window.innerHeight;

        var records = Array(256);
        for (var i = 0; i<records.length; i++) {
            records[i] = 1;
        }

        var texts  = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            texts += "abcdefghijklmnopqrstuvwxyz";
            texts += "123456789";
            texts += "@#$%^&*()*&^%";

        var draw = function () {
            textrain.getContext('2d').fillStyle = 'rgba(0, 0, 0, 0.05)';
            textrain.getContext('2d').fillRect(0, 0, width, height);

            textrain.getContext('2d').fillStyle = '#0F0';
            textrain.getContext('2d').font = "12px 'Monaco'";

            records.map(function(y_pos, index){
                var text = texts[Math.floor(Math.random() * texts.length)];

                x_pos = index * 10;

                textrain.getContext('2d').fillText(text, x_pos, y_pos);

                records[index] = (y_pos > 0 + Math.random() * 1e4) ? 0 : y_pos + 10;
                console.log(y_pos, index, text);
            });
        };
        setInterval(draw, 300);
    }

</script>
</html>

JavaScriptでMatrix風の"text rain"を描画するサンプルコードを解説

JavaScriptでMatrix風の"text rain“を描画するサンプルコードを解説します。

HTML部分

まずHTML部分を解説します。っといってもcanvasタグを用意するだけですが(汗)

canvasタグを用意

canvasタグを用意します。ここへJavaScripttext rainを描画するようにします。

<canvas id="textrain"></canvas>

JavaScript部分

次にJavaScript部分の解説をします。

canvasタグ対応ブラウザか判定

HTML5canvasタグ対応のブラウザか判定を行います。昨今のブラウザだと問題ないと思いますが、一応のチェックです。

var textrain = document.getElementById('textrain');
if (!textrain) {
    alert('canvas非対応ブラウザです。');
}

ブラウザのウィンドウ表示領域を取得

ブラウザの表示幅いっぱいに描画するので、ウィンドウ表示領域値を取得しておきます。

var width  = textrain.width  = window.innerWidth;
var height = textrain.height = window.innerHeight;

横一列に描画するテキストのY座標を配列へ格納

text rainを横一列に描画するので、出力位置のY座標を配列で保持するようにします。ここではY座標を1で初期化して定義します。

var records = Array(256);
for (var i = 0; i<records.length; i++) {
    records[i] = 1;
}

text rainへ流す文字列達を定義

text rainで流す文字列を定義します。

var texts  = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    texts += "abcdefghijklmnopqrstuvwxyz";
    texts += "123456789";
    texts += "@#$%^&*()*&^%";

text rainを描画する関数を定義

text raincanvasタグへ描画する関数を定義します。

var draw = function () {
    // ~
};

canvasタグへ四角形を描画

canvasタグへ半透明の黒い四角形を描画していきます。なぜ四角形を描画するのかというと、時間経過と共に描画したテキストが消えていく演出を行うためです。

つまり半透明の黒い四角形を重ねることで、テキストが消えていくように表現します。

textrain.getContext('2d').fillStyle = 'rgba(0, 0, 0, 0.05)';
textrain.getContext('2d').fillRect(0, 0, width, height);
  • fillStyle:背景スタイル
    • rgba(赤、緑、青、透明度)
  • fillRect:四角形を描画
    • 第1引数:左上のX座標
    • 第2引数:左上のY座標
    • 第3引数:幅
    • 第4引数:高さ

canvasタグへ描画するテキストのスタイル

canvasタグへテキストを描画する際のスタイルを定義します。

textrain.getContext('2d').fillStyle = '#0F0';
textrain.getContext('2d').font = "12px 'Monaco'";

横一列並べて文字列を描画していく

横一列にテキストを描画する処理を定義します。

records.map(function(y_pos, index){
    // ~
});
  • y_pos
    • 横一列に描画するテキストのY座標
  • index
    • 横一列に描画するテキストのインデックス

canvasタグへ描画するテキストをランダムに取得

JavaScriptのランダム関数を使用して、描画するテキストを1文字だけランダムに取得します。

var text = texts[Math.floor(Math.random() * texts.length)];

描画するX座標

canvasタグへ描画するテキストのX座標を決めます。10ずつ掛け算して描画するテキストが横一列に描画されるようにしています。

x_pos = index * 10;

canvasタグへテキストを描画

canvasタグへテキストを描画します。ここでランダムに取得した1文字を描画します。

textrain.getContext('2d').fillText(text, x_pos, y_pos);
  • fillText: テキストを描画
    • 第1引数:テキスト
    • 第2引数:X座標
    • 第3引数:Y座標

次に描画するためにY座標を更新

次にテキストを描画する際のY座標を更新します。ここでは下方向へテキストが描画されるように10ずつ加算するようにしています。

records[index] = (y_pos > 0 + Math.random() * 1e4) ? 0 : y_pos + 10;

指定ミリ秒間隔でテキスト描画を実行

テキスト描画を行うスピードをミリ秒で指定します。数字が大きくするとテキストが描画される速度が遅くなります。

setInterval(draw, 300);

おわり

今回はHTML5canvasタグJavaScripttext rainを描画するサンプルコードを紹介しました。

一昔前までは、AdobeFlashでこういった描画処理を行っていましたが、(かなり今更なことですが)現在はHTML5canvasタグJavaScriptで図形などを描画するプログラミングが主流となっています。

HTML5canvasタグを扱うことに慣れておくと実装できるプログラムの幅が増えるので、ぜひ扱えるようになりたい。。。

\今なら/Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です!

  • 5,000円以上:0.5%
  • 20,000円以上:1%
  • 40,000円以上:1.5%
  • 90,000円以上:2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク:Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク:Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000~500ポイント」が当たるチャンス!なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク:Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年4月6日システムJavaScript,プログラムコード,プログラム入門

Posted by UT