Khám phá trực quan dữ liệu với p5.js

P5.js là triển khai JavaScript gần đây nhất của chế biến môi trường mã hóa sáng tạo máy tính để bàn nổi tiếng. Phải mất phần lớn sức mạnh và dễ sử dụng xử lý và đưa nó vào trình duyệt của bạn. Nó giúp bạn vẽ trong khung vẽ nhưng cũng tích hợp với trang web của bạn, cho phép 'phác thảo' của bạn phản hồi và thao tác với DOM.

p5.js. lấy đi rất nhiều đau đầu của hoạt hình và Trực quan hóa dữ liệu. Trên web và làm cho nó siêu đơn giản để đứng dậy và chạy với hình ảnh động bằng hai chức năng đơn giản: thiết lập() và vẽ tranh() .

Nhưng đừng cho rằng sự đơn giản này đang bị giới hạn, vì bạn có thể xử lý một chặng đường dài bằng cách tạo các chức năng của riêng mình và mở rộng nó với nhiều thư viện tạo cộng đồng.

Để biết thêm các công cụ và lời khuyên thiết kế web, hãy xem danh sách tuyệt vời của chúng tôi web hosting nhà cung cấp và chắc chắn chọn hoàn hảo người tạo ra trang web và lưu trữ đám mây .

• 6 cách để vào mã hóa sáng tạo

Tại sao nên sử dụng dữ liệu để thúc đẩy hoạt hình?

Tạo thiết kế và hoạt hình 'hệ thống' có nghĩa là xác định một tập hợp các quy tắc, tham số và phạm vi biến mà bạn có thể cung cấp dữ liệu khác nhau. Khả năng phát với các tham số của hệ thống và nhập dữ liệu khác nhau có nghĩa là bạn có thể tạo các biến thể đầu ra không giới hạn với tính nhất quán của cách tiếp cận có hệ thống.

Dữ liệu khác nhau có thể tạo ra các đầu ra hình ảnh hoàn toàn đa dạng và một nguồn tuyệt vời để di chuyển nhanh, dữ liệu kết cấu phong phú là âm thanh. Đó chính xác là những gì chúng ta sẽ sử dụng trong hoạt hình của chúng tôi.

Trực quan dữ liệu điều khiển dữ liệu vs

Là một hình ảnh động dựa trên dữ liệu một trực quan hóa dữ liệu? Có và không. Hoạt hình của bạn sẽ là một biểu diễn trực quan của dữ liệu giống như một hình ảnh trực quan nhưng mục đích khác với một hình ảnh truyền thống. Trực quan hóa dữ liệu được sử dụng để cung cấp cho người xem hiểu biết sâu sắc về dữ liệu, do đó đồ họa là dịch vụ liên lạc của dữ liệu.

Tuy nhiên, chúng tôi sẽ sử dụng dữ liệu dưới dạng hạt giống sáng tạo để cho phép chúng tôi tạo ra các biến thể đồ họa thú vị và kết cấu, do đó dữ liệu là dịch vụ của đồ họa. Tất nhiên, một môn học được kết nối với nhau và thụ phấn chéo với người khác nhưng thật tốt khi nhận ra ý định của riêng bạn khi sử dụng dữ liệu.

Chúng ta sẽ làm gì?

P5.js cung cấp cho chúng tôi quyền truy cập nhanh chóng và dễ dàng vào dữ liệu xuất phát từ việc phân tích tệp âm thanh (như MP3). Chúng tôi sẽ sử dụng p5.fft. Để phân tích các tần số khác nhau (bass và treble) trong âm thanh khi nó phát lại và hình dung 'năng lượng' hoặc biên độ của tần số đó.

Để chúng tôi có thể nhìn thấy 'hình dạng' của âm thanh như nó phát, chúng tôi không chỉ muốn hiển thị biên độ hiện tại của âm thanh mà còn chụp một 'bộ đệm' của các điểm dữ liệu. Điều này sẽ cho phép chúng ta hiển thị lịch sử di chuyển của các giá trị.

Để hiển thị các điểm dữ liệu của chúng tôi, chúng tôi sẽ tạo một loạt các cung đồng tâm từ trung tâm đến cạnh ngoài của màn hình. Độ dài của vòng cung sẽ đại diện cho biên độ của dữ liệu. Chúng tôi cũng sẽ sử dụng các mã hóa trực quan khác cho dữ liệu của chúng tôi, chẳng hạn như trọng lượng dòng và màu sắc.

Chúng ta sẽ học được gì?

Làm việc thông qua mã, chúng tôi sẽ bao gồm:

• Thiết lập một bản phác thảo P5 mới
• Đang tải và phân tích âm thanh
• Ánh xạ giá trị dữ liệu cho các yếu tố hình ảnh như kích thước, hình dạng và màu sắc
• Sử dụng các lớp để vẽ, duy trì trạng thái hoạt hình và dữ liệu của chúng tôi và làm cho mã của chúng tôi tái sử dụng.

Các tập tin ở đâu?

Các tập tin cho hình ảnh động được lưu trữ trên OpenProcessing. , Một nền tảng tuyệt vời để chia sẻ, khám phá và lấy lại những bản phác thảo của người khác. Đó là một nơi tuyệt vời để bạn mã hóa, quá.

Vì chúng tôi sẽ sử dụng dữ liệu âm thanh, bạn sẽ cần một tệp MP3 để kéo vào bản phác thảo. Chúng tôi sẽ thiết lập một bản phác thảo mới về Open Processing; Đây là cách trình phác thảo của bạn sẽ trông chờ một khi chúng tôi đã tải âm thanh, có dữ liệu và vẽ một 'hình dạng dữ liệu' đơn giản:

Và đây là cách bản phác thảo đã hoàn thành sẽ trông như thế nào:

Ngoài ra, bạn cũng có thể sử dụng Trình soạn thảo trực tuyến P5.js. hoặc chỉ bao gồm thư viện trong dự án của riêng bạn Qua tải xuống hoặc CDN .

01. Bắt đầu một bản phác thảo mới

Nhận một tài khoản OpenProcess miễn phí và, từ trang hồ sơ của bạn, nhấp vào Tạo một bản phác thảo. Điều này sau đó sẽ tạo ra các bản phác thảo cơ bản nhất có chứa hai hàm tích hợp sẵn của P5.JS:

1. thiết lập() - Điều này chỉ chạy một lần và được sử dụng để thiết lập một bức tranh mới
2. vẽ tranh() - Đây là nơi bạn đặt mã mà bạn muốn chạy mọi khung hình

Bạn sẽ nhận thấy điều đó lý lịch() chỉ được gọi một lần trong thiết lập. Điều này sẽ xóa màn hình, vì vậy nếu bạn muốn xóa màn hình mỗi khung hình, hãy bao gồm điều này khi bắt đầu vẽ tranh() chức năng quá.

Có một đoạn với một số mã ở đây, sử dụng một vài ví dụ bạn có thể tìm thấy Trên trang web P5.js .

02. Tạo bản phác thảo đầu tiên bằng cách sử dụng dữ liệu âm thanh

Đi đến của tôi Ví dụ Starter Sketch. .

Nhấn nút Play và bạn sẽ thấy một số văn bản yêu cầu bạn thả tệp MP3 vào khung vẽ. Đợi vài giây để kết thúc việc tải lên và sau đó nhấp vào khung vẽ để bắt đầu phát lại. Bạn sẽ thấy một hình elip, theo con chuột của bạn, đang mở rộng và thay đổi màu sắc cùng với biên độ bass trong âm nhạc mà bạn đã tải lên.

Phần lớn mã được nhận xét nhưng hãy xem một vài yếu tố chính:

Ngay khi bắt đầu bản phác thảo, trước thiết lập() , Chúng tôi đã tạo ra một số biến toàn cục.

Trong thiết lập() Chúng tôi có một vài dòng quan trọng:

colorMode(HSB,360,100,100);

chế độ màu() Cho phép bạn đặt p5.js để hoạt động trong các không gian màu khác nhau như RGB và HSB, cũng như cấu hình thang đo bạn sử dụng để điều hướng các kênh. Ở đây chúng tôi đã đặt phạm vi HSB thành các giá trị bạn có thể quen thuộc hơn với Photoshop thay vì cài đặt mặc định (0 đến 255).

canvas.drop(gotFile);

Chức năng P5.js siêu hữu ích này cho phép chúng tôi nghe bất kỳ sự kiện thả tệp nào trên khung vẽ của chúng tôi. Khi chúng tôi nhận được một sự kiện thả tập tin, chúng tôi gọi gotfile () Để kiểm tra xem đó có phải là loại chính xác và bắt đầu phân tích âm thanh không.

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

Ở đây chúng tôi đang biến dữ liệu tập tin bị rơi vào một Tập tin âm thanh . Khi chúng ta có tệp âm thanh, chúng tôi sử dụng đoạn mã sau:

1. initound () Để thiết lập một phiên bản FFT mới (để phân tích âm thanh)
2. analysesound () Để phân tích khối âm thanh hiện tại của mọi khung hình
3. getnewsounddatavalue () sử dụng fft.getenergy () Mỗi khung hình để cung cấp cho chúng tôi biên độ hiện tại của âm thanh. Điều này được chuyển đổi từ phạm vi mặc định của nó từ 0 đến 255 đến 0 đến 1.

Mẹo: Thật hữu ích khi chuyển đổi dữ liệu của bạn thành một phạm vi từ 0 đến 1 vì bạn có thể sử dụng nó dễ dàng hơn khi ánh xạ dữ liệu vào các tham số trực quan như tỷ lệ, tốc độ và màu sắc.

Hãy xem hàm Draw (). Dòng này yêu cầu biên độ hiện tại (từ 0 đến 1) của tần số bass và gán cho nó biến mydataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Chúng tôi gọi tùy chỉnh của chúng tôi getdatahsbcolor () Chức năng mà ánh xạ giá trị dữ liệu của chúng tôi riêng biệt với màu sắc, độ bão hòa và độ sáng và trả lại cho chúng tôi một màu. Dữ liệu càng cao, màu càng di chuyển qua quang phổ Huế và màu sáng hơn và bão hòa hơn.

var myDataColor = getDataHSBColor(myDataVal);

Trước khi chúng ta có thể vẽ hình elip của chúng ta, chúng ta cần cung cấp cho nó một kích thước, bằng cách nhân 200 (px) bằng giá trị dữ liệu của chúng tôi. Vì vậy, giá trị càng cao, hình elip càng lớn.

var myEllipseSize = 200 * myDataVal;

03. Sử dụng dữ liệu âm thanh như một cọ vẽ

Cho một chút niềm vui, bình luận ra lý lịch() Gọi trong vẽ tranh() Chức năng và bạn có thể sử dụng hình elip phản ứng âm thanh của mình để vẽ với!

05. Hoàn thành bản phác thảo của bạn

Vẽ một hình elip dữ liệu cho một tần số là tuyệt vời nhưng bây giờ chúng ta sẽ tạo một loạt các cung dữ liệu cho cả bass và treble. Chúng tôi cũng sẽ vẽ một bộ đệm các giá trị trước đó để giúp chúng tôi thấy rõ hơn hình dạng của âm thanh.

Chuyến thăm Phiên bản hoàn thành của bản phác thảo này , Chạy nó và sau đó thả mp3 trên đó.

Bây giờ bạn sẽ thấy một loạt các vòng cung sẽ nổi lên từ trung tâm của màn hình. Các vòng cung ngang là hình ảnh của âm trầm và những chiếc dọc chọn ra treble của mp3.

Nhìn vào mã, bạn sẽ thấy phần lớn các thiết lập, tải, phân tích và nhận dữ liệu giống như bản phác thảo cuối cùng, để chúng ta có thể bỏ qua điều đó. Có khá nhiều mã ở đây, như trước đây, hãy chọn ra một vài điểm chính.

Thay vì vẽ các cung trực tiếp vào vẽ tranh() , Chúng tôi thực sự đang tạo ra một số lớp tùy chỉnh:

1. lớp Radialarc {} Giữ giá trị dữ liệu của ARC và vẽ vòng cung
2. lớp radialarcs {} quản lý bộ sưu tập của chúng tôi về các trường hợp 'Radialarc' của chúng tôi

Mỗi định nghĩa lớp có hàm tạo trong đó chúng tôi đang đặt một số giá trị chính và cũng chuyển trong các tham số cho phép chúng tôi thay đổi hành vi của lớp. Chúng ta hãy xem xét kỹ hơn về họ bây giờ.

Lớp RadialArc {}:

Đây là lớp giữ một giá trị dữ liệu duy nhất và rút ra một cặp cung đối xứng.

đặt giá trị() và GetValue () Cho phép chúng tôi lấy dữ liệu vào và thoát khỏi vòng cung và đẩy dữ liệu thông qua mảng của ARC của chúng tôi dưới dạng các bản cập nhật dữ liệu. redrawfromdata () được gọi để tính toán lại và vẽ lại vòng cung.

Drawarc () là nơi chúng ta gọi hàm p5.js tiện dụng arc () . Arc () nhanh hơn so với việc tự giác nhưng chúng ta cần phải vượt qua nó một vài giá trị như vị trí, kích thước và, cực kỳ, một góc bắt đầu và góc kết thúc cho vòng cung của chúng tôi.

Góc đó được đo bằng 'Radian' chứ không phải bằng cấp. Radian giống như độ nhưng ở một thang đo khác: 360 ° giống như 2 x pi radian. P5.js có hằng số tích hợp hữu ích cho số Pi Cái gì Half_pi. và Quý_pi. Vân vân.

Lớp Radialarcs {}:

Đây là một lớp quản lý tạo ra một mảng của chúng tôi Radialarc {} các lớp học và giữ cho chúng cập nhật bằng cách di chuyển dữ liệu vào và ra khỏi mỗi và gọi cho ARC redrawfromdata () chức năng.

Để khởi tạo Radialarcs () Các lớp học cho Treble và Bass, có một cái nhìn vào thiết lập() . Bạn có thể thấy rằng chúng ta đang tạo ra hai Radialarcs () các trường hợp và cũng truyền trong các tham số tùy chỉnh của chúng tôi.

Những tham số đó là: Số lượng cung, kích thước của các vòng cung bên trong và ngoài cùng, góc khởi điểm, trọng lượng dòng tối đa và phạm vi màu sắc của màu. Bằng cách tạo các lớp tùy chỉnh này, nó cho phép chúng tôi sử dụng lại mã của chúng tôi nhưng cũng làm cho mỗi trường hợp cá nhân bằng cách chuyển chúng vào các tham số này.

Khi các đối tượng Arc được khởi tạo, mọi khung sẽ gọi Updateradialarcs () và Drawradialarcs () Trong P5 chính vẽ tranh() Chức năng, đó là cách hình ảnh động cập nhật và di chuyển.

06. Lấy thêm

Chúng tôi đã bao gồm rất nhiều mã ở đây nhưng về cơ bản, tôi hy vọng bạn có thể thấy cách chúng tôi lấy dữ liệu và áp dụng nó vào các yếu tố hình ảnh như kích thước, vị trí, chiều dài, trọng lượng và màu sắc.

Để đi xa hơn, chơi xung quanh với số lượng vòng cung, nhóm và góc. Thay đổi phạm vi màu và tạo các lớp mới để vẽ các hình dạng khác nhau.

Trong ví dụ này, chúng tôi đã sử dụng dữ liệu liên tục chảy và kết hợp với tốc độ khung hình nhanh, nó sẽ tạo ra ảo ảnh của hoạt hình. Tuy nhiên, không phải tất cả dữ liệu là như thế và có thể cập nhật chậm hơn. Đối với dữ liệu chậm hơn, bạn vẫn có thể tạo hoạt hình mượt mà bằng cách 'tweening' hoạt hình của các hình dạng của bạn giữa các kích thước hiện tại của chúng và mục tiêu của chúng.

Chúc may mắn với hình ảnh động dựa trên dữ liệu tiếp theo của bạn!

Bài viết này ban đầu được công bố trong số 320 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 320. ở đây hoặc Đăng ký tại đây .

Những bài viết liên quan:

• Cách thêm hình ảnh động vào SVG bằng CSS
• Xu hướng dữ liệu được thiết lập để cách mạng hóa thiết kế ứng dụng
• 12 tài nguyên hoạt hình CSS tuyệt vời