LoginSignup
3

More than 5 years have passed since last update.

intuition.js - Canvasのビジュアルプログラミングフレームワークを作りはじめてみました

Last updated at Posted at 2015-05-29

7/16追記(思いつき)
今後の課題
・デザインパターンとかgulpとかを取り入れてライブラリっぽくする(学習中)
・webglに対応して3Dの描画を取り入れる(学習中)
・Arduinoとなんとかつながりたい


intuition.jsというHTML5 / Canvasのビジュアルプログラミングフレームワークを作りました。イメージとしてはp5.jsやpixi.js、enchant.js、Cocos2d-jsのようにCanvasの描画を担うフレームワークです。(そんなにボリュームはありませんし、大層なものではありませんが・・)
まだ作りはじめなので、遊んでみてフィードバックが欲しいです〜。

詳細 : http://hp0me.github.io/intuitionjs/

こんな雰囲気

start( )とupdate( )で枠を作り、makeで●オブジェクトを生成します。
オブジェクトには速度・加速度があります。pongやedgeなどの要素もあります。ポイントは、update( )に記述がなくても動きます。
1483353.gif

var start = function(){

  var ball = make(v(0,0),v(2,0),v(0,0.044)); // 位置・速度・加速度
  ball.pong = true; // 跳ね返る

  var obj = make(v(330,0),v(-1,0.3)); // 位置・速度
  obj.edge = true; // 反対側の端から折り返す

};

var update = function(){
  //なし
};

なんで作ったの?

・Canvasで遊ぶ時のルーティンワークを削りたい
・既存のフレームワーク以上に、(遊び用途に限定すれば)もっと直感的にできるはずと思った
・p5.jsは面白い。面白いけど、「Nature of Code」や「実例で学ぶゲームAIプログラミング」にあるような速度、加速度や物理法則、AIの要素が最初から入っていて特化したかった。
・法則を記述さえすれば、update( )で毎回調節せずとも動くオブジェクトがあってもいいと思った。
・下手なりにOSSを作ることで勉強してみたかった。自分で何か作ってみたい。てなわけで、軽い気持ちではじめてみました。

GitHub

詳細(GitHub Pages) : http://hp0me.github.io/intuitionjs/
レポジトリ : https://github.com/hp0me/intuition.js

概要

・HTML5/Canvas上で動作するビジュアルプログラミングフレームワーク
・独特なコーディングフローでCanvasの描画ルーティンワークをカット
・プレイグラウンド用途(勉強、試し打ち、練習...etc)に特化
・すべてのThing(基本オブジェクト)には位置・速度・加速度がある。
・位置、速度、加速度はすべてベクトル(Vec2)で表現する

ShowCase

もっと派手なデモは http://hp0me.github.io/intuitionjs/ にあります。

●の生成(ナチュラル)
141.gif

var start = function(){
  var ball = make();
};

●の生成(位置付き)
142.gif

var start = function(){
  var ball = make(v(50,50));
  make(v(150,150));
};

●の生成(速度付き)
143.gif

var start = function(){
  var ball = make(v(50,50),v(1,0));
};

●の生成(加速度付き)
144.gif

var start = function(){
  var ball = make(v(50,50),v(0,0),v(0.03,0));
};

●の生成(updateで制御)
145.gif

var obj;
var start = function(){
  obj = make();
};

var update = function(){
  obj.pos.x += 1;
};

端で折り返す
137.gif

var start = function(){
  var obj = make(v(0,0),v(1,2));
  obj.edge = true;
};

バウンド
147.gif

var start = function(){
  var ball = make(v(10,50),v(0,0),v(0.05,0));
  ball.pong = true;
}

網み目
134.gif

var start = function(){
  var y = 0;
  var x = 0;

  for(var i=0;i<100;i++){
    if(i % 5 == 0){
      y++;
      x = 0;
    }
    x++;

    var obj = make(v(x * 98 + y % 2 * 50, y * 30),v(1,1.5));

  obj.pong = true;
  }
};

var update = function(){
  //なし
};

アドバイスお待ちしております

まだ分からないことだらけなので、アドバイスいただけると非常に嬉しいです。

・OSSのファイル構成になってない
まず作ってみて思ったのは、intuitin.jsはメジャーなOSSにあるような「package.json」とか「srcフォルダ」みたいなファイル構成がないことです。

・関数名・変数名
メインの関数名はmake( )です。本当はcreate( )とかがいいのでしょうけれど、なんだか面白くない気がして・・ あとはv( )という関数があります。短すぎでしょうか?

・グローバル汚染の解消(できるだけ)
プレイグラウンド用途なのでいいだろうと、たかをくくっていたわけですが、全体をうまくクローズできれば一番いいです。

・まだ追加したい機能もある
くわしくは↓にのせました
http://hp0me.github.io/intuitionjs/

ちょこっと参画してみたい、アドバイスしてみたい方は、プルリクなり連絡(hp0isme@gmail.com)いただければと思います〜 :sob:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3