Explore data visualisation with p5.js

Feb 2, 2026
कैसे करना है
Explore data visualisation with p5.js
(छवि क्रेडिट: नेट पत्रिका) [1 9]

P5.js प्रसिद्ध डेस्कटॉप क्रिएटिव कोडिंग पर्यावरण प्रसंस्करण के सबसे हालिया जावास्क्रिप्ट कार्यान्वयन है। यह प्रसंस्करण के उपयोग की अधिक शक्ति और आसानी लेता है और इसे आपके ब्राउज़र में डालता है। यह आपको कैनवास में आकर्षित करने में मदद करता है लेकिन आपके वेब पेज के साथ एकीकृत करता है, जिससे आपके 'स्केच' को डोम का जवाब देने और हेरफेर करने की अनुमति मिलती है।

P5.js एनीमेशन के सिरदर्द को दूर ले जाता है और [2 9] डेटा विज़ुअलाइजेशन

वेब पर और दो सरल कार्यों का उपयोग करके एनीमेशन के साथ उठने और चलाने के लिए इसे सुपर-सरल बनाता है: सेट अप() तथा () ।

लेकिन यह न मानें कि यह सादगी सीमित है, क्योंकि आप अपने स्वयं के कार्यों को बनाकर एक लंबा रास्ता तय कर सकते हैं और इसे कई समुदाय-निर्मित पुस्तकालयों के साथ विस्तारित कर सकते हैं।

अधिक वेब डिज़ाइन टूल्स और सलाह के लिए, शानदार की हमारी सूची देखें वेब होस्टिंग प्रदाता और सही चुनना सुनिश्चित करें वेबसाइट निर्माता तथा घन संग्रहण ।

    [4 9] [2 9] रचनात्मक कोडिंग में आने के 6 तरीके

एनीमेशन ड्राइव करने के लिए डेटा का उपयोग क्यों करें?

डिज़ाइन और एनीमेशन 'सिस्टम' बनाना मतलब है कि नियमों, पैरामीटर और परिवर्तनीय श्रेणियों के एक सेट को परिभाषित करना जिसमें आप अलग-अलग डेटा फ़ीड कर सकते हैं। सिस्टम के पैरामीटर के साथ खेलने की क्षमता और विभिन्न डेटा इनपुट करने का मतलब है कि आप व्यवस्थित दृष्टिकोण की स्थिरता के साथ असीमित आउटपुट विविधताएं बना सकते हैं।

अलग-अलग डेटा पूरी तरह से विविध दृश्य आउटपुट और तेजी से चलने का एक बड़ा स्रोत बना सकते हैं, समृद्ध बनावट डेटा ऑडियो है। यही वह है जो हम अपने एनीमेशन में उपयोग करने जा रहे हैं।

डेटा संचालित बनाम डेटा विज़ुअलाइजेशन

[6 9] Explore data visualisation with p5.js: Example

P5.js क्या कर सकते हैं के एक उदाहरण के रूप में; यहां कारण हैं। लोगो को एक अद्भुत रूप से डॉटी व्यवस्था में ऑडियो डेटा द्वारा विकृत कर दिया गया है (छवि क्रेडिट: नेट पत्रिका) [1 9]

क्या डेटा-संचालित एनीमेशन एक डेटा विज़ुअलाइज़ेशन है? हां और ना। आपकी एनीमेशन एक दृश्य की तरह डेटा का एक दृश्य प्रतिनिधित्व होगा लेकिन यह उद्देश्य पारंपरिक दृश्यता के लिए अलग है। दर्शकों को डेटा में अंतर्दृष्टि देने के लिए डेटा विज़ुअलाइज़ेशन का उपयोग किया जाता है, इसलिए ग्राफ़िक डेटा के संचार की सेवा में है।

हालांकि, हम एक रचनात्मक बीज के रूप में डेटा का उपयोग करेंगे ताकि हमें रोचक और टेक्स्टुरल ग्राफिकल विविधताएं उत्पन्न हो सकें, इसलिए डेटा ग्राफ़िक की सेवा में है। बेशक, एक अनुशासन एक दूसरे से जुड़ा हुआ है और दूसरे के साथ पार-परागण करता है लेकिन डेटा का उपयोग करते समय अपने स्वयं के इरादे को पहचानना अच्छा होता है।

हम क्या करने जा रहे हैं?

[9 6]

सांद्रिक चाप, स्क्रीन के केंद्र से उभरते हुए, ऑडियो आयाम द्वारा स्केल किए गए (छवि क्रेडिट: नेट पत्रिका) [1 9]

P5.JS हमें उस डेटा को त्वरित और आसान पहुंच प्रदान करता है जो ध्वनि फ़ाइल (जैसे एमपी 3) का विश्लेषण करने से आता है। हम उपयोग करेंगे [10 9] P5.FFT

ऑडियो के भीतर विभिन्न आवृत्तियों (बास और ट्रेबल) का विश्लेषण करने के लिए जैसा कि यह वापस चलाता है और उस आवृत्ति के 'ऊर्जा' या आयाम को दर्शाता है।

हमारे लिए ध्वनि के 'आकार' को देखने में सक्षम होने के लिए, हम न केवल ध्वनि के वर्तमान आयाम को दिखाना चाहते हैं बल्कि डेटा बिंदुओं के 'बफर' को कैप्चर करना चाहते हैं। यह हमें मूल्यों का एक चलती इतिहास दिखाने में सक्षम करेगा।

हमारे डेटा पॉइंट्स को दिखाने के लिए, हम केंद्र से कॉन्सेंट्रिक आर्क्स की एक श्रृंखला को स्क्रीन के बाहरी किनारे तक बनाएंगे। चाप की लंबाई डेटा के आयाम का प्रतिनिधित्व करेगी। हम अपने डेटा, जैसे लाइन वजन और रंग के लिए अन्य दृश्य एन्कोडिंग का भी उपयोग करेंगे।

हम क्या सीखेंगे?

कोड के माध्यम से काम करना, हम कवर करेंगे:

    [4 9] एक नया पी 5 स्केच स्थापित करना
[4 9] ध्वनि लोड करना और विश्लेषण करना [4 9] आकार, आकार और रंग जैसे दृश्य तत्वों को डेटा मान मानचित्रण [4 9] खींचने के लिए कक्षाओं का उपयोग करके, हमारे एनीमेशन और डेटा की स्थिति को बनाए रखें और हमारे कोड को पुन: प्रयोज्य बनाएं।

फाइलें कहां हैं?

एनीमेशन के लिए फाइलों पर होस्ट किया जाता है ओपनप्रोसेसिंग , अन्य लोगों के स्केच को साझा करने, खोजने और फॉर करने के लिए एक महान मंच। यह भी आपके लिए कोड करने के लिए एक महान जगह है।

जैसा कि हम ऑडियो डेटा का उपयोग करेंगे, आपको स्केच में खींचने के लिए एक एमपी 3 फ़ाइल की आवश्यकता होगी। हम ओपनप्रोसेसिंग पर एक नया स्केच स्थापित करेंगे; इस तरह आपके स्केच को ऑडियो लोड करने के बाद दिखेगा, डेटा मिला और एक साधारण 'डेटा आकार' खींचा जाएगा:

[4 9] () - यहां वह जगह है जहां आप कोड डालते हैं जिसे आप हर फ्रेम को चलाने के लिए चाहते हैं

आप देखेंगे कि पृष्ठभूमि() केवल एक बार सेट अप में कहा जाता है। यह स्क्रीन को साफ़ करता है, इसलिए यदि आप स्क्रीन को प्रत्येक फ्रेम को साफ़ करना चाहते हैं, तो इसे शुरुआत में शामिल करें () समारोह भी।

यहां कुछ उदाहरणों का उपयोग करके यहां कुछ कोड के साथ एक नाटक है जो आप पा सकते हैं [1 9 0] P5.js साइट पर

। [1 9 3]

Book your tickets to Generate CSS now to save £50

£ 50 को बचाने के लिए अभी सीएसएस उत्पन्न करने के लिए अपने टिकट बुक करें (छवि क्रेडिट: गेट्टी / भविष्य) [1 9]

02. ऑडियो डेटा का उपयोग करके पहले स्केच बनाएं

Explore data visualisation with p5.js: First sketch

अपने पहले ओपनप्रोसेसिंग स्केच में बुनियादी सेटअप () और ड्रा () फ़ंक्शन बनाएं (छवि क्रेडिट: माइक ब्रोंडबर्ज) [1 9]

मेरे के पास जाओ उदाहरण स्टार्टर स्केच ।

प्ले बटन दबाएं और आपको कुछ टेक्स्ट दिखाई देगा जो आपको कैनवास पर एक एमपी 3 फ़ाइल छोड़ने के लिए कहेंगे। अपलोड को समाप्त करने के लिए कुछ सेकंड प्रतीक्षा करें और फिर प्लेबैक शुरू करने के लिए कैनवास पर क्लिक करें। आपको अपने माउस के बाद एक अंडाकार देखना चाहिए, जो आपके द्वारा अपलोड किए गए संगीत में बास आयाम के साथ स्केलिंग और रंग बदल रहा है।

अधिकांश कोड पर टिप्पणी की गई है लेकिन आइए कुछ महत्वपूर्ण तत्व देखें:

नीचे की शुरुआत में, आगे से आगे सेट अप() , हमने कुछ वैश्विक चर बनाए हैं।

अंदर सेट अप() हमारे पास कुछ महत्वपूर्ण रेखाएं हैं: 

colorMode(HSB,360,100,100);

रंग मोड() आपको आरजीबी और एचएसबी जैसे विभिन्न रंग रिक्त स्थानों के भीतर काम करने के लिए P5.js सेट करने में सक्षम बनाता है, साथ ही चैनलों को नेविगेट करने के लिए उपयोग किए जाने वाले पैमाने को कॉन्फ़िगर भी करता है। यहां हमने एचएसबी श्रेणियों को मानों पर सेट किया है, आप डिफ़ॉल्ट सेटिंग (0 से 255) के बजाय फ़ोटोशॉप से ​​अधिक परिचित हो सकते हैं। 

canvas.drop(gotFile);

यह सुपर सहायक p5.js फ़ंक्शन हमें अपने कैनवास पर किसी भी फ़ाइल ड्रॉप घटनाओं को सुनने में सक्षम बनाता है। जब हमें एक फ़ाइल ड्रॉप इवेंट मिलता है, तो हम कॉल करते हैं गोटफाइल () यह जांचने के लिए कि क्या यह सही प्रकार है और ध्वनि का विश्लेषण करना शुरू करें। 

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

यहां हम अपने ड्रॉप किए गए फ़ाइल डेटा को चालू कर रहे हैं साउंडफाइल । जब हमारे पास ध्वनि फ़ाइल होती है, तो हम निम्न कोड का उपयोग करते हैं:

    [4 9] initsound () एक नया एफएफटी इंस्टेंस सेट करने के लिए (ध्वनि का विश्लेषण करने के लिए)
[4 9] विश्लेषण () हर फ्रेम ध्वनि के वर्तमान ब्लॉक का विश्लेषण करने के लिए [4 9] getnewsounddatavalue () उपयोग करने के लिए fft.getenergy () हर फ्रेम हमें ध्वनि का वर्तमान आयाम देने के लिए। यह 0 से 255 से 0 से 1 तक की डिफ़ॉल्ट सीमा से परिवर्तित हो जाता है।

युक्ति: यह आपके डेटा को 0 से 1 की सीमा में परिवर्तित करने में मददगार है क्योंकि आप स्केल, स्पीड और रंग जैसे दृश्य मानकों को डेटा मैप करते समय इसे अधिक आसानी से उपयोग कर सकते हैं।

आइए ड्रा () फ़ंक्शन में देखें। यह रेखा बास आवृत्ति के वर्तमान आयाम (0 और 1 के बीच) का अनुरोध करती है और इसे चर को असाइन करती है माईडातवल ।

[2 9 0]

[2 9 6] [2 9 7] [2 9 8]

कुछ चरणों में आप ऑडियो डेटा द्वारा संचालित पैमाने और रंग के साथ एक ऑडियो प्रतिक्रियाशील अंडाकार बना सकते हैं (छवि क्रेडिट: माइक ब्रोंडबर्ज) [1 9]

हम अपने कस्टम को बुलाते हैं getdatahsbcolor () फ़ंक्शन जो हमारे डेटा मान को अलग-अलग ह्यू, संतृप्ति और चमक के लिए अलग करता है और हमें एक रंग देता है। डेटा जितना अधिक होगा, आगे का रंग ह्यू स्पेक्ट्रम और उज्ज्वल और अधिक संतृप्त रंग में चलता है। 

var myDataColor = getDataHSBColor(myDataVal);

इससे पहले कि हम अपने दीर्घवृत्ते को आकर्षित कर सकें, हमें अपने डेटा वैल्यू द्वारा 200 (पीएक्स) को गुणा करके इसे आकार देने की आवश्यकता है। तो मूल्य जितना अधिक होगा, अंडाकार जितना बड़ा होगा। 

var myEllipseSize = 200 * myDataVal;

03. एक पेंटब्रश के रूप में ऑडियो डेटा का उपयोग करें

Explore data visualisation with p5.js: Paint with audio data

कोड की केवल एक पंक्ति बदलें - पृष्ठभूमि को हटाने () कॉल - और आप ऑडियो डेटा के साथ पेंट कर सकते हैं (छवि क्रेडिट: माइक ब्रोंडबर्ज) [1 9]

मज़ा के लिए, टिप्पणी करें पृष्ठभूमि() में कॉल करना () समारोह और आप अपने ध्वनि प्रतिक्रियाशील अंडाकार के साथ पेंट करने के लिए उपयोग कर सकते हैं!

05. अपना स्केच पूरा करें

Explore data visualisation with p5.js: Final sketch

यह पूरा स्केच है जिसे हम निर्माण करेंगे (छवि क्रेडिट: माइक ब्रोंडबर्ज) [1 9]

एक आवृत्ति के लिए एक डेटा एलिप्स ड्राइंग बहुत अच्छा है लेकिन अब हम बास और ट्रेबल दोनों के लिए डेटा आर्क की एक श्रृंखला तैयार करेंगे। हम ध्वनि के आकार को बेहतर ढंग से देखने में हमारी सहायता के लिए पिछले मूल्यों का बफर भी आकर्षित करेंगे।

यात्रा [36 9] यह स्केच का संस्करण समाप्त हुआ

, इसे चलाएं और फिर उस पर एक एमपी 3 छोड़ दें।

अब आप स्क्रीन के केंद्र से उभरते हुए आर्क की एक श्रृंखला देखेंगे। क्षैतिज चाप बास के दृश्यता हैं और लंबवत वाले एमपी 3 के ट्रेबल को चुनते हैं।

कोड को देखते हुए, आप सेट अप, लोडिंग, विश्लेषण और डेटा प्राप्त करना अंतिम स्केच के समान ही देखेंगे, इसलिए हम इसे अनदेखा कर सकते हैं। यहां बहुत सारे कोड हैं, पहले के रूप में, आइए बस कुछ महत्वपूर्ण बिंदुओं को चुनें।

इसके बजाय सीधे आर्क्स को चित्रित करने के () , हम वास्तव में कुछ कस्टम कक्षाएं बना रहे हैं:

    [4 9] कक्षा Radialarc {} व्यक्तिगत चाप का डेटा मान रखता है और चाप खींचता है
[4 9] कक्षा Radialarcs {} 'Radialarc' उदाहरणों के हमारे संग्रह का प्रबंधन करता है

प्रत्येक वर्ग परिभाषा में एक कन्स्ट्रक्टर होता है जिसमें हम कुछ महत्वपूर्ण मान सेट कर रहे हैं और पैरामीटर में भी गुजर रहे हैं जो हमें कक्षा के व्यवहार को बदलने में सक्षम बनाता है। चलो अब उन पर एक नजदीक देखो।

Radialarc {} कक्षा:

यह वह वर्ग है जिसमें एक डेटा मूल्य है और सममित arcs की एक जोड़ी खींचता है।

मूल्य ते करना() तथा GetValue () हमें एआरसी के अंदर और बाहर डेटा प्राप्त करने में सक्षम करें और डेटा अपडेट के रूप में हमारे आर्क के सरणी के माध्यम से डेटा को दबाएं। RedrawfromData () आर्क को पुनर्मूल्यांकन और पुनर्जीवित करने के लिए कहा जाता है।

Drawarc () वह जगह है जहां हम आसान p5.js फ़ंक्शन कहते हैं आर्क () । आर्क () त्रिकोणमिति को स्वयं करने से जल्दी है, लेकिन हमें इसे कुछ मानों को पारित करने की आवश्यकता है जैसे कि स्थिति, आकार और महत्वपूर्ण रूप से, हमारे चाप के लिए एक शुरुआत और अंत कोण।

उस कोण को डिग्री के बजाय 'रेडियंस' में मापा जाता है। रेडियंस डिग्री की तरह हैं लेकिन एक अलग पैमाने पर: 360 डिग्री 2 एक्स पीआई रेडियंस के समान है। P5.js के लिए उपयोगी अंतर्निहित स्थिरांक है अनुकरणीय , हाफ_पीआई तथा क्वार्टर_पीआई आदि।

Radialarcs {} कक्षा:

यह एक प्रबंधन वर्ग है जो हमारी एक सरणी बनाता है RadiaLarc {} कक्षाएं और उन्हें डेटा को और बाहर ले जाकर और चाप को कॉल करके उन्हें अद्यतित रखती हैं RedrawfromData () समारोह।

प्रारंभिक करने के लिए रेडियालर्स () ट्रेबल और बास के लिए कक्षाएं, एक नज़र डालें सेट अप() । आप देख सकते हैं कि हम दो बना रहे हैं रेडियालर्स () उदाहरण और हमारे कस्टम पैरामीटर में भी गुजर रहे हैं।

वे पैरामीटर हैं: आर्कों की संख्या, आंतरिक और बाहरी चापों के आकार, प्रारंभिक कोण, अधिकतम लाइन वजन और रंग की ह्यू रेंज। इन कस्टम कक्षाओं को बनाकर, यह हमें अपने कोड का पुन: उपयोग करने में सक्षम बनाता है बल्कि इन मानकों को पार करके प्रत्येक उदाहरण व्यक्ति को भी बना देता है।

एक बार आर्क ऑब्जेक्ट्स शुरू होने के बाद, हर फ्रेम कॉल करेगा UpdaterAdialarcs () तथा Drawradialarcs () मुख्य पी 5 के भीतर () फ़ंक्शन, एनीमेशन अपडेट और चाल कैसे है।

06. इसे आगे ले जाएं

Explore data visualisation with p5.js: Completed sketch

पूरा स्केच, अपनी ऑडियो फ़ाइल में बास और ट्रेबल को देखते हुए (छवि क्रेडिट: माइक ब्रोंडबर्ज) [1 9]

हमने यहां बहुत सारे कोड को कवर किया है लेकिन मूल रूप से मुझे आशा है कि आप देख सकते हैं कि हम डेटा कैसे ले रहे हैं और आकार, स्थिति, लंबाई, वजन और रंग जैसे दृश्य तत्वों को लागू कर रहे हैं।

आगे जाने के लिए, आर्क, समूहों और कोणों की संख्या के साथ खेलें। रंग श्रेणियों को बदलें और विभिन्न आकारों को आकर्षित करने के लिए नई कक्षाएं बनाएं।

इस उदाहरण में हमने डेटा का इस्तेमाल किया जो लगातार बह रहा है और, तेजी से फ्रेम दर के साथ, यह एनीमेशन का भ्रम पैदा करता है। हालांकि, सभी डेटा ऐसा नहीं है और अधिक धीरे-धीरे अपडेट कर सकते हैं। धीमे डेटा के लिए, आप अपने वर्तमान और उनके लक्षित आयामों के बीच अपने आकार के एनीमेशन को 'ट्वीनिंग' करके चिकनी एनीमेशन बना सकते हैं।

अपने अगले डेटा संचालित एनीमेशन के साथ शुभकामनाएँ!

यह लेख मूल रूप से अंक 320 में प्रकाशित किया गया था [2 9] जाल

, वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। मुद्दा 320 खरीदें यहाँ या [4 9 0] यहां सदस्यता लें ।

संबंधित आलेख:

    [4 9] [2 9] सीएसएस के साथ एसवीजी में एनीमेशन कैसे जोड़ें
[4 9] [2 9] डेटा प्रवृत्ति ऐप डिज़ाइन में क्रांतिकारी बदलाव करने के लिए सेट है [4 9] [2 9] 12 ग्रेट सीएसएस एनीमेशन संसाधन

कैसे करना है - सर्वाधिक लोकप्रिय लेख

एक माउस नियंत्रित लंबन पृष्ठभूमि प्रभाव बनाएं

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: पुनरुद रोहलिंगर) [1 9] लंबन स्क्र�..

10 things you didn't know you could do with Photoshop

कैसे करना है Feb 2, 2026

फ़ोटोशॉप पूरे भागों के योग से अधिक होने का एक आदर�..

Upgrade your textures in Substance Designer

कैसे करना है Feb 2, 2026

बंगी लीड पर्यावरण कलाकार डैनियल थिगर हमें एलेगो�..

ज़ब्रश के साथ बेहतर वीडीएम के लिए 4 कदम

कैसे करना है Feb 2, 2026

फ्रीलांस 3 डी कलाकार और वर्टेक्स पैनलिस्ट माया �..

15 fantasy portrait tips

कैसे करना है Feb 2, 2026

2 का पृष्ठ 1: पृष्ठ 1 [2 9] पृष्ठ 1 ..

आपकी साइट पर मजेदार सीएसएस पृष्ठभूमि कैसे जोड़ें

कैसे करना है Feb 2, 2026

समय एक वेब पेज पृष्ठभूमि एक छोटी टाइलिंग छवि थी - औ..

How to improve the performance of ecommerce sites

कैसे करना है Feb 2, 2026

Tammy Everts डिजाइन, प्रदर्शन और रूपांतरण दरो�..

Create a responsive dashboard with Figma

कैसे करना है Feb 2, 2026

Figma यूआई डिजाइनरों के लिए एक ग्राफिक्स उपकरण है। इसमें एक साधारण इंटरफ़ेस..

श्रेणियाँ