Javascript 캔버스에서 움직이는 공 그리기

유튜브에서 브라우저에서 각종 도형의 움직임을 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(); // 프레임마다 공을 그려준다.
 
  }

구조를 간단히 말하자면, 

  ] 그려질 ball의 기본 속성을 정하는 부분 : Ball.constructor(x,y)

  ] ball이 움직일 때마다 x,y 값을 변경해주고, 테두리에 부딪치면 -1을 곱해서 반대로 움직이게 하는 부분 : Ball.update()

  ] 생성된 ball들을 canvas에 그려주는 부분 : Ball.draw()

  ] 위의 함수들을 약 1초에 60번씩 호출해서 반복시키는 부분 : animate()

 

위의 것이 기본적인 구조이고, 저 구조 안에서 공의 개수를 늘리고, 중력값을 주고, 색깔을 변하는 등의 변화를 주면 점점 그럴듯한 그림으로 변해간다. 

앞으로 계속 변형을 늘려가보자.

 

자바스크립트를 깨우치다:객체로 풀어보는 JavaScript의 원리

 

이 다음에는 공을 여러개로 늘려서 움직여보자.

Javascript 캔버스에서 튕기는 공들 (w/o 중력)

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.