← ClaudeAtlas

mf-generativelisted

אנימציה גנרטיבית בקוד - אלפי חלקיקים, flow fields, טקסט או לוגו שמתפרקים לחלקיקים ומתאחים, נחילים, קווי זרימה, צמיחה (L-systems), גלים, צורות שנושמות לפי המוזיקה. הפעל כשמבקשים "פרטיקלים", "חלקיקים", "גנרטיבי", "flow field", "אמנות גנרטיבית", "טקסט שמתפרק", "generative art", "particles", "audio reactive", "creative coding". חלק מ-Motion Forge; קרא קודם את motion-forge.
arielaizn/motion-forge-plugin · ★ 2 · Web & Frontend · score 63
Install: claude install-skill arielaizn/motion-forge-plugin
# mf-generative · מערכות שמציירות סרט דוגמה: `../motion-forge/studio/gallery/09_particles.html`. כלים: `noise2`, `fbm`, `hash`, `rng`, `FX.glow`, `layer`. ## הבעיה המרכזית: דטרמיניזם סימולציה רגילה זוכרת את הפריים הקודם, וזה שובר את חוזה הסרט. שלוש דרכים נכונות: 1. **פונקציה סגורה של t (עדיף).** מיקום כל חלקיק = נוסחה: `start + dir * t + curl(noise)(i, t)`. לחלקיק i יש זרע `hash(i)`. 2. **אינטגרציה עם checkpoints.** צעד קבוע (למשל 1/60), ומטמון של מצב כל 30 פריימים. פריים f מתחיל מה-checkpoint הקרוב ומתקדם. ב-`setup()` מחשבים את כל ה-checkpoints פעם אחת. 3. **נתיבים מחושבים מראש.** ב-`setup()` מריצים את כל הסימולציה ושומרים מיקומים לכל פריים (Float32Array). מתאים עד כ-5,000 חלקיקים × 300 פריימים. ## טקסט ולוגו לחלקיקים 1. ב-`setup()`: צייר את הטקסט לקנבס קטן, קרא פיקסלים (`getImageData`), דגום נקודות יעד מהפיקסלים המלאים (צעד 3 עד 6px). 2. לכל חלקיק: מיקום התחלה (פיזור, מעגל, מחוץ למסך), השהיה `hash(i) * .6`, ותנועה ליעד ב-spring או `E.snappy` עם רעש שדועך ככל שמתקרבים. 3. פירוק: הפוך את הכיוון, עם רוח (`noise2`) ו-fade. 4. ציור: `c.fillRect` קטנים מהירים יותר מ-`arc`. אלפי חלקיקים: קבץ לפי צבע, `globalCompositeOperation = 'lighter'` לזוהר. ## flow field זווית בכל נקודה = `noise2(x * s, y * s + t * .1) * TAU * 2`. קווים: לכל נקודת התחלה עקוב 40 עד 120 צעדים ושמור את הנתיב ב-`setup()`; בזמן הסרט חשוף אותם עם trim (`P.trim`). פסים עם שקיפות נמוכה ו-lighter יוצרים משי. ## תגובה למוזיקה הפסקול כתוב בקוד, אז אתה יודע מראש מתי כל ביט: `const B = tempo(bpm)`, ו-`B.puls