בקצרה: עשינו קליפ של 3 דקות שבו להקה של דבורים מנגנת שיר אמיתי, וכל פריים בו הוא קוד ש-Claude כתב. בלי תוכנת עריכה, בלי מחולל תמונות, בלי אנימציה ביד. Claude ניתח את האודיו, צייר את הדבורים בקווים על canvas של HTML, סנכרן כל רגל וכל מיתר למוזיקה, ורנדר 5,544 פריימים. למטה: הקליפ, איך הוא נבנה שלב אחרי שלב, מה נכשל בדרך, ופרומפט להכין אחד משלכם.
לצפייה ב"The Honey Beats" ביוטיוב
הקרדיט הולך לנמרוד קמחי. הוא שלח לנו שורטס שבו להקה של עכבישים מנגנת שיר אמיתי, וכל פריים נעשה בקוד עם Claude. רצינו לראות אם אפשר לעשות את אותו דבר עם המוזיקה שלנו. דבורים, בלוז, קצת טכנו.
המוזיקה היא "Honey Beats" של stavjadam, שיר בלוז עם ביט אלקטרוני קבוע, שנעשה ב-Suno. בחרנו את השיר לפני ששורת אנימציה אחת נכתבה, כי הקליפ מונע מהאודיו. אין שיר, אין תנועה.
Claude לא שומע, אבל הוא יודע למדוד. הוא כתב סקריפט Python קצר (librosa) שחותך את השיר ל-30 פרוסות בשנייה, ומודד בכל פרוסה:
אחר כך הוא הריץ Whisper על השירה כדי לקבל את הזמן של כל מילה, כך שהמילים על המסך מופיעות בדיוק כשהן מושרות.
כל מה שרואים מצויר על ידי קובץ JavaScript אחד, על canvas בגודל 1080x1920. הדבורה היא עיגולים, אליפסות וקווים ישרים. לשש הרגליים יש inverse kinematics: Claude נותן לכל רגל מטרה (הסנר, מיתר בגיטרה, המיקרופון) והמתמטיקה מכופפת את הברך כדי להגיע אליה.
לכל כלי יש סצנה וצבע משלו: תופים בכתום, גיטרת רזונטור בוורוד, קונטרבס בירוק, מפוחית בכחול, שירה בצהוב. הנתונים מהשיר קובעים מה זז. מכת סנר מורידה רגל על הסנר. גיטרה חזקה מרעידה את המיתרים. מילה מושרת פותחת את הפה.
הזוהר הניאוני הוא טריק פשוט: מציירים את הקווים, ואז מדביקים מעליהם עותק מטושטש פעמיים.
דפדפן בלי מסך (Playwright) פתח את הדף וביקש ממנו לצייר את פריים 0, אחר כך פריים 1, וכך עד פריים 5,544. כל פריים נשמר כתמונה ועבר ל-ffmpeg, שחיבר אותם עם השיר לקובץ MP4. על מכונת ענן קטנה עם 2 ליבות זה לקח בערך 12 דקות.
הגרסה הראשונה הייתה קריקטורה חמודה: להקת דבורים שלמה על במה, עם זרקורים וקהל. זה עבד, אבל הפסק דין היה "נחמד, אבל לא מרשים". זה נראה כמו אנימציה לילדים.
הפתרון היה להעתיק את השפה החזותית של הרפרנס, לא רק את הרעיון: מסך כהה, קווים דקים זוהרים, שכבה טכנית (BPM, טיימקוד, מדי ערוצים, שם קובץ הקוד), וכלי אחד בכל פעם עם קאטים מהירים על הביט. אותו שיר, אותם נתוני סנכרון, תוצאה אחרת לגמרי.
השיעור: כשמראים ל-Claude רפרנס, מבקשים ממנו לתאר את הסגנון בפירוט לפני שהוא מתחיל לבנות.
יש לי שיר (MP3) והמילים שלו. תבנה קליפ אנכי בגודל 1080x1920 שבו כל פריים מצויר בקוד. 1) תכתוב סקריפט Python שמחלץ נתונים לכל פריים ב-30fps: ביטים, מכות קיק/סנר/היי האט, אנרגיה של בס/גיטרה/שירה, וחלקי השיר. תשתמש ב-Whisper לתזמון המילים. 2) תכתוב קובץ JavaScript אחד עם canvas ופונקציה render(frame) שמציירת את [הדמויות שלכם] כקווי ניאון על רשת כהה, כלי אחד בכל שוט, קאטים על הביט, וכל איבר זז לפי נתוני האודיו. 3) תרנדר את כל הפריימים עם Chromium בלי מסך ותחבר אותם עם ffmpeg. לפני שמרנדרים את כל הקליפ, תראה לי 5 פריימים מחלקים שונים של השיר.
עוד פרומפטים מוכנים יש בספריית הפרומפטים של Masterphub, ובספריית הסקילס יש סקילס ל-Claude שעושים חלקים מהתהליך הזה.