p5.js - कोडिंग और आर्ट बनाने के लिए ओपन सोर्स JavaScript लाइब्रेरी

 (p5js.org)
3 पॉइंट द्वारा GN⁺ 2024-08-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • p5.js एक मुफ़्त ओपन सोर्स JavaScript लाइब्रेरी है, जो वेब पर कोडिंग सीखना और आर्ट बनाना शुरू करने में मदद करती है
  • यह कलाकारों, डिज़ाइनरों, शुरुआती लोगों और शिक्षकों सहित व्यापक उपयोगकर्ता वर्ग के लिए है, और प्रोजेक्ट के केंद्र में एक समावेशी कम्युनिटी है
  • बिना सोचे-समझे नए फीचर बढ़ाने के बजाय, यह accessibility में सुधार करने वाले फीचर्स को अपवाद के रूप में स्वीकार करने की दिशा अपनाता है
  • Reference, उदाहरण, वेब एडिटर और इंटरैक्टिव परिचय वीडियो उपलब्ध हैं, जिनसे animation, audio और WebGL सीखना और बनाना तुरंत शुरू किया जा सकता है
  • डाउनलोड, डोनेट, कम्युनिटी में भागीदारी, और p5.js 2.0 beta देखने के रास्ते एक ही जगह पर जुड़े हैं, जिससे यह सीखने वालों और contributors दोनों के लिए एक entry point बनता है

कोडिंग और आर्ट के लिए p5.js

  • p5.js कोडिंग सीखने और आर्ट बनाने के लिए एक मुफ़्त ओपन सोर्स JavaScript लाइब्रेरी है
  • यह कलाकारों, डिज़ाइनरों, शुरुआती लोगों, शिक्षकों और अन्य विविध उपयोगकर्ताओं का स्वागत करता है
  • प्रोजेक्ट एक समावेशी और care-oriented कम्युनिटी को केंद्र में रखकर चलाया जाता है
    • इसके उदाहरणों में कोरिया में 50 वर्ष से अधिक आयु वालों के लिए Coding Club, और Nairobi तथा NYC की वर्कशॉप्स शामिल हैं
  • फीचर जोड़ने की नीति अपेक्षाकृत स्पष्ट है
    • accessibility बढ़ाने वाले फीचर्स को छोड़कर नए फीचर्स नहीं जोड़े जाते

सीखना और बनाना शुरू करने के रास्ते

  • Reference: p5.js लाइब्रेरी का रेफ़रेंस दस्तावेज़
  • Examples: उदाहरणों के माध्यम से p5.js सीखने की जगह
  • Start Coding: वेब पर सीधे कोडिंग शुरू करने के लिए p5.js एडिटर
  • interactive video: animation, audio, WebGL, accessibility और योगदान के तरीकों को कवर करने वाला इंटरैक्टिव परिचय वीडियो
  • Download Library: p5.js लाइब्रेरी डाउनलोड करें

कम्युनिटी और भागीदारी

  • Community: p5.js कम्युनिटी की गतिविधियाँ देखने का पेज
  • Donate: प्रोजेक्ट को सपोर्ट करने के लिए डोनेट करने का रास्ता
  • p5.js 2.0 beta: नए वर्ज़न p5.js 2.0 को देखने के लिए अलग beta साइट

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-08-04
Hacker News की टिप्पणियाँ

  • लगता है कि यह लिंक अभी HN पर आने की मुख्य वजह p5.js की नई वेबसाइट है।
    2023 में Sovereign Tech Fund ने p5.js टीम को “p5.js documentation structure और accessibility में सुधार” के लिए 450,000 euro की grant दी थी, और अभी जो नतीजे दिख रहे हैं वे उसी निवेश से निकले लगते हैं।
    मुझे व्यक्तिगत रूप से इसमें प्रगति दिखती है। साइट में navigation और search दोनों काफी आसान हो गए हैं, और जानकारी भी ज़्यादा उपयोगी लगती है। उदाहरण के लिए, screen reader के साथ p5.js editor और canvas इस्तेमाल करने के पुराने और नए docs की तुलना करना दिलचस्प है।
    [1] - STF announcement/progress - https://p5js.org/events/stf-2024/
    [2] - Using p5 with a screen reader (old version) - https://archive.p5js.org/learn/p5-screen-reader.html
    [3] - How to Use the p5.js Web Editor with a Screen Reader (new) - https://p5js.org/tutorials/p5js-with-screen-reader/
    [4] - Writing Accessible Canvas Descriptions (new) - https://p5js.org/tutorials/writing-accessible-canvas-descrip...

    • मैंने हाल ही में एक digital ad पूरा Processing में बनाया और फिर उसे p5.js में port किया, और p5.js ने काफी प्रगति की है, लेकिन काम करना अब भी Processing में कहीं आसान था।
      करीब 10 साल पहले भी मैंने Processing इस्तेमाल किया था, और तब भी वह बहुत आसान था, जबकि p5.js में bugs या missing implementations ढूँढना आसान था। लगभग उसी तरह port करना संभव था, लेकिन वह 1:1 नहीं था और कुछ API अलग से सीखनी पड़ीं।
      performance के मामले में p5.js, d3 या three.js के आसपास भी नहीं पहुँचता। सच कहूँ तो 2024 में educational tool के अलावा p5.js कितना meaningful है, इस पर मुझे संदेह है। आजकल web animation के लिए modern CSS3 और helper libraries का रास्ता ज़्यादा आसान लगता है, और free vector apps से CSS तक जाने वाला simple workflow भी संभव दिखता है।
      pixel-level calculation वाले काम में भी GPU को efficiently इस्तेमाल करने का कोई आसान तरीका नहीं है। इसलिए 450,000 euro की funding थोड़ा अजीब लगती है, खासकर जब यह किसी बहुत लोकप्रिय framework को नहीं मिली।
    • यह अच्छा है कि पुरानी साइट को https://archive.p5js.org/ पर देखते रहने की सुविधा रखी गई है।
      लेकिन बड़े स्क्रीन पर layout मुझे पसंद नहीं आया। लिंक किया गया tutorial [1] fixed-width, left-aligned paragraphs में है, इसलिए स्क्रीन का दायाँ आधा हिस्सा खाली रहता है। दूसरी तरफ reference docs overview [2] जैसे हिस्से पूरी स्क्रीन पर 4-column में फैल जाते हैं; browser window को आधी स्क्रीन जितना छोटा करें तो ठीक लगता है, लेकिन maximize करने पर पढ़ना मुश्किल हो जाता है।
      [1]: https://p5js.org/tutorials/p5js-with-screen-reader/
      [2]: https://p5js.org/reference/
    • कल JavaScript Weekly में भी इसे काफी प्रमुखता से दिखाया गया था।
      उसके लगभग 175,000 subscribers हैं, इसलिए वहाँ शामिल कोई लिंक कुछ घंटों बाद HN के front page पर दिखना आम बात है। इसका सीधा संबंध साबित करना लगभग असंभव है, लेकिन ecosystem में links के फैलने का यह एक मज़ेदार पहलू है।
    • पुरानी साइट भी अच्छी थी और पहले से mobile responsive थी।
      नई साइट mobile के लिए और बेहतर optimized है, और high-density screens पर ज़्यादा content आराम से पढ़ने लायक बनाती है। p5.js पर फिर से ध्यान जाना पूरी तरह जायज़ है, और इससे जुड़े Coding Train videos भी उतने ही देखने लायक हैं।

  • ChatGPT को P5.js की अच्छी समझ है, इसलिए अगर आप कहें, “एक P5 program लिखो जो sine wave draw करे और slider से उसकी phase adjust की जा सके,” तो यह तुरंत बना देता है।
    मैंने ChatGPT और P5.js की मदद से circumference पर 5 masses का balance सेट करने वाला एक design tool बनाया था, जिसका मकसद harmonic locking कम करने वाला rotary magnetic bow बनाना था।
    pentagon के vertices को drag करके देख सकते हैं: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
    3D print का परिणाम: https://www.instagram.com/p/Cr4ZXGztY27/

    • दिलचस्प है, यह किस काम आता है?
    • इससे यह कल्पना होती है कि LLM लगातार गेम के लिए नया content program करता रहे और इस तरह procedurally generated game बनाया जाए।

  • वाकई बहुत सुंदर वेबसाइट है। About section में यह बात हटाई गई दिखती है कि यह Processing के विचारों का विस्तार है, जो थोड़ा चौंकाने वाला है।
    शायद अब p5.js, Processing से ज़्यादा प्रसिद्ध हो गया है, या कम से कम पुराने Processing से ज़्यादा जाना जाने लगा है।

    • Ben Fry और Processing Foundation के बीच टकराव हुआ था, इसलिए यह राजनीतिक कारण भी हो सकता है।
      उनकी मुख्य शिकायतों में से एक यह थी कि p5.js project ने Processing Foundation पर नियंत्रण जमा लिया और Processing development को पीछे धकेल दिया।
    • मुझे mini-language के रूप में proce55ing सच में बहुत पसंद था।
      उस समय जब web page के अंदर canvas जैसी जगहों पर pixels को manipulate करके दिलचस्प visual experiments बनाना काफी मुश्किल होता था, यह एक बेहद तर्कसंगत tool था, और कम programming अनुभव वाले artists के लिए भी पढ़ने व इस्तेमाल करने में आसान था।

  • कॉलेज के दिनों में p5.js के साथ खेलते हुए मुझे बहुत मज़ा आया था, और पहले मैंने खुद एक छोटा cellular automaton भी बनाया था: https://ezhik.me/beyond184/
    संयोग से, वही काम जिसने मुझे पहली बार digital art में दिलचस्पी दिलाई थी, computing के लिए एक आनंदपूर्ण श्रद्धांजलि जैसा वह काम भी p5.js का इस्तेमाल करता था: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
    एक programmer के रूप में सबसे मुश्किल कामों में से एक है स्क्रीन पर पहला pixel रखने से पहले वाले boilerplate को पार करना, और p5.js इसे काफ़ी अच्छी तरह हल कर देता है, जिससे “creative coding” के रचनात्मक पहलू पर ज़्यादा ध्यान दे पाता हूँ
    “वास्तव में बड़े software development” के लिए मैं p5.js का इस्तेमाल नहीं करूँगा, लेकिन जब भी sketch बनाना हो तो यह सबसे पहले हाथ में आने वाला digital tool है

  • कुछ साल पहले Daniel Shiffman की वजह से इस library के बारे में पता चला
    उनके वीडियो programmer के रूप में आगे बढ़ने के लिए बेहद ज़रूरी थे

  • जल्दी game बनाने के लिए यह काफ़ी अच्छी library है
    मैंने p5.js में एक छोटा water simulation बनाया था, और p5 का आसानी से सीखा जा सकना मुझे सच में बहुत पसंद आया
    [1]: https://github.com/trungdq88/summer

  • मूल रूप से Java आधारित Processing ने कई libraries को प्रेरित किया
    आजकल ज़्यादातर लोकप्रिय भाषाओं में किसी न किसी स्तर पर compatible library मिल जाती है
    मैंने summer project के तौर पर Racket के लिए एक version लिखा था: https://docs.racket-lang.org/manual-sketching/
    सबसे बड़ी प्रेरणा Daniel Shiffman का YouTube चैनल “The Coding Train” था। दृश्य रूप से दिलचस्प समस्याएँ और algorithms चुनने की उनकी समझ बेहतरीन है, और उनका उत्साह भी बेमिसाल है
    https://thecodingtrain.com/

  • मैंने professional काम में भी p5.js का काफ़ी इस्तेमाल किया है, लेकिन जो लोग अब इसे इस्तेमाल करने वाले हैं, उनके लिए यह जानना अच्छा होगा कि foundation के सह-संस्थापकों में से एक और p5 की नींव बने मूल Processing language के निर्माता के साथ क्या हुआ था
    https://news.ycombinator.com/item?id=37760363
    अब जो कुछ जानता हूँ, उसे जानने के बाद Processing Foundation के काम को support करने पर अफ़सोस होता है

    • लगता है Processing Foundation का Mozilla Foundationकरण हो गया है
    • इसे देखकर बहुत सी बातें समझ में आती हैं
      इतने सारे high-performance graphics API के इस दौर में भी Processing/p5 कई सालों तक बिना किसी बड़े बदलाव के ठहरा हुआ सा क्यों लगा, यह समझ में आता है। दुखद अंत है

  • मुझे P5.js बहुत पसंद है। इसकी community OpenProcessing में हज़ारों शानदार काम हैं जिन्हें आसानी से देखा, fork किया और बदला जा सकता है
    मैं मुख्य रूप से Python इस्तेमाल करता हूँ, लेकिन P5.js programs में थोड़ा-थोड़ा बदलाव करते हुए JavaScript सीखने में मदद मिली
    [1] -- https://openprocessing.org/discover/#/trending

  • p5.js के playground में browser में ही code लिखा और चलाया जा सकता है, और account बनाकर code sketches को save भी किया जा सकता है
    https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH