[JavaScript] 07. 애니메이션

교재 : 비전공자를 위한 프로그래밍 입문 - 07. 애니메이션

 

애니메이션

setup() : 한 번만 실행되는 것을 넣는 함수

draw() :  반복적으로 실행되는 것을 넣는 함수

function setup() {
   // 여기는 우선 한번만 실행하는 코드
}

function draw() {
   // 여기는 반복적으로 실행하는 코드
}

 

 

왼쪽에서 오른쪽으로 이동하는 원 만들어보기

let x = 100; // 초기화

function setup() {
  createCanvas(500, 100); //배경
  strokeWeight(2); //선두께
}

function draw() {
  if (x >= 400) { // 반복조건
    noLoop(); //x가 400값에 도달하면 멈춤
  }

  background(102, 103, 171); //먼저 그려진걸 지워놓고 다음 원을 그려야함
  circle(x, height / 2, 50);

  x += 5; // 업데이트식 (픽셀 5만큼씩 이동)
}

 

이동하는 원 무한반복하기

let x = 100; // 초기화


function setup() {
  createCanvas(500, 100);
  strokeWeight(2);
}

function draw() {
  if (x >= width) {  //x값이 끝까지가면
    x = 0; //x값을 다시 0부터 시작하게끔 설정
  }

  background(102, 103, 171);
  circle(x, height / 2, 50);

  x += 5; // 업데이트식
}

 

조금 더 디테일하게 (부드럽게 이어지도록 보이게하기)

let x = 100; // 초기화
const R = 25; //R값 설정

function setup() {
  createCanvas(500, 100);
  strokeWeight(2);
}

function draw() {
  if (x-R > width) {  //x-R이 가로길이보다 커지면
    x =-R; //-R에서 시작한다.
  }

  background(102, 103, 171);
  circle(x, height / 2, 50);

  x += 5; // 업데이트식
}