P5.js는 웹 기반의 그래픽 및 상호 작용을 위한 JavaScript 라이브러리입니다. 데이터를 가져와서 처리하는 것은 P5.js에서 강력한 기능 중 하나입니다. 이 튜토리얼에서는 P5.js를 사용하여 데이터를 가져 오고 처리하는 방법을 알려드리겠습니다.

데이터 가져오기

P5.js에서 데이터를 가져오는 가장 일반적인 방법은 loadJSON() 및 loadTable() 함수를 사용하는 것입니다.

1. JSON 데이터 가져오기

JSON 형식의 데이터를 가져오려면 loadJSON() 함수를 사용합니다. 다음은 이 함수를 사용하여 외부 JSON 파일을 가져오는 예입니다.

let data;

function preload() {
  data = loadJSON('data.json');
}

function setup() {
  // data를 사용하여 원하는 작업 수행
  console.log(data);
}

preload() 함수는 P5.js 스케치가 실행되기 전에 호출됩니다. 이 함수 내에서 loadJSON()을 사용하여 JSON 파일을 로드하여 data 변수에 할당합니다.

2. 테이블 데이터 가져오기

테이블 형식의 데이터를 가져오려면 loadTable() 함수를 사용합니다. 다음은 이 함수를 사용하여 외부 CSV 파일을 가져오는 예입니다.

let table;

function preload() {
  table = loadTable('data.csv', 'csv', 'header');
}

function setup() {
  // table을 사용하여 원하는 작업 수행
  console.log(table);
}

preload() 함수 내에서 loadTable()을 사용하여 CSV 파일을 로드하고 table 변수에 할당합니다. 세 번째 매개 변수는 CSV 파일의 헤더가 있는지 여부를 지정합니다.

데이터 처리하기

P5.js를 사용하여 가져온 데이터를 처리하는 방법은 데이터의 유형에 따라 다소 다릅니다. 여기에는 일반적인 몇 가지 예가 있습니다.

1. JSON 데이터 처리

JSON 데이터는 JavaScript 객체로 로드되기 때문에 JavaScript 객체와 마찬가지로 데이터에 액세스할 수 있습니다. 예를 들어, 가져온 JSON 데이터가 다음과 같다고 가정해 봅시다.

{
  "name": "John",
  "age": 25,
  "city": "New York"
}

이제 이 JSON 데이터에 액세스하려면 다음과 같이 할 수 있습니다.

console.log(data.name);  // "John"
console.log(data.age);   // 25
console.log(data.city);  // "New York"

2. 테이블 데이터 처리

테이블 데이터를 처리하는 방법은 테이블의 구조에 따라 다릅니다. 일반적으로 다음과 같은 작업을 수행할 수 있습니다.

for (let i = 0; i < table.getRowCount(); i++) {
  let row = table.getRow(i);
  
  let value1 = row.getNum("column1");
  let value2 = row.getString("column2");
  
  // 데이터 처리 작업 수행
}

위의 예에서 getColumnCount() 메서드는 테이블의 열 수를 반환하고, getNum() 및 getString() 메서드는 특정 열의 값을 가져옵니다. 이러한 값을 사용하여 데이터 처리 작업을 수행할 수 있습니다.

마치며

이 튜토리얼에서는 P5.js에서 데이터를 가져오고 처리하는 방법을 알아보았습니다. loadJSON() 및 loadTable() 함수를 사용하여 데이터를 가져올 수 있고, 가져온 데이터를 처리하여 원하는 작업을 수행할 수 있습니다. P5.js의 데이터 처리 기능을 사용하여 흥미로운 시각화 또는 상호 작용 프로젝트를 개발해보세요.

더 많은 정보를 원한다면 P5.js 공식 문서를 참조하세요.