목록ES6 (28)
Front-end_dev
아직 정식으로 최종(final release)되어 사용 할 수 있는 기능은 ES6(ES2015)까지 입니다. decorator는 나중에 나올 ES7의 새로운 feature이며, babel같은 트랜스파일러로 사용 해 볼 수 있습니다. 우선 decorater는 클래스 그 자체를 오버라이드(확장) 하거나, 클래스 내부의 프로퍼티(메서드)를 오버라이드(확장) 하는 것이라고 볼 수 있습니다. 첫번째 예제에서는 doSomething을 실행하기전, describe함수가 실행됩니다. 각 파라미터들은,target = classname = doSomethingdescriptor = property descriptor입니다. 신기하게도 descriptor.value는 doSomething값을 갖고있고, writable, e..
노멀벡터 계산할때(일반화해서 반복문으로 뽑아낼때 단, 직접계산하는건 이 주제와 상관없습니다), 중요하게봐야할 부분이 2가지 있습니다.첫번째는 벡터의 외적은 교환법칙이 성립하지 않습니다.ex) AXB != BXA [오른손좌표계 기준(OpenGL, WebGL)]두번째는 밑의 그림과같이 Counter Colock Wise(반시계방향)방향을 기준으로 노멀벡터(외적된것)의 계산결과값입니다. 따라서, 노멀벡터를 뽑아낼떄 두벡터간의 연산순서를 잘 봐야하며 버퍼에 그리는 인덱스 순서는 CCW방향이 되야 합니다.
위 공식은 n차원 베지어곡선을 일반화시킨거고 cubic bezier곡선(조절점2개, 총점의개수는4개)의 공식은 다음과 같습니다 B(t) = P0 * ( 1 - t )3 + P1 * 3 * t * ( 1 - t )2 + P2 * 3 * t2 * ( 1 - t ) + P3 * t3 (참고) Factorial = (n,i) = nCr = nPr/r!
lazy evaluation을 처음에 구현할려고했을때 생각보다 너무 어려워서 참고를 하려고 찾아봤는데 잘나오지가 않습니다. 그래서다시꾸역꾸역만들어봤는데 유명한 라이브러리만큼 완벽하진 않지만, 어느정도 속도는 잘 나오는것 같습니다.lazy evaluation를 구현하는데있어 만들어본 플로우차트입니다. 기본 컨셉은 파이프라인을 돌다가 어떤조건에 만족하게되어 파이프라인을 재생성하게되는 방식으로 구현했습니다. 코드 : http://jsbin.com/dorevir/edit?html,js,console
function trimStr(str,num) { return str.substr(0,str.length - num)} function extractLength(str,ret = 0) { if(str.length === 0) return ret; const s = trimStr(str,1); return extractLength(s , ret+1); // Tail call optimization (for only ES6)} function createRandomChar() { return Math.random()*26 | 0 + 1;} function convertNumToStr(num) { return num.toString(36)} function genRandomStr(size) { const ar..
아 언제부턴가 맥 안에 모든 녹화툴이 렉걸리기시작해서 다시지웟다가 깔아도 계속 렉걸리네요—;; 이 게임은 2D 물리 게임이고,물리움직임은 matter.js로 , 렌더링은 pixi.js로 작업했습니다.
2D 메쉬를 어떻게 찾아서찾아서 배우긴했는데 물리쪽이안되다보니까 제 마음대로 제어하는건 불가능하고 단순히 제자리에서 망토효과는 내봤습니다.멋잇는걸 하려면 물리가 필수인데 하 수알못이라 참 힘듭니다..ㅜㅜ
원의 중심을 기준으로 사용자의 마우스 좌표로 일직선을 긋고싶은데 선이 원을 벗어나서는 안될때 수식을 다음과같이 구성 할 수 있습니다.마지막에 px,py에서 r은 원의 반지름입니다 위에 r(빗변)이 아닙니다. 실제로 컴퓨터는 1사분기2사분기3사분기4사분기라는 개념이 없으므로 제 스스로 그 개념을 만들어줬고, 데카르트좌표계에서의 좌표(반시계방향으로 90도180도270도)로 바꿔줬습니다. 캔버스에서는 시계방향으로 각도를 잽니다.이 정도만 추가해주면 다음과 같이 구성 할 수 있습니다. class Vector2D { constructor(x=0,y=0) { this.x = x; this.y = y; } toRadian(degree) { return Math.PI/180 * degree; } toDegree(rad..
4번째 프로젝트입니다. (AVL TREE SIMULATION) https://github.com/hyunsooda/AVL-TREE-SIMULATIONhttp://eat2go.tistory.com/categoryhttp://cafe.naver.com/artofthings
lang : ES6 dev dependency : webpack(with babel)util : google fontslib : material.js(UI)physics engine : matter.js(rigid body 2d physics) 이전프로젝트까지에서는 canvas에서 제공하는 low level api로만 작업하다가 처음으로 물리엔진(주로 강체동역학)을 써서 같이 작업해봤습니다. 언제부턴가 녹화 프로그램들이 녹화만햇다하면 엄청버벅거려서 저 동영상에서도 엄청 버벅거리네요 실제로는 하나도 잔렉없습니다....ㅜ