유튜브에서 브라우저에서 각종 도형의 움직임을 Javascript로 구현하는 걸 보고 반해서 바로 공부를 시작.
이제서야 조금씩 머리속에서 그림이 그려져가고 있다.
bouncing-ball-3.bryanko555.repl.co
이건 그냥 단순하지만, 여기에다 배열과 반복이 더해지면 그럴듯한 그림이 그려진다.
bouncing-ball-1.bryanko555.repl.co
오늘은 첫번재 기본적인 바운드 되는 내용부터 정리한다.
html에 canvas를 설정하고, css에서 화면 가득 채우는 건 기본.
바로 Javascript로 넘어가자.
|
window.onload = function () { // 스크립트 로딩이 완료된 후부터 내용을 시작
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Ball{
constructor(x,y){ // ball의 기본 속성들을 정의
this.x = x;
this.y = y;
this.c = 'rgba('+Math.random()*255+','+Math.random()*255+','+Math.random()*255+')';
// 시작할때 공의 색깔을 랜덤하게 설정. 이거 많이 사용하게 된다. this.size = 20; // 공의 반지름
this.angle = (Math.random()*(Math.PI*2)); // 공이 출발할 각도
this.power = 5; // 공의 세기
this.directionX = this.power * Math.cos(this.angle); // 공이 좌우로 움직이는 값
this.weight = this.power * Math.sin(this.angle); // 공이 상하로 움직이는 값
}
update(){ // 프레임마다 속성들을 변화시키는 함수
this.y += this.weight; // y값을 계속 증가/감소 시킨다
this.x += this.directionX; // x값을 계속 증가/감소 시킨다.
if(this.y+this.size>canvas.height || this.y-this.size<0){ // 상하 바운드 처리
this.weight *= -1; // 상하에 닿으면 방향을 전환
}
if(this.x>canvas.width-this.size || this.x-this.size < 0) { // 좌우 바운드 처리
this.directionX *= -1; // 좌우에 닿으면 방향을 전환
}
}
draw(){ // 넘어온 속성값대로 캔버스에 원을 그려주는 함수
ctx.fillStyle= this.c;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
}
init = () => { // 그려질 공의 개체를 설정하는 함수
ball1 = new Ball(canvas.width*0.5, canvas.height*0.5)
}
function animate(){ // 매 프레임마다 그림을 새로 그려주는 함수
ctx.fillStyle='rgba(255,255,255,0.5)'; // 매 프레임마다 캔버스를 통째로 칠하는 색깔. 맨 마지막의 alpha값에 따라 공의 잔상이 남는 정도가 달라진다.
ctx.fillRect(0,0,canvas.width,canvas.height); // 캔버스 전체를 색칠해서 내용을 지워준다
ball1.update(); // ball1의 좌표 등을 업데이트 한다
ball1.draw(); // 업데이트된 내용으로 ball을 새로 그린다.
window.addEventListener('resize',function(){ // 화면 크기가 변하면 캔버스 크기도 변경해줌
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
})
requestAnimationFrame(animate);
}
init(); // 공의 초기 좌표를 설정하고,
animate(); // 프레임마다 공을 그려준다.
}
|
cs |
구조를 간단히 말하자면,
] 그려질 ball의 기본 속성을 정하는 부분 : Ball.constructor(x,y)
] ball이 움직일 때마다 x,y 값을 변경해주고, 테두리에 부딪치면 -1을 곱해서 반대로 움직이게 하는 부분 : Ball.update()
] 생성된 ball들을 canvas에 그려주는 부분 : Ball.draw()
] 위의 함수들을 약 1초에 60번씩 호출해서 반복시키는 부분 : animate()
위의 것이 기본적인 구조이고, 저 구조 안에서 공의 개수를 늘리고, 중력값을 주고, 색깔을 변하는 등의 변화를 주면 점점 그럴듯한 그림으로 변해간다.
앞으로 계속 변형을 늘려가보자.
자바스크립트를 깨우치다:객체로 풀어보는 JavaScript의 원리
COUPANG
www.coupang.com
이 다음에는 공을 여러개로 늘려서 움직여보자.
Javascript 캔버스에서 튕기는 공들 (w/o 중력)
이전 글에서는 공 하나가 화면 안에서 생각없이 튕기는 내용이었다. Javascript 캔버스에서 움직이는 공 그리기 유튜브에서 브라우저에서 각종 도형의 움직임을 Javascript로 구현하는 걸 보고 반해
mrkool.tistory.com
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
'문과생의 coding' 카테고리의 다른 글
| Javascript 캔버스에서 튕기는 공들 (w/o 중력) (0) | 2021.02.07 |
|---|---|
| Javascript 캔버스에서 튕기는 공 w 중력 (0) | 2021.01.10 |
| JavaScript 간단하게 구현한 계산기 (버블링 활용) (0) | 2020.09.20 |
| [App만들기] 회사 사전 거의 최종 버젼 (0) | 2020.04.26 |
| [App 만들기] 첫번째 코딩 결과물 (0) | 2020.04.26 |
![아화골프 치기쉬운아이언 GR AONE 원랭스 아이언세트 7P 골프채아이언, 4번-Pw [7PCS]](https://static.coupangcdn.com/image/affiliate/banner/296bd8f8967c64d0326e914890a31fb4@2x.jpg)
