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

Jan 27, 2026
วิธีการ
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 ที่ยอดเยี่ยม

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

วิธีทดสอบปฏิกิริยาไซต์และแอป

วิธีการ Jan 27, 2026

(เครดิตรูปภาพ: ในอนาคต) หากคุณต้องการทราบว�..

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

วิธีการ Jan 27, 2026

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

สาย Terminator คืออะไร

วิธีการ Jan 27, 2026

มีหลายแง่มุมของแสงที่คุณต้องพิจารณาเพื่อถ่า..

รุ่นสิ่งมีชีวิตโจรสลัดคนต่างด้าวใน Zbrush

วิธีการ Jan 27, 2026

เพื่อช่วยให้คุณเรียนรู้วิธีสร้างตัวละครโจรส..

วิธีการเตรียมกราฟิก Illustrator สำหรับ After Effects

วิธีการ Jan 27, 2026

ฉันไม่สามารถเริ่มบอกคุณได้กี่ครั้ง Adobe Illustrator ..

ต้นแบบการวาดภาพเชิงลบในสีน้ำ

วิธีการ Jan 27, 2026

ภาพวาดเชิงลบหมายถึงการวาดภาพ พื้นที่เชิงลบ ที่กำหนดรูปร่างที..

วิธีการสร้างมังงะด้วย Wild West Twist

วิธีการ Jan 27, 2026

Westerns เป็นสิ่งที่ฉันชอบอยู่เสมอ ในบทช่วยสอนนี้�..

วิธีการฝึกซ้อมผิวหนังในแบบ 3 มิติ

วิธีการ Jan 27, 2026

เป็นเวลานานแล้วตอนนี้ฉันติดอยู่ในร่องด้วยขอ..

หมวดหมู่