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

**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](https://qiita-image-store.s3.amazonaws.com/0/57193/f7377830-a736-0a6e-470c-792338eafe17.gif)

```js
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](https://qiita-image-store.s3.amazonaws.com/0/57193/bfef7589-e2df-a8fa-ac2b-a82b5d8b023a.gif)

```js
var start = function(){
  var ball = make();
};
```
---

●の生成（位置付き）
![142.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/766e4946-4e8e-a6a1-85ec-aab43b3bf67b.gif)

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

●の生成（速度付き）
![143.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/4922d82b-03e2-96b8-f67d-6da5fcaaef64.gif)

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

●の生成（加速度付き）
![144.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/26877bb2-da63-b56b-47fb-7616c05b2706.gif)

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


●の生成（updateで制御）
![145.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/e658ca7d-34fe-e868-276f-0d4ce12ecefe.gif)

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

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

端で折り返す
![137.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/53c60f3f-9cbb-dbe7-994a-ae76fc764884.gif)

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

バウンド
![147.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/9fbbe73a-f308-dad4-182e-9d58593c6da1.gif)

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

網み目
![134.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/7144eb07-2221-7b5e-2ef8-551a553a0cd4.gif)

```js
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: