[p5.js] 들썩거리며 앞으로 나아가는 자동차 만들기

 

* rect 함수의 5,6,7,8번째 인자를 넘겨주면 모서리가 둥근 사각형을 만들 수 있다

 

* p5.js의 시스템변수 frameCount를 활용해서 자동으로 차체가 들썩거리는 듯한 모션을 주었다.

 

frameCount

시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정합니다.

setup() 함수의 기본값은 0이고, draw() 함수의 첫 번째 반복 실행이 마치면 1씩 증가하는 식입니다.

 

 

소스코드

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

let carX = -90;

function draw() {
  background(220);
  
  carX += 5;
  if(carX > width+90) {
    carX = -90;
  }
  
  car(carX, height/2);
}

function car(x,y) {
  push();
    translate(x, y);
  
    push();
      let up = 0;
  
      //차체가 들썩거리는 모션
      if(frameCount%40 >= 20) {
        up = -10;
      }
      translate(0, up);
      rectMode(CENTER);
      fill("black");
      rect(0,0,180,80,40,40,20,20); //차체 아래
      rect(0,-65,100,50,25,25,0,0); //차체 위
    pop();
  
    fill("white");
    strokeWeight(8);
    ellipse(-45,35,60,60); //왼쪽바퀴
    ellipse(45,35,60,60); //오른쪽바퀴
  pop();
}