p5.js로 데이터 시각화 탐색

Sep 16, 2025

어떻게

(이미지 크레디트 : 순 잡지)

p5.js는 유명한 데스크톱 창조적 인 코딩 환경 처리를 가장 최근의 JavaScript 구현입니다. 처리의 전력과 용이가 쉽고 브라우저에 넣을 수 있습니다. 캔버스에 그리는 데 도움이되지만 웹 페이지와 통합되어 '스케치'가 DOM에 응답하고 조작 할 수 있습니다.

p5.js. 애니메이션의 많은 두통을 버리고 데이터 시각화 웹에서 두 가지 간단한 기능을 사용하여 애니메이션을 일으키고 실행할 수 있도록 슈퍼 간단하게 만듭니다. 설정() 과 무승부() ...에

그러나 이러한 단순성은 자신의 기능을 만들고 많은 커뮤니티 생성 라이브러리로 확장 하여이 단순성이 제한적이고 제한적 인 것으로 가정하지 마십시오.

더 많은 웹 디자인 도구와 조언을 위해 우리의 훌륭한 목록을 참조하십시오. 웹 호스팅 제공자와 완벽한 것을 선택하십시오 웹 사이트 빌더 과 클라우드 스토리지 ...에

창의적인 코딩에 들어가는 6 가지 방법

왜 데이터를 사용하여 애니메이션을 구동 하시겠습니까?

설계 및 애니메이션 '시스템'만들기는 다른 데이터를 급지 할 수있는 규칙, 매개 변수 및 변수 범위를 정의하는 것을 의미합니다. 시스템의 매개 변수로 재생하고 다른 데이터를 입력 할 수있는 기능은 체계적인 접근 방식의 일관성에 따라 무한한 출력 변형을 생성 할 수 있음을 의미합니다.

다른 데이터는 완전히 다양한 시각적 출력을 생성 할 수 있으며 빠르게 움직이는 훌륭한 소스를 만들 수 있으며 풍부하게 질감 된 데이터는 오디오입니다. 그것이 우리가 우리 애니메이션에서 사용할 것입니다.

데이터 구동 vs 데이터 시각화

Explore data visualisation with p5.js: Example — p5.js가 할 수있는 일례로서; 여기에서는 로고가 오디오 데이터로 인해 멋지게 일정한 배열로 왜곡되었습니다. (이미지 크레디트 : 순 잡지)

데이터 기반 애니메이션 데이터 시각화입니까? 예, 아니오. 애니메이션은 시각화와 마찬가지로 데이터를 시각적으로 표현할 것입니다. 그러나 목적은 전통적인 시각화와 다른 것과 다릅니다. 데이터 시각화는 시청자에게 데이터에 대한 통찰력을 제공하는 데 사용되므로 그래픽은 데이터의 통신 서비스에 있습니다.

그러나 우리는 흥미롭고 조직적인 그래픽 변형을 생성 할 수 있도록 우리가 흥미롭고 텍스처 그래픽 변형을 생성 할 수 있도록 데이터를 크리 에이 티브 시드로 사용하고 있으므로 데이터는 그래픽 서비스에 있습니다. 물론 하나의 분야는 상호 연결되어 다른 것과 교차 수분을 맺지 만 데이터를 사용할 때 자신의 의도를 인식하는 것이 좋습니다.

우리는 무엇을 할 것입니까?

Explore data visualisation with p5.js: Concentric arcs — 화면의 중앙에서 부상하는 동심원, 오디오 진폭으로 확장 (이미지 크레디트 : 순 잡지)

p5.js는 사운드 파일을 분석하는 데 비롯된 데이터에 빠르고 쉽게 액세스 할 수 있습니다 (mp3). 우리는 사용할 것입니다 p5.fft. 오디오 내에서 다른 주파수 (저음 및 고음)를 분석하고 해당 주파수의 '에너지'또는 진폭을 시각화하십시오.

우리가 소리의 '모양'을 볼 수있게되기 위해서는 사운드의 현재 진폭을 표시하지만 데이터 포인트의 '버퍼'를 캡처하고 싶지는 않습니다. 이렇게하면 이동 기록을 표시 할 수 있습니다.

데이터 포인트를 표시하려면 중앙에서 화면의 바깥 쪽 가장자리까지 일련의 동심 호를 생성합니다. 아크의 길이는 데이터의 진폭을 나타냅니다. 또한 라인 무게와 색상과 같은 데이터에 대한 다른 시각적 인코딩을 사용할 수 있습니다.

우리는 무엇을 배울 것인가?

코드를 통해 작업 할 것입니다.

새 P5 스케치 설정
소리를 적재하고 분석합니다
크기, 모양 및 색상과 같은 시각적 요소에 데이터 값을 매핑합니다.
클래스를 사용하여 애니메이션 및 데이터의 상태를 유지하고 코드를 재사용 할 수있게하십시오.

파일은 어디에 있습니까?

애니메이션의 파일이 호스팅됩니다 OpenProcessing. , 다른 사람들의 스케치를 공유, 발견 및 포크하기위한 훌륭한 플랫폼. 코드를 강화하는 것이 좋습니다.

오디오 데이터를 사용할 것처럼 스케치로 드래그 할 MP3 파일이 필요합니다. OpenProcessing에서 새로운 스케치를 설정합니다. 이것은 오디오를로드 한 후에 스케치가 어떻게 보이는지, 데이터를 얻고 간단한 '데이터 모양'을 그려줍니다.

그리고 이것은 완성 된 스케치가 어떻게 보일 것인지입니다.

또는 그를 사용할 수도 있습니다 p5.js 온라인 편집자 또는 자신의 프로젝트에 도서관을 포함 시키십시오 다운로드 또는 CDN을 통해 ...에

01. 새로운 스케치를 시작하십시오

Explore data visualisation with p5.js: OpenProcessing — 시작하려면 무료 OpenProcessing 계정을 설정하십시오 (이미지 크레디트 : Mike Brondbjerg)

무료 OpenProcessing 계정을 가져오고 프로필 페이지에서 스케치 만들기를 클릭하십시오. 그런 다음 이는 p5.js의 내장 함수 중 두 가지가 포함 된 가장 기본적인 스케치를 생성합니다.

설정() - 이것은 한 번만 실행되며 새로운 캔버스를 설정하는 데 사용됩니다.
무승부() - 모든 프레임을 실행하고자하는 코드를 넣는 곳이 있습니다.

당신은 그것을 알게 될 것입니다 배경() 설정에서 한 번만 호출됩니다. 이렇게하면 화면이 지워집니다. 따라서 모든 프레임을 선택하십시오. 무승부() 너무 기능.

찾을 수있는 몇 가지 예제를 사용하여 일부 코드를 사용하여 플레이하십시오. p5.js 사이트에서 ...에

Book your tickets to Generate CSS now to save £50 — 이제 CSS를 생성하기 위해 티켓을 예약하여 £ 50을 절약하십시오. (이미지 크레딧 : 게티 / 미래)

02. 오디오 데이터를 사용하여 첫 번째 스케치를 만듭니다

Explore data visualisation with p5.js: First sketch — 첫 번째 OpenProcessing 스케치에서 기본 설정 () 및 그리기 () 함수를 만듭니다. (이미지 크레디트 : Mike Brondbjerg)

내게 가라 예제 스타터 스케치 ...에

재생 버튼을 누르면 텍스트가 캔버스에 MP3 파일을 삭제하라는 텍스트가 표시됩니다. 업로드를 완료 한 다음 몇 초 동안 기다리고 캔버스를 클릭하여 재생을 시작하십시오. 업로드 한 음악의베이스 진폭과 함께 색상을 확장하고 변경하는 마우스에 따라 타원을 볼 수 있습니다.

코드의 대부분은 주석 처리되지만 몇 가지 주요 요소를 살펴 보겠습니다.

스케치의 시작 부분에 앞서 설정() , 우리는 글로벌 변수를 만들었습니다.

이내에 설정() 우리는 몇 가지 중요한 줄이 있습니다.

colorMode(HSB,360,100,100);

콜롬둘 () rgb 및 hsb와 같은 다른 색 공백 내에서 p5.js를 설정하고 채널을 탐색하는 데 사용하는 스케일을 구성 할 수 있습니다. 여기서 HSB 범위를 기본 설정 (0-255)보다는 Photoshop에서 익숙 할 수있는 값으로 HSB 범위를 설정했습니다.

canvas.drop(gotFile);

이 슈퍼 유용한 P5.js 기능을 사용하면 캔버스의 모든 파일 드롭 이벤트를 수신 할 수 있습니다. 파일 드롭 이벤트를 얻으면 우리는 gotfile () 올바른 유형인지 확인하고 사운드를 분석하기 시작합니다.

soundFile = new p5.SoundFile(file.data);

여기서 우리는 삭제 된 파일 데이터를 Soundfile. ...에 사운드 파일을 가지고있을 때 다음 코드를 사용합니다.

initound () 새로운 FFT 인스턴스를 설정하려면 (소리를 분석하기 위해)
Analysesound () 모든 프레임의 현재 소리를 분석하려면
getNewSoundDataValue () 쓰다 fft.getenergy () 모든 프레임은 우리에게 사운드의 현재 진폭을 제공합니다. 이것은 0에서 255까지의 기본 범위에서 0에서 1로 변환됩니다.

팁 : 스케일, 속도 및 색상과 같은 시각적 매개 변수와 같은 시각적 매개 변수로 데이터를 매핑 할 때 더 쉽게 사용할 수 있기 때문에 데이터를 0에서 1까지 변환하는 것이 도움이됩니다.

draw () 함수를 살펴 보겠습니다. 이 행은베이스 주파수의 현재 진폭 (0과 1 사이)을 요청하고 변수를 할당합니다. 미성병 ...에

var myDataVal = getNewSoundDataValue(“bass”)

Explore data visualisation with p5.js: Audio reactive ellipse — 몇 단계에서는 오디오 데이터로 구동되는 스케일 및 색상으로 오디오 반응 타원을 빌드 할 수 있습니다. (이미지 크레디트 : Mike Brondbjerg)

우리는 우리의 맞춤을 부른다 getDatahsbColor () 데이터 값을 색조, 채도 및 밝기와 별도로 매핑하고 색상을 반환하는 기능입니다. 데이터가 높을수록 색상이 색조 스펙트럼을 가로 질러 움직이는 색상과 더 밝아지고 더 밝아집니다.

var myDataColor = getDataHSBColor(myDataVal);

우리가 우리의 타원을 그릴 수 있기 전에 우리는 데이터 값으로 200 (px)을 곱하여 크기를 부여해야합니다. 따라서 가치가 높을수록 타원이 커집니다.

var myEllipseSize = 200 * myDataVal;

03. 오디오 데이터를 페인트 브러시로 사용하십시오

Explore data visualisation with p5.js: Paint with audio data — 한 줄의 코드 만 변경 - 배경 () 호출을 제거하면 오디오 데이터로 페인트 할 수 있습니다. (이미지 크레디트 : Mike Brondbjerg)

재미있는 약간의 경우, 배경() 그 일에 전화 해 무승부() 기능을 사용하면 사운드를 반응하는 타원을 사용하여 페인트 할 수 있습니다!

05. 스케치를 완료하십시오

Explore data visualisation with p5.js: Final sketch — 이것은 우리가 빌드 할 수있는 완성 된 스케치입니다 (이미지 크레디트 : Mike Brondbjerg)

하나의 데이터를 쉽게 드로잉 한 주파수는 훌륭하지만 이제 저음과 고음을위한 일련의 데이터 아크를 만듭니다. 우리는 또한 이전 값의 버퍼를 그리며 사운드의 모양을 더 잘 볼 수 있도록 도와줍니다.

방문 이 완성 된 스케치 버전 그것을 실행 한 다음 MP3를 버려라.

이제 화면의 중앙에서 일련의 호를 나타냅니다. 수평 호는베이스의 시각화이며 수직체는 MP3의 고음을 뽑습니다.

코드를보고, 설정, 로딩, 분석 및 데이터를 얻는 것이 많은 스케치와 동일하게 표시되므로 무시할 수 있습니다. 이전에 몇 가지 코드가 있으므로 몇 가지 주요 포인트를 골라 내십시오.

아크를 직접 그리는 대신에 무승부() 우리는 실제로 어떤 사용자 정의 클래스를 만들고 있습니다.

클래스 RadialArc {} 개별 아크의 데이터 값을 보유하고 아크를 그립니다.
radialarcs 클래스 {} 'Radialarc'인스턴스 모음을 관리합니다

각 클래스 정의에는 일부 키 값을 설정하고 클래스의 동작을 변경할 수있는 매개 변수를 전달하는 생성자가 있습니다. 지금 그들을 더 가까이서 보자.

radialarc {} 클래스 :

이것은 단일 데이터 값을 보유하고있는 클래스이며 한 쌍의 대칭 아크를 그립니다.

setValue () 과 getValue () 아크의 데이터를 가져오고 아크의 배열을 통해 데이터를 데이터 업데이트로 푸시 할 수 있습니다. redrawfromdata () 아크를 다시 계산하고 다시 칠하기 위해 호출됩니다.

DrawARC () 우리가 편리한 p5.js 기능을 부르는 곳입니다 호() ...에 호() 삼각법을 스스로하는 것보다 빠르지 만 우리는 자세, 크기, 그리고, 우리의 아크의 시작 및 끝 각도와 같은 몇 가지 값을 전달해야합니다.

그 각도는 학위가 아닌 '라디안'으로 측정됩니다. 라디안은 각도와 같지만 다른 스케일에서는 360 °가 2 x PI 라디안과 같습니다. p5.js는 유용한 내장 상수를 갖추고 있습니다 파이 , 반 _ 피 과 quarter_pi. 기타

radialarcs {} 클래스 :

이것은 우리의 배열을 만드는 관리 클래스입니다. radialarc {} 각자로 데이터를 이동하고 ARC의 호출을 통해 클래스를 최신 상태로 유지합니다. redrawfromdata () 함수.

초기화하려면 radialarcs () 고음과베이스의 수업, 봐 설정() ...에 우리가 두 가지를 만드는 것을 알 수 있습니다 radialarcs () 인스턴스 및 사용자 정의 매개 변수를 전달합니다.

이러한 매개 변수는 다음과 같습니다 : 호의 수, 내부 및 최 외곽 호의 크기, 시작 각도, 최대 선량 및 색상의 색조 범위. 이러한 사용자 정의 클래스를 만들면 코드를 재사용 할 수 있지만이 매개 변수를 전달하여 각 인스턴스를 개별적으로 만듭니다.

아크 객체가 초기화되면 모든 프레임이 호출됩니다. updateradialarcs () 과 DrawRadialArcs () 주요 P5 내에서 무승부() 기능은 애니메이션이 업데이트되고 움직이는 방식입니다.

06. 그것을 더 많이 가져 가라

Explore data visualisation with p5.js: Completed sketch — 완성 된 스케치, 오디오 파일에서베이스 및 고음을 시각화합니다. (이미지 크레디트 : Mike Brondbjerg)

우리는 여기서 많은 코드를 다루었지만 근본적으로 나는 당신이 우리가 어떻게 데이터를 가져 가고 있는지, 크기, 위치, 길이, 무게 및 색상과 같은 시각적 요소에 어떻게 적용하는지 알 수 있기를 바랍니다.

더 나아가려면 아크, 그룹 및 각도의 수로 놀아 라. 색상 범위를 변경하고 새 클래스를 만들어 다른 모양을 그릴 수 있습니다.

이 예에서는 끊임없이 흐르는 데이터를 사용했고 빠른 프레임 속도와 결합되어 애니메이션의 환상을 만듭니다. 그러나 모든 데이터가 아니며 더 천천히 업데이트 할 수있는 것은 아닙니다. 느린 데이터의 경우 현재 및 대상 크기 사이에서 모양의 애니메이션을 'tweening'만큼 매끄러운 애니메이션을 만들 수 있습니다.

다음 데이터 중심 애니메이션으로 행운을 빈다!

이 기사는 원래 문제 320에 게시되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 구매 320. 여기 또는 여기를 구독하십시오 ...에

관련 기사:

CSS로 SVG에 애니메이션을 추가하는 방법
데이터 추세는 앱 디자인 혁명을 설정합니다
12 Great CSS 애니메이션 리소스

p5.js로 데이터 시각화 탐색

왜 데이터를 사용하여 애니메이션을 구동 하시겠습니까?

데이터 구동 vs 데이터 시각화

우리는 무엇을 할 것입니까?

우리는 무엇을 배울 것인가?

파일은 어디에 있습니까?

01. 새로운 스케치를 시작하십시오

02. 오디오 데이터를 사용하여 첫 번째 스케치를 만듭니다

03. 오디오 데이터를 페인트 브러시로 사용하십시오

05. 스케치를 완료하십시오

radialarc {} 클래스 :

radialarcs {} 클래스 :

06. 그것을 더 많이 가져 가라

어떻게 - 가장 인기있는 기사

Apple Watch 앱을 만드는 방법

Adobe Illustrator에서의 관점 만들기

Marmoset Toolbag을 사용하여 VR에서 모델을 입력하십시오

iClone 7으로 차량 애니메이션 만들기

훌륭한 Poser Art

Photoshop에서 공상 공시 게임 설정 페인트

연필로 맛있는 텍스처를 만드는 방법

디지털 아트에서 화려한 느낌을 만듭니다

카테고리