สำรวจการสร้างภาพข้อมูลด้วย P5.js

Sep 17, 2025
วิธีการ
Explore data visualisation with p5.js
(เครดิตรูปภาพ: นิตยสารสุทธิ)

P5.JS เป็นการใช้งาน JavaScript ล่าสุดของการประมวลผลสภาพแวดล้อมการเข้ารหัสความคิดสร้างสรรค์ของเดสก์ท็อปที่มีชื่อเสียง ใช้พลังงานมากและใช้งานง่ายในการประมวลผลและวางลงในเบราว์เซอร์ของคุณ มันช่วยให้คุณวาดบนผืนผ้าใบ แต่ยังรวมเข้ากับหน้าเว็บของคุณช่วยให้ 'ร่าง' ของคุณตอบสนองและจัดการกับ DOM

p5.js ใช้ความปวดหัวของภาพเคลื่อนไหวจำนวนมากและ การสร้างภาพข้อมูล บนเว็บและทำให้ง่าย ๆ ง่ายต่อการเริ่มต้นใช้งานด้วยภาพเคลื่อนไหวโดยใช้สองฟังก์ชั่นที่เรียบง่าย: ติดตั้ง() และ วาด() .

แต่อย่าคิดว่าความเรียบง่ายนี้มีการ จำกัด เช่นเดียวกับที่คุณสามารถดำเนินการได้อย่างยาวนานด้วยการสร้างฟังก์ชั่นของคุณเองและขยายไปกับไลบรารีที่สร้างชุมชนหลายแห่ง

สำหรับเครื่องมือและคำแนะนำการออกแบบเว็บไซต์เพิ่มเติมดูรายการที่ยอดเยี่ยมของเรา เว็บโฮสติ้ง ผู้ให้บริการและให้แน่ใจว่าได้เลือกที่สมบูรณ์แบบ สร้างเว็บไซต์ และ การจัดเก็บเมฆ .

  • 6 วิธีในการสร้างการเข้ารหัสที่สร้างสรรค์

ทำไมต้องใช้ข้อมูลในการขับแอนิเมชัน

การสร้างการออกแบบและอนิเมชั่น 'ระบบ' หมายถึงการกำหนดชุดของกฎพารามิเตอร์และช่วงตัวแปรที่คุณสามารถป้อนข้อมูลที่แตกต่างกัน ความสามารถในการเล่นกับพารามิเตอร์ของระบบและข้อมูลที่แตกต่างกันหมายความว่าคุณสามารถสร้างรูปแบบเอาต์พุตที่ไม่ จำกัด ด้วยความสอดคล้องของวิธีการที่เป็นระบบ

ข้อมูลที่แตกต่างกันสามารถสร้างเอาต์พุตภาพที่หลากหลายโดยสิ้นเชิงและแหล่งข้อมูลที่มีพื้นผิวที่เคลื่อนไหวได้อย่างรวดเร็วเป็นเสียง นั่นคือสิ่งที่เราจะใช้ในภาพเคลื่อนไหวของเรา

Data-Direven 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 Editor ออนไลน์ หรือเพียงแค่รวมห้องสมุดในโครงการของคุณเอง ผ่านการดาวน์โหลดหรือ CDN .

01. เริ่มร่างใหม่

Explore data visualisation with p5.js: OpenProcessing

ตั้งค่าบัญชี OpenProcessing ฟรีเพื่อเริ่มต้นใช้งาน (เครดิตรูปภาพ: Mike Brondbjerg)

รับบัญชี OpenProcessing ฟรีและจากหน้าโปรไฟล์ของคุณคลิกสร้างร่าง จากนั้นจะสร้างภาพร่างพื้นฐานที่สุดที่มีฟังก์ชั่นในตัวของ P5.js สองประการ:

  1. ติดตั้ง() - การทำงานนี้เพียงครั้งเดียวและใช้ในการตั้งค่าผ้าใบใหม่
  2. วาด() - นี่คือที่ที่คุณใส่รหัสที่คุณต้องการเรียกใช้ทุกเฟรม

คุณจะสังเกตเห็นว่า พื้นหลัง() ถูกเรียกเพียงครั้งเดียวในการตั้งค่า สิ่งนี้จะล้างหน้าจอดังนั้นหากคุณต้องการล้างหน้าจอทุกเฟรมให้รวมถึงสิ่งนี้ที่จุดเริ่มต้นของ วาด() ฟังก์ชั่นด้วย

เล่นกับรหัสบางอย่างที่นี่โดยใช้ตัวอย่างบางส่วนที่คุณสามารถหาได้ บนไซต์ P5.js .

Book your tickets to Generate CSS now to save £50

จองตั๋วของคุณเพื่อสร้าง CSS ทันทีเพื่อประหยัด 50 ปอนด์ (เครดิตรูปภาพ: เก็ตตี้ / อนาคต)

02. สร้างร่างแรกโดยใช้ข้อมูลเสียง

Explore data visualisation with p5.js: First sketch

สร้างฟังก์ชั่นการตั้งค่าพื้นฐาน () และ Draw () ในภาพร่าง OpenProcessing ครั้งแรกของคุณ (เครดิตรูปภาพ: Mike Brondbjerg)

ไปที่ฉัน ตัวอย่างสเก็ตช์เริ่มต้น .

กดปุ่มเล่นแล้วคุณจะเห็นข้อความบางอย่างที่ขอให้คุณวางไฟล์ MP3 ลงบนผืนผ้าใบ รอสักครู่เพื่อให้เสร็จสิ้นการอัปโหลดแล้วคลิกผืนผ้าใบเพื่อเริ่มเล่น คุณควรเห็นวงรีติดตามเมาส์ของคุณซึ่งกำลังปรับขนาดและเปลี่ยนสีพร้อมกับแอมพลิจูดเบสในเพลงที่คุณอัปโหลด

รหัสส่วนใหญ่แสดงความคิดเห็น แต่ลองดูที่องค์ประกอบสำคัญสองสามประการ:

ขวาที่จุดเริ่มต้นของร่างข้างหน้า ติดตั้ง() เราได้สร้างตัวแปรทั่วโลกบางตัว

ภายใน ติดตั้ง() เรามีสองบรรทัดที่สำคัญ: 

colorMode(HSB,360,100,100);

colormode () ช่วยให้คุณตั้งค่า P5.J เพื่อทำงานภายในช่องว่างสีที่แตกต่างกันเช่น RGB และ HSB รวมถึงกำหนดค่าสเกลที่คุณใช้เพื่อนำทางช่อง ที่นี่เราตั้งค่าช่วง HSB ให้กับคุณค่าที่คุณอาจคุ้นเคยกับ Photoshop มากกว่าการตั้งค่าเริ่มต้น (0 ถึง 255) 

canvas.drop(gotFile);

ฟังก์ชั่น P5.js ที่มีประโยชน์มากที่สุดนี้ช่วยให้เราสามารถฟังเหตุการณ์ที่วางไฟล์บนผืนผ้าใบของเรา เมื่อเราได้รับเหตุการณ์การวางไฟล์เราจะโทร gotfile () หากต้องการตรวจสอบว่าเป็นประเภทที่ถูกต้องและเริ่มวิเคราะห์เสียงหรือไม่ 

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

ที่นี่เรากำลังเปลี่ยนข้อมูลไฟล์ที่ลดลงของเราให้เป็น Soundfile . เมื่อเรามีไฟล์เสียงเราใช้รหัสต่อไปนี้:

  1. initsound () ในการตั้งค่าอินสแตนซ์ FFT ใหม่ (เพื่อวิเคราะห์เสียง)
  2. Analysesound () เพื่อวิเคราะห์บล็อกเสียงปัจจุบันทุกเฟรม
  3. GetNewSoundDatavalue () ใช้ fft.getenergy () ทุกเฟรมเพื่อให้แอมพลิจูดปัจจุบันของเสียงปัจจุบัน สิ่งนี้จะถูกแปลงจากช่วงเริ่มต้นของ 0 เป็น 255 ถึง 0 ถึง 1

เคล็ดลับ: เป็นประโยชน์ในการแปลงข้อมูลของคุณเป็นช่วง 0 ถึง 1 เนื่องจากคุณสามารถใช้งานได้ง่ายขึ้นเมื่อทำการแมปข้อมูลไปยังพารามิเตอร์ภาพเช่นสเกลความเร็วและสี

ลองดูในฟังก์ชั่นการวาด () บรรทัดนี้ร้องขอแอมพลิจูดปัจจุบัน (ระหว่าง 0 ถึง 1) ของความถี่เบสและกำหนดให้ตัวแปร mydataval . 

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

ดูรหัสคุณจะเห็นการตั้งค่ามากขึ้นโหลดการวิเคราะห์และการรับข้อมูลเหมือนกับร่างสุดท้ายดังนั้นเราจึงสามารถเพิกเฉยต่อสิ่งนั้นได้ มีรหัสค่อนข้างน้อยที่นี่ดังนั้นเช่นเดียวกับก่อนหน้านี้ให้เลือกประเด็นสำคัญสองสามข้อ

แทนที่จะวาด Arcs โดยตรงใน วาด() เรากำลังสร้างคลาสที่กำหนดเองบางอย่าง:

  1. Class Radialarc {} ถือค่าข้อมูลของส่วนอาร์คแต่ละรายการและดึงส่วนโค้ง
  2. radialarcs ชั้น {} จัดการคอลเลกชันของเราใน 'Radialarc' อินสแตนซ์ของเรา

คำจำกัดความแต่ละคลาสมีตัวสร้างที่เราตั้งค่าสำคัญบางอย่างและผ่านพารามิเตอร์ที่ช่วยให้เราเปลี่ยนพฤติกรรมของคลาส เรามาดูกันมากขึ้นตอนนี้

radialarc {} คลาส:

นี่คือคลาสที่เก็บค่าข้อมูลเดียวและดึงส่วนโค้งสมมาตรคู่หนึ่ง

ตั้งค่า() และ GetValue () ช่วยให้เราสามารถรับข้อมูลเข้าและออกจากส่วนโค้งและกดข้อมูลผ่านอาร์เรย์ของ Arc ของเราเป็นข้อมูลอัปเดตข้อมูล redrawfromdata () ถูกเรียกให้คำนวณใหม่และวาดเส้นโค้งใหม่

DrawArc () เป็นที่ที่เราเรียกว่าฟังก์ชั่น P5.js ที่มีประโยชน์ อาร์ค () . อาร์ค () เร็วกว่าการทำตรีโกณมิติด้วยตนเอง แต่เราต้องผ่านค่าบางอย่างเช่นตำแหน่งขนาดและความสำคัญจุดเริ่มต้นและจุดสิ้นสุดสำหรับอาร์คของเรา

มุมนั้นวัดใน 'เรเดียน' มากกว่าองศา เรเดียนเป็นเหมือนองศา แต่ในระดับที่แตกต่างกัน: 360 °เหมือนกับ 2 x Pi Radians P5.JS มีค่าคงที่ในตัวที่มีประโยชน์สำหรับ pi , half_pi และ quarter_pi เป็นต้น

radialarcs {} คลาส:

นี่คือคลาสการจัดการที่สร้างอาร์เรย์ของเรา radialarc {} ชั้นเรียนและทำให้พวกเขาทันสมัยโดยการย้ายข้อมูลเข้าและออกจากแต่ละครั้งและเรียกอาร์ค redrawfromdata () ฟังก์ชั่น.

เพื่อเริ่มต้น Radialarcs () ชั้นเรียนสำหรับเสียงแหลมและเสียงเบสให้ดู ติดตั้ง() . คุณสามารถดูว่าเรากำลังสร้างสอง Radialarcs () อินสแตนซ์และส่งต่อในพารามิเตอร์ที่กำหนดเองของเรา

พารามิเตอร์เหล่านั้นคือ: จำนวนส่วนโค้งขนาดของส่วนโค้งภายในและภายนอกมุมเริ่มต้นน้ำหนักบรรทัดสูงสุดและช่วงสีของสี ด้วยการสร้างคลาสที่กำหนดเองเหล่านี้ช่วยให้เราสามารถนำรหัสของเรากลับมาใช้ซ้ำได้ แต่ยังทำให้แต่ละอินสแตนซ์โดยส่งผ่านพารามิเตอร์เหล่านี้

เมื่อมีการเริ่มต้นวัตถุอาร์คทุกเฟรมจะโทร updateradialarcs () และ Drawradialarcs () ภายใน P5 หลัก วาด() ฟังก์ชั่นซึ่งเป็นวิธีการอัปเดตและเคลื่อนไหวของภาพเคลื่อนไหว

06. นำมันไปอีก

Explore data visualisation with p5.js: Completed sketch

ร่างที่เสร็จสมบูรณ์ทำให้การมองเห็นเสียงเบสและเสียงแหลมในไฟล์เสียงของคุณ (เครดิตรูปภาพ: Mike Brondbjerg)

เราได้ครอบคลุมรหัสจำนวนมากที่นี่ แต่พื้นฐานฉันหวังว่าคุณจะเห็นว่าเรากำลังรับข้อมูลและใช้องค์ประกอบภาพเช่นขนาดตำแหน่งความยาวน้ำหนักและสี

เพื่อไปเพิ่มเติมเล่นกับจำนวนของอาร์คกลุ่มและมุม เปลี่ยนช่วงสีและสร้างคลาสใหม่เพื่อวาดรูปร่างที่แตกต่างกัน

ในตัวอย่างนี้เราใช้ข้อมูลที่ไหลอย่างต่อเนื่องและควบคู่ไปกับอัตราเฟรมที่รวดเร็วมันสร้างภาพลวงตาของภาพเคลื่อนไหว อย่างไรก็ตามข้อมูลบางอย่างไม่ใช่เช่นนั้นและสามารถอัปเดตช้ากว่า สำหรับข้อมูลที่ช้าลงคุณยังสามารถสร้างภาพเคลื่อนไหวที่ราบรื่นโดย 'Tweening' ภาพเคลื่อนไหวของรูปร่างของคุณระหว่างปัจจุบันและขนาดเป้าหมายของพวกเขา

ขอให้โชคดีกับแอนิเมชั่นที่ขับเคลื่อนด้วยข้อมูลต่อไปของคุณ!

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 320 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 320 ที่นี่หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

  • วิธีการเพิ่มแอนิเมชั่นเป็น SVG ด้วย CSS
  • แนวโน้มข้อมูลที่ตั้งไว้เพื่อปฏิวัติการออกแบบแอป
  • 12 ทรัพยากรแอนิเมชั่น CSS ที่ยอดเยี่ยม

วิธีการ - บทความยอดนิยม

สร้าง UI ควบคุมด้วยเสียง

วิธีการ Sep 17, 2025

เราได้เห็น API ใหม่จำนวนมากที่เพิ่มเข้ามาในเว็บในช่วงไม่กี่ปีที่ผ่า..

วิธีการบรรลุระดับในภาพวาดของคุณ

วิธีการ Sep 17, 2025

ในบทช่วยสอนนี้เราจะไปตามหลักการพื้นฐานบางอย่างที่จะช่วยสื่อสารแ�..

สร้างเอฟเฟกต์ข้อความนีออนที่เร่าร้อน

วิธีการ Sep 17, 2025

บ่อยครั้งที่มันเป็นผลกระทบที่ง่ายที่สุดที่ด..

สร้างปริมาณ CSS เฉพาะและเค้าโครงที่เฉพาะเจาะจง

วิธีการ Sep 17, 2025

ในการกวดวิชานี้เราจะดูวิธีการเปลี่ยนสไตล์ CSS �..

Sculpt กายวิภาคสมจริงใน ZBrush

วิธีการ Sep 17, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 หน้า 2 ..

10 เคล็ดลับสำหรับการสร้างแบบจำลองพื้นผิวแข็ง

วิธีการ Sep 17, 2025

ภาพลักษณ์ของเรือกลไฟที่ยิ่งใหญ่ของ Brunel ของ Brunel �..

สีเปียกในน้ำมัน

วิธีการ Sep 17, 2025

ภาพวาด 'Alla Prima' (นั่นคือจิตรกรรมเปียกบนเปียกในหนึ..

ฝึกฝนทักษะการวาดภาพชีวิตของคุณอย่างชาญฉลาด

วิธีการ Sep 17, 2025

ไม่มีอะไรที่ฉันรักดีกว่าการเป็นภาพวาดกลางแจ้งโลกรอบตัวฉัน แต่มัน�..

หมวดหมู่