ntuition.js - Canvas의 비주얼 프로그래밍 프레임 워크를 만들기 시작했습니다.

7/16 추기(생각)
미래의 도전
・디자인 패턴이나 gulp등을 도입해 라이브러리같이 한다(학습중)
・webgl에 대응해 3D의 묘화를 도입한다(학습중)
· Arduino와 어떻게 가고 싶다

intuition.js라는 HTML5/Canvas의 비주얼 프로그래밍 프레임 워크를 만들었습니다. 이미지로서는 p5.js나 pixi.js, enchant.js, Cocos2d-js와 같이 Canvas의 묘화를 담당하는 프레임워크입니다. (그렇게 볼륨은 없고, 대단한 것은 아니지만··)
아직 만들기 시작이므로 놀아보고 피드백을 원합니다 ~.

세부 정보 : ht tp // // hp 0. 기주 b. 이오 / 인츠 이치온 js /

이런 분위기

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) : ht tp // // hp 0. 기주 b. 이오 / 인츠 이치온 js /
리포지토리 : htps : // 기주 b. 이 m/hp0메/인츠이치온. js

개요

· HTML5/Canvas에서 실행되는 비주얼 프로그래밍 프레임 워크
・독특한 코딩 플로우로 Canvas의 그리기 루틴 워크를 컷
・플레이그라운드 용도(공부, 체험, 연습...etc)에 특화
・모든 Thing(기본 오브젝트)에는 위치・속도・가속도가 있다.
・위치, 속도, 가속도는 모두 벡터(Vec2)로 표현

ShowCase

더 화려한 데모는 ht tp // // hp 0. 기주 b. 이오 / 인츠 이치온 js /에 있습니다.

● 생성(내츄럴)

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 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( )라고 하는 함수가 있습니다. 너무 짧습니까?

・글로벌 오염 해소(가능한 한)
플레이그라운드 용도이므로 좋겠다고, 타카를 구르고 있었던 것입니다만, 전체를 잘 닫을 수 있으면 가장 좋습니다.

・아직 추가하고 싶은 기능도 있다
자세한 것은 ↓에 올렸습니다.
ht tp // // hp 0. 기주 b. 이오 / 인츠 이치온 js /

조금 참가하고 싶고, 조언하고 싶은 분은 풀릭 연락 (hp0 이s @ g 마이 l. 이 m) 주시면 좋겠습니다 ~