intuition.js
HTML5 / Canvasのビジュアルプログラミングフレームワーク
独特なコーディングフローで直感ビジュアライズ
速度・加速度などをデフォルトで採用 → Update( )の記述が極度に少ない
↓Canvasで動作中
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(){
//なし
};
.
About
・HTML5/Canvas上で動作するビジュアルプログラミングフレームワーク
・独特なコーディングフローでCanvasの描画ルーティンワークをカット
・プレイグラウンド用途（勉強、試し打ち、練習...etc）に特化
・すべてのThing（基本オブジェクト）には位置・速度・加速度がある。
・位置、速度、加速度はすべてベクトル（Vec2）で表現する
■ Intutionフロー
・intuition() でお手軽オブジェクト生成・描画（引数なしでもサクっと(0,0)に●登場）
・生成されたオブジェクトのすべては_thingsという変数に自動的に格納
・毎フレームそれらのオブジェクトが位置・速度・加速度に応じて勝手に動く
・オブジェクトはあまりに端にいったら（画面の見えないところから1000）自動的に消える
■ カスタマイズ
・intuition(位置,速度,加速度)でそれぞれ位置・速度・加速度付きのオブジェクト生成
・intuition(位置,速度)でそれぞれ位置・速度付きのオブジェクト生成
・intuition(位置)で位置のみ付いたオブジェクト生成
・画像がなくてもデフォルトの●が勝手にセット。ただし、obj.setImage("hoge.png")のようにセットもできる。
・obj.pos.x , obj.vel.x , obj.acc.xといった具合にそれぞれのプロパティにアクセス可能
・obj.scale.xといったようにすべてのThingにはVec2のサイズがあり、いじれる。
・obj.edgeをtrueにすれば端に行った時に自動で反対側かが出てくる。
・obj.pongをtrueにすれば端に行った時に自動で跳ね返る。
.
Getting started
ファイルはindex.htmlとituition.jsとplayground.js。playground.js内にコードを書いていきましょう。start( )とupdate( )が基本です。詳しくはShowcaseをみて何となく掴みましょう。(todo)
.
Showcase
●の生成（ナチュラル）
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));
};
●の生成（updateで制御）
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 sprite = make(v(350,0));
sprite.setImage("circle.png");
};
var update = function(){
//なし
};
サイン波
var obj;
var degree = 0;
var rad = 0;
var start = function(){
obj = make();
obj.edge = true;
};
var update = function(){
obj.pos.x += 1;
degree += 1;
rad = degree * Math.PI / 180;
obj.pos.y = Math.sin(rad) * 80 + 100;
};
円軌道
var obj;
var degree = 0;
var rad = 0;
var center = v(450,100);
var r = 80;
var start = function(){
obj = make();
obj.edge = true;
};
var update = function(){
degree += 1;
rad = degree * Math.PI / 180;
obj.pos.x = Math.cos(rad) * r + center.x;
obj.pos.y = Math.sin(rad) * r + center.y;
};
粒子のようなバウンドオブジェクト1000個
var start = function(){
for(var i=0;i<1000;i++){
var obj = make(
v(rand(450),rand(300)),
v(1+rand(1),1+rand(1)),
v(0,0.0)
);
obj.gravity = 0.07;
obj.pong = true;
}
};
var update = function(){
//なし
};
rand = function(num){
return Math.random() * num;
}
網み目
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(){
//なし
};
横切る何か
var num = 0.11;
var NUMBEROFTHINGS = 40;
var start = function(){
for(var i=0;i < NUMBEROFTHINGS;i++){
var densha = make(v(130,30));
densha.setImage("circle.png");
}
};
var update = function(){
num *= 1.01;
for(var i=0;i 20000)num = 0.11;
};
弾幕
var DANMAKUNUM = 30;
var DANMAKUDEGREEINC = 12;
var DANMAKUINTERVAL = 50;
var timerCurrent = 0;
var timerMax = DANMAKUINTERVAL;
var start = function() {
for(var i =0; i < DANMAKUNUM;i++){
make(v(200,120));
_things[i].angle = i * DANMAKUDEGREEINC +45;
_things[i].vel.x = Math.cos(Math.PI / 180 * _things[i].angle) * 1;
_things[i].vel.y = Math.sin(Math.PI / 180 * _things[i].angle) * 1;
}
}
var update = function(){
timerCurrent++;
if(timerCurrent >= timerMax){
for(var i =0; i < DANMAKUNUM;i++){
var bullet = make(v(200,120));
bullet.angle = i * DANMAKUDEGREEINC +45;
bullet.vel.x = Math.cos(Math.PI / 180 * bullet.angle) * 1;
bullet.vel.y = Math.sin(Math.PI / 180 * bullet.angle) * 1;
}
timerCurrent = 0;
}
};
.
API
準備中（Showcaseをみて何となく掴んでください・・・）
.
To Do
・Steering Behaviours（操舵行動）を取り入れる
・AIクラス（？）
・壁を作れる。（弾力も決められる）
・ノイズ関数
・line関数
・シンプルなランダム関数( random(min,max)とか )
・シンプルなあたり判定（重い&開発中）
・摩擦力・風力のように加速度や速度に影響を及ぼす要素
・便利すぎる機能は入れない方針（MoveToなどのTween系とか、乱数の偏差とか）
・グローバル汚染を防ぎたい。（でもこれはプレイグラウンド用だぜ？）
・ちゃんとOSSっぽいパッケージを作る
・API一覧
.
Contact
hp0isme(at)gmail.com
(2015.0525) 全くの思いつきで、ライブラリの作り方もまともに知らない中（Flying Lotusを聴きながら）スタート JSについて、OSSについて分からないことが多すぎるので、アドバイス・プルリクなどお待ちしております。。