목록Canvas (2)
펑션과 코딩의 행방불명

오늘은 광복절로 구글에서 태극기 모양 폭죽을 만들어주었다. 저걸 보고 나는 감탄과 동시에 만들어 보고 싶었다! 그래서 바로 시작했다. 마침 내가 어제 만들었던 폭발 이펙트와 잔상(꼬리) 이펙트가 있어서 그걸 활용하였다. 먼저 오늘은 밤하늘이 배경이니까 #070816(진한 남색) 정도로 맞춰준다. //벡터 class Vector { constructor(x, y) { this.x = x this.y = y } add(b) { this.x += b.x this.y += b.y } clone() { return new Vector(this.x, this.y) } } //색상 class RGB { constructor(r, g, b, a = 1) { this.R = r this.G = g this.B = b t..

어제 Canvas 사용법을 배우다가 갑자기 물리엔진을 만들게 되었다. 단진자 물리엔진을 만들려고 했지만 물리2를 보면서 혼란이 와서 거기까지는 못했고 간단한 움직임 까지는 완성하였다. 먼저 main함수부터 살펴보자. display함수는 최적화 프레임(?)마다 render함수를 불러온다. 그리고 render함수는 원래있던 그림을 지우고 다시 그려주는 형식이다. Boxes라는 오브젝트를 담고있는 리스트에서 각각의 객체들에게 process로 움직임을 처리하고 그림을 그린다. Boxes에 담았던 그 클래스, Ball이다. 참조할때는 질량, 위치, 반지름, 속도, 색깔로 이루어져있다. 그리고 process함수는 그리고, 벽에 닿았으면 튕기게하고, 속도에 따라 움직이게 하는 함수가 있다. 사실 이게 전부다. 매우 ..