p5.js 애니메이션을 위한 변수 및 대입 연산자의 이해

정지된 도형에 움직임이나 크기 변화 등을 주려면 고정된 숫자가 아닌 변하는 숫자를 넣어주어야 하는데 이때 필요한 것이 변수이다. 

 

변수란?

변수란 데이터를 저장할 수 있는 메모리 공간을 의미하며, 저장된 값은 변경될 수 있다.
어떤 이름을 가진 상자를 만들어서 그 상자 속에 여러 가지 물건을 넣는 것과 비슷하다고 생각하면 된다.

아래 그림처럼 변수에 어떤 값을 할당하는지(넣는지)에 따라 그 값은 계속 바뀌게 된다.

 

변수 생성 및 값을 할당하는 방법

 

 

변수를 선언(생성)할 때는 var, let, const 를 이용할 수 있는데 여기서는 let을 이용해 예시를 들어보겠다.
변수를 선언하는 방법에는 선언만 하는 방법/선언과 동시에 초기화하는 방법 두 가지가 있다.

변수 선언(생성)하는 두 가지 방법

 

변수를 이용한 간단 모션 만들기

let speed = 1;
let yPos = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // x축 캔버스 중앙, y축 yPos변수에 입력된 값인 가로*세로 150인 원을 생성
  ellipse(width/2, yPos, 150);
  
  // yPos = yPos + speed 와 같은 말로 현재 yPos=0 , speed=1 이므로 0+1한 값을 yPos에 할당한다. 
  // 즉, yPos = 1이 된다. 
  // draw함수가 무한 반복되므로 1씩 계속 증가하게 되어 화면을 벗어나게 됨
  yPos += speed;
  
  
  // 이 문제를 해결하여 계속 반복해주기 위해서 아래의 if문이 필요함
  if(yPos > height + 150 ) {
    yPos = 0;
  }
}

 

위의 소스코드를 보면 원의 y축 위치를 나타내는 ypos라는 변수와 그 변수에 속도감을 줄 speed라는 두 개의 변수를 만들어서 각각 0과 1이라는 초깃값을 넣어주었다.

 

draw 함수가 1초에 60번씩 무한 반복 실행되는 동안 yPos의 값은 계속 1씩 증가하게 되어 원은 화면을 벗어나게 된다.

 

 

 

대입 연산자

대입 연산자는 연산과 대입을 한꺼번에 할 수 있도록 도와주는 연산자로, 왼쪽에 있는 변수에 오른쪽에 있는 값만큼 지시된 연산을 사용하여 계산 후 대입한다.

연산자	설명	표현
=	오른쪽 값을 왼쪽에 대입	yPos = yPos + 1
+=	두 값을 더한 후 왼쪽에 대입	yPos += 1 yPos = yPos + 1과 같음
-=	두 값을 뺸 후 왼쪽에 대입	yPos -= 1 yPos = yPos - 1과 같음
*=	두 값을 곱한 후 왼쪽에 대입	yPos *= 2 yPos = yPos * 2과 같음
/=	두 값을 나눈 후 왼쪽에 대입	yPos /= 1 yPos = yPos / 1과 같음
%=	두 값을 나눈 나머지를 왼쪽에 대입	yPos %= 1 yPos = yPos % 1과 같음

 

대입연산자 처리 방식

 

p5.js 온라인 웹 에디터

p5.js Web Editor

p5.js 온라인 웹 에디터 사용법

p5.js 애니메이션을 위한 프레임 개념 및 frameRate(), frameCount