React में Depth-Aware Boids एनिमेशन बनाना

स्टाइल के साथ साथ फ़्लॉकिंग (और पैरालैक्स!)

React में Depth-Aware Boids एनिमेशन बनाना: स्टाइल के साथ फ़्लॉकिंग (और पैरालैक्स!)

डिजिटल ओरनिथोलॉजिस्ट्स और उत्सुक React डेवलपर्स, आपका स्वागत है! 🪶 आज हम एक मजेदार और गहराई से देखने वाले प्रोजेक्ट पर चर्चा करेंगे जिसमें मैंने React और Framer Motion का उपयोग करके एक depth-aware, parallax-speed Boids एनिमेशन बनाया है। यह आपके आम <canvas> Boids से अलग है—यह फ़्लॉक ज़िंदा है, टच-संवेदनशील है, और आपके अगले मॉडर्न React प्रोजेक्ट के लिए पूरी तरह उपयुक्त है।

यह पोस्ट उन डेवलपर्स के लिए है जो एनिमेशन पसंद करते हैं, इंटरैक्टिविटी चाहते हैं, या अपनी लैंडिंग पेज को इस तरह से बनाना चाहते हैं कि वह कहे, "हाँ, मैं कोड कर सकता हूँ।"

Boids होते क्या हैं?

Boids छोटे सिम्युलेटेड जीव हैं जिन्हें Craig Reynolds ने 1986 में बनाया था जो पक्षियों, मछलियों और फ़्लॉक के व्यवहार की नकल करते हैं। जादू तीन नियमों से आता है:

  1. Separation: अपने पड़ोसी से दूर रहें।
  2. Alignment: अपने दोस्तों की दिशा में उड़ें।
  3. Cohesion: समूह के करीब रहें।

परिणाम? Emergent जीवन-समान समूह व्यवहार, जिसे क्रिएटिव कोडर्स बहुत पसंद करते हैं।

Boids इमेज
Boids इमेज

Boids के लिए React क्यों?

परंपरागत रूप से, Boids सिमुलेशन canvas या WebGL दुनिया में चलते हैं। लेकिन आज के सुपरचार्ज्ड UI और Framer Motion जैसे उपकरणों के साथ, हम DOM नोड्स को प्रभावी रूप से एनिमेट कर सकते हैं—और आपको React इंटीग्रेशन, इंटरैक्टिविटी, और स्क्रॉल पर आधारित इफेक्ट्स भी आसान मिलते हैं।

SEO टिप: यह तरीका उन वेबसाइट्स और ऐप्स के लिए बहुत अच्छा है जहाँ SEO और एक्सेसिबिलिटी मायने रखती हैं—अब आपकी सबसे बढ़िया विजुअल्स एक्सेस न होने वाले <canvas> में छुपी नहीं रहेंगी!

कॉम्पोनेंट स्ट्रक्चर

हम अपने फ्लॉकिंग लॉजिक को एक React कॉम्पोनेंट <FlockingAnimation /> के अंदर लपेटते हैं। कोड मॉड्यूलर है और props के जरिए कस्टमाइजेबल है, जो सपोर्ट करता है:

  • फ्लॉक साइज (स्वतः कैल्क्युलेट या फिक्स्ड)
  • मैक्स स्पीड और फोर्स
  • नियमों का वजन
  • आसान स्टाइलिंग के लिए कस्टम क्लासेज़

Props:

export type Props = {
  className?: string;
  initialCount?: number;
  maxSpeed?: number;
  maxForce?: number;
  weights?: Partial<Weights>;
};

Boid बिहेवियर: एल्गोरिद्म

प्रत्येक Boid एक क्लास इंस्टेंस है, जो अपनी पोजीशन, वेग, त्वरण और—सबसे महत्वपूर्ण—अपने डेप्थ को परालैक्स प्रभाव के लिए बनाए रखता है।

कोर लॉजिक वास्तविक जीवन की फ्लॉकिंग की नकल करता है:

flock(boids, weights, maxSpeed, maxForce) {
  // 1. Separation, alignment, cohesion वेक्टर की गणना करें
  // 2. उनका वजन लगाकर जोड़ें
  // 3. इसे त्वरण में लागू करें
  // 4. त्वरण को maxForce तक सीमित करें
}

हर नियम निकट के Boids को एक निश्चित सीमा में देखता है और एक स्टीयरिंग वेक्टर निकालता है:

  • Separation: बहुत करीब Boids से दूर धकेलता है।
  • Alignment: वेगों को औसत करके दिशा मिलाता है।
  • Cohesion: औसत स्थिति की ओर मोड़ता है।

डेप्थ और पैरालैक्स: विस्मय जोड़ना

प्रत्येक Boid को बनाए जाने पर एक यादृच्छिक डेप्थ (0 से 1 के बीच) मिलता है। डेप्थ तीन काम करता है:

  1. पैरालैक्स स्पीड: दूर के Boids धीमे चलते हैं, नजदीकी तेज।
  2. स्केल: फ़ोरग्राउंड के Boids बड़े होते हैं।
  3. अपारदर्शिता: गहरे Boids फेड होते हैं, नजदीकी बोल्ड।

यह अपडेट लूप में संभाला जाता है:

const speedFactor = 1 + (1 - this.depth) * PARALLAX_FACTOR;
const dtScalar = dtBase * speedFactor;

जब रेंडर होता है, तो हर Boid की स्केल और अपारदर्शिता उसकी डेप्थ के साथ मैप की जाती है, जिससे फ़्लॉक असली 3D जैसा दिखता है। यह VR का अनुभव है, बिना किसी सिरदर्द के।

इसे रिस्पॉन्सिव (और मज़ेदार) बनाना!

  • स्क्रॉल आधारित फीकेपन: useScroll() और useTransform() का उपयोग करते हुए, एनिमेशन स्क्रॉल के साथ फीका होता जाता है, ताकि यह ज़्यादा समय तक न दिखे।
  • पॉइंटर इंटरैक्शन: माउस या फिंगर से ड्रैग करें और कर्सर पर नया Boid बने। क्योंकि कौन फ़लॉक ओवरलॉर्ड की तरह महसूस नहीं करना चाहता?
  • यादृच्छिक फ़्लॉक वितरण: माउंट के समय, Boids यादृच्छिक केंद्रों से समूह बनकर प्राकृतिक तरीके से फैलते हैं।

Boid स्पॉनिंग का उदाहरण:

for (let j = 0; j < groupSize; j++) {
  const ang = Math.random() * Math.PI * 2;
  const rad = Math.random() * SPAWN_RADIUS;
  boidsRef.current.push(
    new Boid(center.x + Math.cos(ang) * rad, center.y + Math.sin(ang) * rad)
  );
}

ऑप्टिमाइजेशन्स और डेवलपर टिप्स

  • विज़िबिलिटी-अवेयर रेंडरिंग: हम एक Intersection Observer का उपयोग करते हैं ताकि जब कॉम्पोनेंट दिखाई न दे, तो अपडेट्स को रोक दिया जाए, जिससे CPU और बैटरी बचती है (आपके मोबाइल यूज़र्स या लैपटॉप के पंखे के लिए)।
  • प्रभावी स्टेट अपडेट्स: हम React स्टेट केवल तभी अपडेट करते हैं जब ज़रूरत होती है जिससे रेंडर कम हो।
  • मूवमेंट वैल्यूज: Framer Motion के motionValue और एनिमेटेड <motion.div> के उपयोग से हमें DOM में बिल्कुल चिकना ट्रांसफॉर्म मिलता है।

पूरा सोर्स कोड

पूरा, तुरंत उपयोग के लिए तैयार सोर्स कोड नीचे दिया गया है! (सिर्फ अपना Framer Motion और Tailwind CSS सेटअप लाएं।)

GitHub.

निष्कर्ष

React में फ्लॉकिंग Boids बनाना अजीब विकल्प लग सकता है, लेकिन आधुनिक एनिमेशन लाइब्रेरीज के साथ आपको मिलती है इंटरैक्टिविटी, परफ़ॉर्मेंस, और वह कीमती डेवलपर अनुभव—सब कुछ।

Categories