P5.js는 JavaScript 기반의 creative coding 라이브러리로, 시각적인 예술 작품이나 인터랙티브 웹 애플리케이션을 개발하기에 적합합니다. 시간을 다루는 작업은 애니메이션, 타이머 등 다양한 시나리오에서 필요하며, P5.js에서는 이를 간단하게 처리할 수 있는 몇 가지 방법이 있습니다.

1. millis() 함수 사용하기: millis() 함수는 P5.js에서 현재 시간을 가져오는 함수입니다. 이 함수를 사용하면 특정 작업이 시작된 시간부터 경과한 시간을 계산할 수 있습니다. setup() 함수나 draw() 함수 내부에서 millis() 함수를 호출하여 현재 시간을 가져올 수 있습니다. 예를 들어, 애니메이션을 만들 때 특정 동작이 일정 시간 후에 시작되도록 하고 싶다면, 시작 시간을 변수에 저장하고 millis() 함수를 이용하여 경과 시간을 계산하여 특정 시간 이후의 동작을 수행하면 됩니다.

   let startTime;
   let delay = 2000; // 2초
   
   function setup() {
     createCanvas(400, 400);
     startTime = millis();
   }
   
   function draw() {
     background(220);
     let elapsedTime = millis() - startTime;
        
     if (elapsedTime > delay) {
       // delay 시간이 지난 후에 수행할 작업
       rect(100, 100, 200, 200);
     }
   }
   

2. frameCount 변수 사용하기: frameCount 변수는 sketch가 실행된 이후의 프레임 수를 카운트합니다. 이를 사용하여 특정 프레임 후에 작업을 수행할 수 있습니다. 예를 들어, 60프레임 당 1초간격으로 작업을 수행하고 싶다면, frameCount를 이용하여 프레임 수를 계산하고 그에 따라 작업을 수행하면 됩니다.

   let interval = 60; // 60프레임마다 작업 수행
   let count = 0;
   
   function setup() {
     createCanvas(400, 400);
   }
   
   function draw() {
     background(220);
   
     if (frameCount % interval === 0) {
       // interval 마다 수행할 작업
       circle(random(width), random(height), 50);
       count++;
     }
   
     if (count >= 10) {
       noLoop(); // 작업이 10회 수행된 후에 그리기 중단
     }
   }
   

위의 예시에서는 millis() 함수와 frameCount 변수를 사용하여 시간과 프레임을 다루는 방법을 소개하였습니다. 이외에도 setTimeout() 함수 등을 사용하여 특정 시간 이후에 작업을 수행할 수도 있습니다. P5.js는 시간을 다루는 다양한 기능을 제공하므로, 필요에 따라 적절한 방법을 선택하여 사용하면 됩니다.

더 자세한 내용은 P5.js 공식 문서를 참고하시기 바랍니다.