איך נבנה התיאטרון

1הבמה בשכבות

האתר כולו הוא במה אחת קבועה. המסגרת (הפרוסניום), הווילונות בצדדים, אורות הרצפה והקהל: כולם שכבות fixed שלא זזות לעולם. התוכן גולל ביניהן, כך שכל מה שקורה, קורה "על הבמה".

התפאורות מתחלפות כמו בתיאטרון אמיתי: כשעוברים מערכה, הרקע הנוכחי "עף" למעלה אל מאחורי הקלעים וחושף את הבא בתור, שכבר חיכה מאחוריו.

.backdrop.flown { transform: translateY(-103%) rotate(.4deg); }
/* לכל תפאורה יש z-index לפי הסדר; מי שסיימה את תפקידה עפה למעלה */

2ריגינג: בובה על מקל

כל בובה היא צירוף של שלושה חלקים: ציור SVG בקו עיפרון עבה, פס נייר דבק, ומקל ארטיק ארוך שיורד אל מתחת לבמה. השלושה עטופים באלמנט אחד שנקרא swing, וציר הסיבוב שלו יושב הרחק מתחת לבובה: בדיוק איפה שהיד של המפעיל הייתה אמורה להיות.

.swing { transform-origin: 50% 140%; }
/* מסובבים סביב נקודה שמתחת למסגרת = הבובה מתנדנדת כמו על יד אמיתית */

3פיזיקת הוובל

אין ספריית פיזיקה. יש שתי שורות של אוסצילטור הרמוני מרוסן, שרצות פעם אחת בפריים לכל בובה שנמצאת על המסך, ועוד גל סינוס איטי שנותן לה "נשימה" גם כשאף אחד לא נוגע בה:

v += (-k * angle - c * v) * dt;   // קפיץ + ריסון
angle += v * dt;
display = angle + sin(t * freq + phase) * idleAmp;  // נדנוד סרק עדין
swing.style.transform = `rotate(${display}deg)`;

ה"אישיות" של כל בובה היא רק שלושה מספרים אקראיים: תדר הסרק, המשרעת והפאזה. בגלל זה אף שתי בובות לא מתנדנדות אותו דבר, וכשכרטיס מערכה קופץ, הדחיפה שהוא מקבל (v += 60) גורמת לו להתייצב בדיוק כמו שלט שננעץ הרגע.

4מכניקת המסך והמסכים

5צבעי קרייון פרוצדורליים

אין אף קובץ תמונה באתר. כל תפאורה נצבעת ב-JavaScript משני מכחולים בלבד: קו גלי רוחבי (ככה ילד צובע ים), וספירלה מסתלסלת (ככה ילד צובע שמש, ענן או אלמוג). מחולל אקראיות עם seed קבוע דואג שהציור ייצא אותו ציור בכל טעינה.

6קולופון