שאפן א טיפחקייט-באַגעלייגטע בוידס אַנאַמיישאַן אין ריעקט: פֿלאַקן מיט סטיל (און פּאַראַלקס!)

ברוכים הבאים, דיגיטאַלע אָרניטאָלאָגיסטן און קיורייאַס ריעקט דעוועלאָפּערס! 🪶 היינט וועלן מיר נעמען א שפּאַסדיקן און טיפן טויך אין ווי איך האָב געבויט אַן טיפחקייט-באַגעלייגטן, פּאַראַלקס-גיכקייט בוידס אַנאַמיישאַן ניצענדיק ריעקט און פריימער מאָושאַן. דאָס איז ניט דיין דורכשניטלעך <canvas> בויד זופּ—דער פֿלעקט איז לעבעדיק, טאַץ-ריספּאָנסיוו, און גאַנץ אָרטהיים אין דיין קומענדיקן מאָדערן ריעקט פּראָיעקט.

דאָס פּאָסטן איז פֿאַר דעוועלאָפּערס וואָס ליבן אַנאַמיישאַנז, קרייען אינטעראַקטיוויישאַן, אָדער נאָר ווילן זייער לאַנדינג בלאַט צו פֿליסערן, "יא, איך קען קאָודן."

---

וואָס זיינען בוידס בכלל?

בוידס זענען קליינע סימולירטע קראַכטן דאָרשטעלן דורך קרייג ריינאָלדז אין 1986 צו נאָכמאַכן די באַוועגונג פֿון פויגל, פיש, און אַלע שאַץ וואָס פֿלעגט. די מאַגיש קומט פון דריי געזעצן:

1. אָפּטראַקענען: שטיי נישט צו נאָענט צו דיין נעבעך.
2. אַליינמאַנט: פֿלי ווי דיין פֿריינד פֿליִען.
3. קאָהיזיענס: בלייב נאָענט צום גרופע.

דער רעזולטאַט? עמערדזשענט לעבעדיק שווארמינג ביהייביער, וואָס קריעיטיווע קאָדערס ליבן איבעראַל.

---

פֿאַר וואָס ריעקט פֿאַר בוידס?

טრადיציאָנעל זענען בוידס סימולאַציעס אויף אַ קאַנוואַס אָדער וועבגל וועלט. אָבער מיט היינטיקן שאַרפע טולז ווי פריימער מאָושאַן, קען מען אַנאַמירן דום נאָדעס עפעקטיוו — און באַקומען גרינג ריעקט אינטיגראציע, אינטעראַקטיוויטעט, און אפילו סקראָול-באזירטע עפֿעקץ ווי באָנוס.

SEO עצה: דער אַפּראָוטשט וויז אַלץ גוט פֿאַר וועבסייץ און אַפּפּס ווו SEO און אַקסעסיביליטי זיינען וויכטיק—ניט מער פֿאַרצוימען די בעסטע וויזשאַולס אין אַן אומגעשרײַבענעם <canvas>!

---

קאָמפּאָנענט סטרוקטור

מיר פּאַקן אונדזער פֿלאַקינג לאָגיק אין אַ איין ריעקט קאָמפּאָנענט <FlockingAnimation />. דער קאָד איז מאָדולער און קאַסטאָמיזאַבאַל דורך פּראָפס, שטיצן:

• פֿלאַק גרייס (יאָא-קאַלקולירט אָדער פֿיקסירט)
• מאַקס געשווינדקייט און כוח
• רעגעל וואָגס
• קאַסטאַם קלאַסן פֿאַר גרינג סטיילינג

פּראָפּס:

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

---

בויד התנהגות: דער אַלגערידאַם

יעדער בויד איז אַ קלאַס אינסטאַנס, האַלטנדיק זײַן פּאָזיציע, גיכקייט, אַקסעלעראַציע, און—וואָהרצייטיק—זיין טיפחקייט פֿאַר פּאַראַלקס גוטסקייט.

די הויפּט לאָגיק אימיטירט אמת-לעבן פֿלאַקינג:

flock(boids, weights, maxSpeed, maxForce) {
  // 1. רעכענען אָפּטראַקעניש, אַליינמאַנט, קאָהיזיענס וועקטאָרן
  // 2. וואָגירן און צאַמען
  // 3. אַפּלאַקירן אויף אַקסעלעראַציע
  // 4. באַרענצן אַקסעלעראַציע צו מאַקסכאָף
}

יעדער כּלל קוקט אויף נאָענט בוידס אין אַ באַשטימטן רײך און רעכענען אַ שטירונג-וועקטאָר:

• אָפּטראַקעניש: דריקט אַוועק בוידס וואָס זײַנען צו נאָענט.
• אַליינמאַנט: דורכמיטגל צו גיכקייטן צו מאַכט ריכטונג.
• קאָהיזיענס: שטירט צו דורכמיטגל פּאָזיציע.

---

טיפחקייט און פּאַראַלקס: צוגעגעבן דעם וואו

יעדער בויד באַקומען א ראַנדאָם טיפחקייט ( צווישן 0 און 1) ביים שאַפֿן. טיפחקייט טוט דריי זאכן:

1. פּאַראַלקס גיכקייט: ווייַטערע בוידס באַוועגן שטערליכער, נאָענטערע שנעלער.
2. שקאַלע: בוידס אין פאָרגראָונד זענען גרעסער.
3. אָפּאַקטי: טיפערע בוידס זענען געבלענדעט, די לעבןערער יאָסט נאָך ברייט.

דאס ווערט האַנדלט אין דער אָפּדאַטע לופֿט:

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

ווען רענדערד, יעדער בוידס ס סקאַלע און אָפּאַקטי ווערן געמאַפּט צו זײַן טיפחקייט, אַזוי דער פֿלאַק קוקט גאָר אמתדיק 3D. דאָס איז אַלע די יממערסיאָן פון VR, אָן די קאָפּוועפּאַנז.

---

מאכן עס ריספּאָנסיוו (און שפּאַס!)

• סקראָל-באזירטער פֿייד: ניצן useScroll() און useTransform(), דער אַנאַמיישאַן פֿיידט ארויס ווען דו סקראָולסט, אַזוי עס איבערשטייט קיינמאָל נישט.
• פּוינטער אינטעראַקציע: דראג מיט דײַן מאַוז/פֿינגער און דו וועסט שאַפֿן אַ נײַעם בויד בײַ דיין קאַרזער. ווייל ווער וויל נישט פילן ווי דער פֿלאַק אָווערלארד?
• ראַנדאָמייזד פֿלאַק פאַרשפּרייטונג: ביים מאָונט, גרופּעס פון בוידס שפּרייטן זיך פון ראַנדאָם צענטערס, טאַקע נאַטירלעך.

בייַשפּיל פֿון בויד שאַפונג:

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)
  );
}

---

אָפּטימיזאַציעס און דעוועלאָפּער עצות

• וויזאַביליטי-באווירטע רענדערינג: מיר נוצן אַן אינטערסקשאַן אָבזערווער צו פּאַזירן דערהיטערונג ווען דער קאָמפּאָנענט איז נישט זעבאַר, שפּאָרנדיק CPU און באַטאַרייע פֿאַר דײַנע מאָביל ניצערס (אָדער דײַן לאַפּטאַפּ פאַנס).
• עפֿעקטיווע שטאַט אָפּדאַטעס: מיר טאָן שטאַט אַפּדייטס נאָר ווען נייטיק, האַלטנדיק רענדערינג צו אַ מינימום.
• מאָושאַן ווערט:ן: ניצן פריימער מאָושאַן'ס motionValue און אַנאַמייטעד <motion.div>ס, מיר באַקומען שמאַדעלע-גלאַט טראַנספֿאָרמס אין דום.

---

פֿול קוואַל קאָד

פֿינפֿט און גרייט צו אינטעגרירן לינק אונטן! (פאַרט אַליין דיין אייגן פריימער מאָושאַן און טיילווינד CSS סעטאַפּ.)

GitHub.

---

קאָנקולויזשאַן

בויען פֿלאַקינג בוידס אין ריעקט קען קלינגען ווי אַ מענדער אָפטשן, אָבער מיט מאָדערנע אַנאַמיישאַן ביבלעאָטעקעס, קריגסט דו אינטעראַקטיוו, פאָרשטעלונג, און דער טייַער דעוולאָפּער דערפאַרונג—אַלץ צוזאַמען.