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( )に記述がなくても動きます。
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/ にあります。
var start = function(){
var ball = make();
};
var start = function(){
var ball = make(v(50,50));
make(v(150,150));
};
var start = function(){
var ball = make(v(50,50),v(1,0));
};
var start = function(){
var ball = make(v(50,50),v(0,0),v(0.03,0));
};
var obj;
var start = function(){
obj = make();
};
var update = function(){
obj.pos.x += 1;
};
var start = function(){
var obj = make(v(0,0),v(1,2));
obj.edge = true;
};
var start = function(){
var ball = make(v(10,50),v(0,0),v(0.05,0));
ball.pong = true;
}
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)いただければと思います〜