簡単に素早くクリエイティブコーディング！開発中の「ALGO.JS」を使ってみました

ALGO.JS

12月に行われたDemo Day Tokyoでプレゼンされていた林さんが開発しているALGO.JSを触ってみました。
ALGO.JSはWebGLベースのフレームワークで簡単に軽量に、コードでの表現が実現できるフレームワークを目指しているそうです。ちなみにコードでのビジュアル表現をクリエイティブコーディングっていうらしい。知りませんでした。

僕は表現に関しては実写動画寄りであまりクリエイティブコーディングは触れてこなかったんですが、これを機に今年はちょっと触ってみようかなと思います。アートなものが多い分野ですが、何か物語があるものを作ってみたいですねー。
あ、ちなみにこちらスマホでも問題なく動きます。

ALGO.JSは2016年1月現在も開発中でGitHubに公開もされています。β版の公開は4月ごろの予定だそうで、今から楽しみです！

※クリックするとオブジェクトの色が変わります（タッチには未対応）

WebGLを使ってるけど、2D描画用フレームワーク

現在公開されているシェイプやパスを使って試しに書いてみました。基本的な使い方はhtmlにcanvasを用意してalgo.js本体を読み込むだけで良いようです。

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

<script src="js/algo.js" type="text/javascript"></script>
<script type="text/javascript">
//algo.jsの記述をしていく
</script>

//初期設定
var ws=600;
var hs=300;
var param = {
  id: 'canvas',
  width: ws,
  height: hs,
  backgroundAuto: true
};

//シーン全体の設定。背景色（アルファ込み）やフレームレート、円描画の角数とかも。
var algo = new ALGO( param );
algo.background = 0xeeffff;
algo.framerate = 60;
algo.circleResolution = 80;

// 描画するオブジェクト用の変数
var circle;
var circle2;
var rect;
var polygon;
var path;

// 描画オブジェクトの設定
algo.bind('setup', function(){
  circle = new ALGO.Circle( 300, 150, 50 );
  circle.color = 0x000000;
  algo.add( circle );

  circle2 = new ALGO.Circle( 100, 150, 10 );
  circle2.color = 0x0011aa;
  circle2.dx = Math.random() * 8;
  circle2.dy = Math.random() * 8;
  algo.add( circle2 );

  rect = new ALGO.Rectangle( 500, 50, 100, 30);
  rect.color = 0x444444;
  algo.add( rect );

  polygon = new ALGO.Polygon( 200, 200, 7, 20);
  polygon.color = 0x884444;
  algo.add( polygon );

  path = new ALGO.Path();
  path.lineTo(0, 200);
  path.lineTo(400, 100);
  path.lineTo(800, 200);
  path.lineColor = 0xccaa00;
  path.lineWidth = 2;
  path.fill=false;
  path.line = true;
  algo.add( path );

  particles = new ALGO.Particle(10, 10);
  particles.color = 0x884444;
  algo.add( particles );
});

var flg=0;
var flg2=0;
var dx=1;
var dy=1;
var rv=1;
// frame　毎フレーム実行。
algo.bind('frame', function(){

  //X方向反射移動
  if (circle.x > ws) {
    if (flg!=1) {
        dx=-1;      
      flg=1;
    };
  }
  if (circle.x < 0) {
    if (flg!=2) {
        dx=1;      
      flg=2;
    };
  }
  circle.x += dx*2.1;

  //Y方向反射移動　＆　回転
  if (rect.y > hs) {
    if (flg2!=1) {
        dy=-1;
        rv=-1;
      flg2=1;
    };
  }
  if (rect.y < 0) {
    if (flg2!=2) {
        dy=1;
        rv=1;      
      flg2=2;
    };
  }
  rect.y += dy*3.1;
  rect.rotate+=rv*5;

  //連動する回転
  polygon.rotate+=dy*5;

  //画面外に出ても再利用
  circle2.x += circle2.dx;
  circle2.y += circle2.dy;
  if( circle2.x > ws ){
    circle2.x = 0;
  } else if( circle2.x < 0 ){
    circle2.x = ws;
  }
  if( circle2.y > hs ){
    circle2.y = 0;
  } else if( circle2.y < 0 ){
    circle2.y = hs;
  }
});

algo.bind('mousedown', function(){
  circle.color = 0x009999;
  circle2.color = 0xaaaa22;
  algo.add( circle );
  algo.add( circle2 );
});

algo.bind('mouseup', function(){
  circle.color = 0x000000;
  circle2.color = 0x000000;
  algo.add( circle );
  algo.add( circle2 );
});

ものすごく簡単にプリミティブな図形を描けます。少し前にWebGLを勉強して四苦八苦した身からすると感動ものの簡単さです。シェーダとかクォータニオンとかややこしいこと一切なし…！
画像の読み込みも簡単ですごく嬉しいです。

wonderflみたいな作品を公開するプラットフォームも作る予定があるそうなので、何か思いついたらちょこちょこ作っていこうと思います。

明解WebGL　iOS/Androidも対応した3D CGプログラミングのWeb標準
- Amazonで見る

WebGLによる「流れ」と「波」のシミュレーション (I・O BOOKS)
- Amazonで見る