KonifarPod

Processing.js 触ってカラーボールが暴れ回るみたいな簡単サンプル作ってみた

   

Pocket

Processing.js というjavascriptのビジュアルライブラリを触ってみたくなってちょっといじってみました。

きっかけは、@fladdictさんのJSでアメーバのシミュレーション作ってみたを見て、うおぉぉ!ってなったことです。Processing.js自体は2008年くらいから話題になっていたわけですが、下記のツイートを見て刺激を受けてしまいました。

3時間くらいで実装したらしいのですが、全然遅くなったわーと言っています。僕ももっと普段から業務以外のコードを書いたりしてみなきゃダメだなあと感じたので、第一弾として1〜2時間くらいProcessing.jsをいじってみた次第です。

 

Processingjs

Konifar’s First Processing

作ったのは、『50個の円をランダムな色で出現させ、乱方向に動いていく』というまさにサンプルという感じのものです。カラーボールが暴れ回っているみたいな感じです。ブラウザの幅によって円の大きさが微妙に変わるので、ブラウザの幅をびよんびよんさせながら見てみるとちょっと面白い、かもしれません。クリックしたらリフレッシュします。

(追記)このブログ書いた後でiPhoneで見てみたら、なんだか節足動物みたいですげーきもかったです・・・

使ってみた感想は、思ったよりずっと簡単という感じ。重力加速度とか色々実装したらかなり楽しいのではないかと思いました。日本語でも詳しい説明はたくさん載ってます。僕はこちらの記事を参考にキャッチアップしました。

<!doctype html>
<html lang="ja">
<head>
    <title>Konifar's First Processing</title>
    <style type="text/css">
        body {margin: 0;}
        canvas {margin: 0;}
        h1 {margin-left: 10px;}
    </style>
    <script type="text/javascript" src="processing.js"></script>
    <script type="text/javascript" src="excanvas.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            // Processing.jsの初期処理
            var canvas = document.getElementsByTagName('canvas')[0];
            var codeElm = document.getElementById('processing-code');
            var code = codeElm.textContent || codeElm.innerText;
            Processing(canvas, code);
        };
    </script>
    <script id="processing-code" type="application/processing">
        Particle particles = new Particle[50];

        // 最初に行われる処理
        void setup() {
          size(window.innerWidth, window.innerHeight);
          for (int i = 0; i < particles.length; i ++)
          particles[i] = new Particle();
        }

        //描画処理
        void draw() {
        for (int i = 0; i < particles.length; i ++)
          particles[i].update();
        }

        // 一本一本のクラス
        class Particle {
          float x, y, xvel, yvel, r, g, b, a;

          Particle () {
            x = random(width);
            y = random(height);
            r = random(255);
            g = random(255);
            b = random(255);
            xvel = random(1) * 10 - 5;
            yvel = random(1) * 10 - 5;
          }

          // 表示の更新処理
          void update() {
            float px = x, py = y;
            x += xvel, y += yvel;
            if (x < 0 || width < x) xvel *= -1;
            if (y < 0 || height < y) yvel *= -1;
            fill(r, g, b, 30);
            ellipse(px, py, window.innerWidth/30, window.innerWidth/30);
          }
        }

        // クリックしたらリフレッシュ
        void mousePressed() {
          setup();
        }
    </script>
</head>
<body>
<h1>Konifar's First Processing</h1>
<canvas></canvas>
</body>
</html>

ソースも70行くらいです。そのうちJavascript が40行くらいなので、かなりお手軽にお絵描きできちゃう印象ですね。興味があれば1〜2時間くらいいじってみてはどうでしょうか。なんとなく勘所はわかると思います。クラスやコンストラクタ、メソッドなどの定義はJavaっぽく書けるので、Java書いたことある人には取っ付きやすいはずです。

次はドラえもん書いたりしてみたいなあ。マウスオーバーした時にぬるぬる動くみたいな無駄なインタラクションいっぱいなやつがいいですね。凝りだしたらめっちゃ楽しそうなのでチャレンジしてみようと思います!

 

Pocket

 - Develop