Front-end_dev

아 언제부턴가 맥 안에 모든 녹화툴이 렉걸리기시작해서 다시지웟다가 깔아도 계속 렉걸리네요—;; 이 게임은 2D 물리 게임이고,물리움직임은 matter.js로 , 렌더링은 pixi.js로 작업했습니다.

원의 중심을 기준으로 사용자의 마우스 좌표로 일직선을 긋고싶은데 선이 원을 벗어나서는 안될때 수식을 다음과같이 구성 할 수 있습니다.마지막에 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로만 작업하다가 처음으로 물리엔진(주로 강체동역학)을 써서 같이 작업해봤습니다. 언제부턴가 녹화 프로그램들이 녹화만햇다하면 엄청버벅거려서 저 동영상에서도 엄청 버벅거리네요 실제로는 하나도 잔렉없습니다....ㅜ

군대가기전에 썻던 앵귤러(프레임워크)도그렇고 현재 공부하고있는 물리엔진(프레임워크)에서도 그렇고 프레임워크나 라이브러리에서 이벤트는 빠지질 않는 것 같습니다. 그래서 한 번 구현해봤습니다. 우선 먼저 이게 어떻게 돌아갈까 생각을 해봤는데,첫번째로 생각해본게 기존의 동작을 오버라이딩하는 것 입니다. 근데 이건 매번 check해야하므로 이벤트방식의 프로그래밍과는 전혀 거리가 멉니다. 예를들면, LED가 1개 켜져있는데 스위치를 누르면 LED가 꺼지는 프로그램이 있습니다. 여기서 하드웨어프로그래머는 2가지방법이있겠죠. 1번쨰는 단순 무한루프안에 핀값(스위치가눌렸는지안눌렸는지)을 체크하는 구문을 넣는거고, 2번째는 인터럽트를 사용해서 값을 체크하는거죠여기서 차이점은 값을 계속해서 체크하냐안하냐의 차이입니다. 따..

프로젝트하면서 정말 너무어려웠던 부분은 동영상에서 볼 수 있다시피 사용자의 막대기가 맨위,맨아래에 부딪혔을 때, 벗꽃 비슷한 애니메이션이 나타나는데 이걸 구현하는게 제일 힘들었습니다. * 가장 어려웠던 부분.-> 일반적인 애니메이션 루프의 로직은 전체지우기->전체그리기 이다. 좀 더 구체적으로 말하자면 전체지우기->일부분그리기->일부분그리기->일부분그리기->일부분그리기->결국전체를 그리게 된다. 이러한 과정을 계속해서 반복하게 된다. 근데 여기에 문제점이 한가지 있다.예를들어, 사용자의 입력에 따라 애니메이션 루프를 계속 호출한다고 가정해보자.처음에 호출할땐 문제 없다. 하지만 2번째 호출을 하게 되면 화면에는 아무것도 나타나지 않을 것이다.왜냐하면 비동기로 호출되는 window.requestAnimat..

소스코드 : https://github.com/hyunsooda/PingPong 반디캠으로 찍어서그런지 랜더링이 느리게되는것처럼 보이는감이있어보이네요??;;

프로그래밍 관련 커뮤니티 같은데보면 “테트리스 정도는 4시간만에 짤수잇어야” 이런말들을 종종 볼 수 있습니다.4시간??? 허언증인지 진짜인지는 모르겠지만 아무리 경력있는 개발자라도 몇시간만에 짜라고하면 힘들수도있을것 같다라는게 저의 생각입니다.직접 구상한 첫 프로젝트에서 2000라인이넘는 대규모(저에게는)프로젝트를 진행하면서 중간중간에 참 꺠달은것들이 많습니다. 역시 백문불여일견이라고 보고이해하는것과 직접하면서이해하는것의 차이가 상당히 심하다는걸 깨닫게됬고 직접 짜면서 코드에서의 테크니컬적인부분은 물론이고, 생각지도못한 문법적인면에서도 깨달은부분이있습니다. 그리고 컴퓨터의 플레이(인공지능)을 구현해볼려고 구상은 해놨는데 시간이 많이 뺏길것같습니다… (여기서 인공지능이라함은 머신러닝(neural netwo..