P5.js는 자바스크립트를 기반으로 한 크리에이티브 코딩 라이브러리로, 다양한 그래픽과 애니메이션을 생성할 수 있습니다. 실시간 데이터를 시각화하기 위해 P5.js를 활용하는 방법을 알아보겠습니다.

1. 프로젝트 설정 및 데이터 저장
   • P5.js 라이브러리를 다운로드하고 HTML 문서에 추가합니다.
   • 필요한 데이터를 저장할 변수를 선언합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

1. Setup 함수 설정
   • 그래프를 그릴 캔버스의 크기, 배경 색상 등 초기 설정 값을 지정합니다.
   • 데이터를 초기화하고 그래프를 그리기 위한 기본 설정을 합니다.

let data = []; // 데이터를 저장할 배열

function setup() {
  createCanvas(800, 600); // 그래프를 그릴 캔버스 크기 지정
  background(255); // 배경 색상 설정
}

1. Draw 함수 설정
   • setInterval 함수를 사용하여 일정한 간격으로 데이터를 업데이트하고 그래프를 그립니다.
   • 새로운 데이터를 배열에 추가하고 이전 데이터를 삭제합니다.

function draw() {
  // 일정한 간격으로 데이터 업데이트
  setInterval(() => {
    const newData = Math.random() * height; // 새로운 데이터 생성
    data.push(newData); // 데이터를 배열에 추가

    // 최대 데이터 개수를 넘었을 경우 이전 데이터 삭제
    if (data.length > 100) {
      data.shift();
    }
  }, 500); // 0.5초마다 데이터 업데이트

  // 그래프 그리기
  background(255);
  noFill();
  stroke(0);
  beginShape();
  for (let i = 0; i < data.length; i++) {
    const x = map(i, 0, data.length - 1, 0, width);
    const y = map(data[i], 0, height, height, 0);
    vertex(x, y);
  }
  endShape();
}

1. HTML 파일 실행
   • 웹 브라우저에서 HTML 파일을 실행하면 지정한 캔버스 크기에 맞는 실시간 그래프를 볼 수 있습니다.
   • 데이터를 업데이트하는 간격이나 데이터의 개수 등을 필요에 따라 수정할 수 있습니다.

위의 코드를 참고하여 P5.js를 사용하여 실시간 그래프를 그릴 수 있습니다. 자세한 내용은 P5.js 공식 홈페이지와 예제를 확인해 보세요.

참고 자료:

• P5.js 공식 홈페이지
• P5.js 예제 - 그래프