지난 글에서는 공이 상자안을 끝없이 튕기는 것을 그려봤는데, 이번에는 중력값을 넣어서 실제에서 공이 튕기는 것처럼 해보자.
실제에서는 공이 튕기는 힘이 조금씩 줄어들고,
좌우로 움직일때도 속도가 줄어들어야 한다.
실제에서 공이 자유낙하를 한다면 아래와 같을 것이다.
중력이 있기 때문에 단위시간에 떨어지는 거리가 달라지고(0.2, 0.4, 0.6...),
반발해서 올라갈 때는 그와 반대로 올라갈 수록 단위시간의 이동거리가 줄어든다.
이것을 코딩에 반영해줘야 한다.
중요한 부분은 update() 이다.
아래에서는 gravity 변수가 매 프레임마다 0.2씩 더 늘어나게 해줬다.
그리고 바운드 될 때마다 gravity에 -1을 곱해서 움직이는 방향을 바꿔준다.
그런데, 바운드 될때마다 다시 올라가는 높이가 이전보다는 낮아져야 되기 때문에 -0.9로 수치를 정했다.
이 수치를 -1.1 이렇게 바꾸면 바운드 되서 이전보다 더 높이 올라간다.
x방향도 마찬가지로, 처음에는 5만큼 늘어나지만, 그 다음부터는 0.995를 곱해서 점점 늘어나는 속도가 줄어든다.
좌우 벽에 닿으면 -1을 곱해서 방향이 바뀐다.
|
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; // x좌표
this.y = y; // y좌표
this.c = 'red'; // 시작할때 공의 색깔
this.size = 20; // 공의 반지름
this.power = 5; // 공의 움직임 세기
this.gravity = this.power; // 공이 상하로 움직이는 값
this.directionX = 5; // 공이 좌우로 움직이는 값
}
update(){ // 프레임마다 속성들을 변화시킴
// y값의 변동을 계산
this.y += this.gravity;
this.gravity += 0.2 // 중력 값
console.log(this.gravity)
if(this.y+this.size >= canvas.height || this.y-this.size <= 0){ // 상하 바운드 처리
this.gravity *= -0.9; // 상하에 닿으면 방향을 전환
}
// x값의 변동을 계산
this.x += this.directionX;
this.directionX *= 0.995;
if(this.x+this.size > canvas.width || 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();
}
}
function init(){ // 그려질 공의 초기 좌표 설정
ball1 = new Ball(canvas.width*0.5, canvas.height*0.5)
}
function animate(){ // 매 프레임마다 벌어지는 일들
ctx.fillStyle='rgba(255,255,255,0.5)';
ctx.fillRect(0,0,canvas.width,canvas.height); // 캔버스 전체를 색칠해서 내용을 지워준다
ball1.update(); // ball1의 좌표 등을 업데이트 한다
ball1.draw(); // 업데이트된 내용으로 ball을 새로 그린다.
requestAnimationFrame(animate);
}
init(); // 공의 초기 좌표를 설정하고,
animate(); // 프레임마다 공을 그려준다.
}
|
cs |
혹시 몰라서 html 부분,
|
<body>
<canvas id="canvas"> </canvas>
</body>
|
cs |
이제 여기에서 배열을 사용해서 공의 수를 확 늘려주면, 좀 볼만한 그림이 나온다.
다음 시간에...
자바스크립트를 깨우치다:객체로 풀어보는 JavaScript의 원리
COUPANG
www.coupang.com
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
'문과생의 coding' 카테고리의 다른 글
| Javascript 캔버스에서 튕기는 공들 (w 중력) (0) | 2021.02.08 |
|---|---|
| Javascript 캔버스에서 튕기는 공들 (w/o 중력) (0) | 2021.02.07 |
| Javascript 캔버스에서 움직이는 공 그리기 (0) | 2020.12.26 |
| JavaScript 간단하게 구현한 계산기 (버블링 활용) (0) | 2020.09.20 |
| [App만들기] 회사 사전 거의 최종 버젼 (0) | 2020.04.26 |