NộI Dung
- Tại sao sử dụng dữ liệu để thúc đẩy hoạt ảnh?
- Theo hướng dữ liệu so với trực quan hóa dữ liệu
- Chúng ta sẽ làm gì?
- Chúng ta sẽ học gì?
- Các tập tin ở đâu?
- 01. Bắt đầu một bản phác thảo mới
- 02. Tạo bản phác thảo đầu tiên bằng dữ liệu âm thanh
- 03. Sử dụng dữ liệu âm thanh làm cọ vẽ
- 05. Hoàn thành bản phác thảo của bạn
- Lớp RadialArc {}:
- Lớp RadialArcs {}:
- 06. Đưa nó đi xa hơn
p5.js là triển khai JavaScript gần đây nhất của Xử lý môi trường mã hóa sáng tạo trên máy tính để bàn nổi tiếng. Nó cần nhiều sức mạnh và sự dễ sử dụng của Xử lý và đưa nó vào trình duyệt của bạn. Nó giúp bạn vẽ trong canvas nhưng cũng tích hợp với trang web của bạn, cho phép 'bản phác thảo' của bạn phản hồi và thao tác với DOM.
p5.js loại bỏ rất nhiều vấn đề đau đầu về hình ảnh động và dữ liệu trực quan trên web và làm cho việc bắt đầu và chạy với hoạt ảnh trở nên cực kỳ đơn giản 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 hạn chế, vì bạn có thể mất quá trình Xử lý 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 do cộng đồng tạo ra.
Để biết thêm các công cụ và lời khuyên thiết kế web, hãy xem danh sách các nhà cung cấp dịch vụ lưu trữ web tuyệt vời của chúng tôi và đảm bảo chọn trình tạo trang web và lưu trữ đám mây hoàn hảo.
- 6 cách để bắt đầu viết mã sáng tạo
Tại sao sử dụng dữ liệu để thúc đẩy hoạt ảnh?
Tạo 'hệ thống' thiết kế và hoạt ảnh có nghĩa là xác định một tập hợp các quy tắc, thông số và phạm vi biến mà bạn có thể cung cấp dữ liệu khác nhau. Khả năng chơi với các tham số của một hệ thống và nhập các dữ liệu khác nhau có nghĩa là bạn có thể tạo ra các biến thể đầu ra vô hạn với tính nhất quán của một cách tiếp cận có hệ thống.
Các 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 của dữ liệu chuyển động nhanh, có kết cấu phong phú là âm thanh. Đó chính xác là những gì chúng tôi sẽ sử dụng trong hoạt ảnh của mình.
Theo hướng dữ liệu so với trực quan hóa dữ liệu
Hoạt ảnh hướng dữ liệu có phải là trực quan hóa dữ liệu không? Có và không. Hoạt ảnh của bạn sẽ là hình ảnh đại diện dữ liệu giống như hình ảnh trực quan nhưng mục đích khác với hình ảnh trực quan truyền thống. Trực quan hóa dữ liệu được sử dụng để cung cấp cho người xem cái nhìn sâu sắc về dữ liệu, do đó, đồ họa phục vụ cho việc truyền đạt dữ liệu.
Tuy nhiên, chúng tôi sẽ sử dụng dữ liệu như một 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 có kết cấu và thú vị, do đó, dữ liệu phục vụ cho đồ họa. Tất nhiên, một ngành được kết nối với nhau và thụ phấn chéo với ngành khác nhưng bạn nên nhận ra ý định của riêng mình khi sử dụng dữ liệu.
Chúng ta sẽ làm gì?
p5.js cho phép chúng tôi truy cập nhanh chóng và dễ dàng vào dữ liệu có được 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 (âm trầm và âm bổng) trong âm thanh khi nó phát lại và trực quan hóa '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 khi 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 nắm bắt 'bộ đệm' các điểm dữ liệu. Điều này sẽ cho phép chúng tôi 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 vòng cung đồng tâm từ tâm đến mép ngoài của màn hình. Độ dài của cung sẽ thể hiện 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 mình, chẳng hạn như độ đậm và màu của dòng.
Chúng ta sẽ họ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ạ các giá trị dữ liệu với các yếu tố trực quan 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 của hoạt ảnh và dữ liệu của chúng tôi và làm cho mã của chúng tôi có thể sử dụng lại.
Các tập tin ở đâu?
Các tệp cho hoạt ảnh được lưu trữ trên OpenProcessing, một nền tảng tuyệt vời để chia sẻ, khám phá và tạo bản phác thảo của người khác. Đó cũng là một nơi tuyệt vời để bạn viết mã.
Vì chúng tôi sẽ sử dụng dữ liệu âm thanh, bạn sẽ cần 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 trên OpenProcessing; đây là cách bản phác thảo của bạn sẽ trông như thế nào sau khi chúng tôi tải âm thanh, lấy dữ liệu và vẽ một 'hình dạng dữ liệu' đơn giản:
Và đây là cách mà 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 chỉnh sửa trực tuyến p5.js hoặc chỉ cần đưa thư viện vào dự án của riêng bạn thông qua tải xuống hoặc CDN.
01. Bắt đầu một bản phác thảo mới
Nhận tài khoản OpenProcessing miễn phí và từ trang hồ sơ của bạn, hãy nhấp vào Tạo bản phác thảo. Sau đó, thao tác này sẽ tạo ra những bản phác thảo cơ bản nhất có chứa hai trong số các hàm tích hợp của p5.js:
- thiết lập() - Thao tác này chỉ chạy một lần và được sử dụng để thiết lập canvas mới
- 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 rằng lý lịch() chỉ được gọi một lần trong thiết lập. Thao tác 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 ở đầu vẽ tranh() chức năng quá.
Hãy chơi 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 dữ liệu âm thanh
Đi tới bản phác thảo khởi động ví dụ của tôi.
Nhấn nút phát 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 canvas. Chờ một vài giây để nó hoàn tất quá trình tải lên và sau đó nhấp vào canvas để bắt đầu phát lại. Bạn sẽ thấy một hình elip, theo sau con chuột của bạn, nó đang điều chỉnh tỷ lệ và thay đổi màu sắc cùng với biên độ âm trầm trong bản nhạc bạn đã tải lên.
Phần lớn mã được nhận xét nhưng chúng ta hãy xem xét một vài yếu tố chính:
Ngay ở phần đầu của bản phác thảo, trước thiết lập(), chúng tôi đã tạo một số biến toàn cục.
Trong vòng 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ư định cấu hình tỷ lệ 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ị mà bạn có thể quen thuộc với Photoshop hơn là cài đặt mặc định (0 đến 255).
canvas.drop (gotFile);
Hàm p5.js siêu hữu ích này cho phép chúng tôi lắng nghe bất kỳ sự kiện rớt tệp nào trên canvas của chúng tôi. Khi chúng tôi nhận được một sự kiện rơi tệp, chúng tôi gọi gotFile () để kiểm tra xem đó có phải là loại chính xác hay không và bắt đầu phân tích âm thanh.
soundFile = new p5.SoundFile (file.data);
Ở đây, chúng tôi đang biến dữ liệu tệp bị bỏ của chúng tôi thành Tập tin âm thanh. Khi chúng tôi có tệp âm thanh, chúng tôi sử dụng mã sau:
- initSound () để thiết lập phiên bản FFT mới (để phân tích âm thanh)
- analyseSound () để phân tích khối âm thanh hiện tại mỗi khung hình
- getNewSoundDataValue () sử dụng fft.getEnergy () mỗi khung để cho chúng ta 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ó là 0 đến 255 thành 0 thành 1.
Mẹo: Sẽ rất hữu ích khi chuyển đổi dữ liệu của bạn thành phạm vi từ 0 đến 1 vì bạn có thể sử dụng dữ liệu đó dễ dàng hơn khi ánh xạ dữ liệu với các thông số trực quan như tỷ lệ, tốc độ và màu sắc.
Hãy xem trong 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ố âm trầm và gán cho nó biến myDataVal.
var myDataVal = getNewSoundDataValue (“bass”)
Chúng tôi gọi là tùy chỉnh của chúng tôi getDataHSBColor () hàm ánh xạ riêng giá trị dữ liệu của chúng ta với Hue, Saturation và Brightness và trả về cho chúng ta một màu sắc. Dữ liệu càng cao, màu càng di chuyển xa hơn trên phổ màu và màu càng sáng và bão hòa hơn.
var myDataColor = getDataHSBColor (myDataVal);
Trước khi có thể vẽ hình elip, chúng ta cần cung cấp kích thước cho nó, bằng cách nhân 200 (px) với giá trị dữ liệu của chúng ta. Vì vậy giá trị càng cao thì hình elip càng lớn.
var myEllipseSize = 200 * myDataVal;
03. Sử dụng dữ liệu âm thanh làm cọ vẽ
Để có một chút thú vị, hãy bình luận lý lịch() gọi trong vẽ tranh() và bạn có thể sử dụng hình elip phản ứng âm thanh của mình để vẽ!
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à điều tuyệt vời nhưng bây giờ chúng tôi sẽ tạo một loạt các vòng cung dữ liệu cho cả âm trầm và âm bổng. Chúng tôi cũng sẽ vẽ một vùng đệm của 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.
Truy cập phiên bản hoàn chỉnh này của bản phác thảo, chạy nó và sau đó thả một bản MP3 vào đó.
Bây giờ, bạn sẽ thấy một loạt các vòng cung xuất hiện từ giữa màn hình. Các vòng cung ngang là hình ảnh của âm trầm và các vòng cung dọc chọn ra âm bổng của MP3.
Nhìn vào mã, bạn sẽ thấy phần lớn quá trình thiết lập, tải, phân tích và lấy dữ liệu giống như bản phác thảo cuối cùng, vì vậy chúng tôi có thể bỏ qua điều đó. Có khá nhiều mã ở đây, vì vậy, như trước đây, chúng ta hãy chỉ chọn một vài điểm chính.
Thay vì vẽ các vòng cung trực tiếp trong vẽ tranh(), chúng tôi thực sự đang tạo một số lớp tùy chỉnh:
- lớp RadialArc {} giữ giá trị dữ liệu của từng cung và vẽ cung
- lớp RadialArcs {} quản lý bộ sưu tập các bản sao 'RadialArc' của chúng tôi
Mỗi định nghĩa lớp có một phương thức khởi tạo trong đó chúng tôi đang đặt một số giá trị chính và cũng truyền các tham số cho phép chúng tôi thay đổi hành vi của lớp. Bây giờ chúng ta hãy xem xét kỹ hơn chúng.
Lớp RadialArc {}:
Đây là lớp chứa một giá trị dữ liệu duy nhất và vẽ 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à ra khỏi một vòng cung và đẩy dữ liệu qua mảng vòng cung của chúng tôi khi dữ liệu cập nhật. redrawFromData () được gọi để tính toán lại và vẽ lại cung tròn.
drawArc () là nơi chúng tôi gọi là hàm p5.js tiện dụng vòng cung (). Arc () nhanh hơn so với việc tự lượng giác nhưng chúng ta cần chuyển cho nó một vài giá trị như vị trí, kích thước và quan trọng là góc bắt đầu và kết thúc cho cung của chúng ta.
Góc đó được đo bằng 'radian' chứ không phải độ. Radian giống như độ nhưng ở một tỷ lệ khác: 360 ° giống như 2 x pi radian. P5.js có các hằng số tích hợp hữu ích cho số Pi, HALF_PI và QUARTER_PI Vân vân.
Lớp RadialArcs {}:
Đây là một lớp quản lý tạo ra một mảng RadialArc {} và cập nhật chúng bằng cách di chuyển dữ liệu vào và ra khỏi từng lớp và gọi cung cấp redrawFromData () chức năng.
Để khởi tạo RadialArcs () các lớp cho âm bổng và âm trầm, hãy xem thiết lập(). Bạn có thể thấy rằng chúng tôi đang tạo ra hai RadialArcs () các phiên bản và cũng chuyển các thông số tùy chỉnh của chúng tôi.
Các thông số đó là: số vòng cung, kích thước của vòng cung trong và ngoài cùng, góc bắt đầu, trọng lượng đường tối đa và phạm vi màu của màu sắc. 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 mình nhưng cũng tạo ra từng cá thể riêng lẻ bằng cách chuyển cho chúng các tham số này.
Khi các đối tượng vòng cung được khởi tạo, mọi khung hình sẽ gọi updateRadialArcs () và drawRadialArcs () trong p5 chính vẽ tranh() , đó là cách hoạt ảnh cập nhật và di chuyển.
06. Đưa nó đi xa hơn
Chúng tôi đã đề cập đến 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, hãy thử với số lượng cung, nhóm và góc. Thay đổi các dải 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à cùng với tốc độ khung hình nhanh, nó tạo ra ảo ảnh về hoạt ảnh. Tuy nhiên, không phải dữ liệu nào cũng như vậy 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 ảnh mượt mà bằng cách 'chỉnh sửa' hoạt ảnh của các hình dạng của bạn giữa kích thước hiện tại và kích thước mục tiêu của chúng.
Chúc may mắn với hoạt ảnh theo hướng dữ liệu tiếp theo của bạn!
Bài báo này ban đầu được xuất bản trong số 320 của mạng lưới, tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web. Mua vấn đề 320 ở đây hoặc Đăng ký tại đây.
