→ חזרה לקונסולה · BUILD LOG · DSS-92

איך נבנה סונאר

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

01 · CONCEPT

הרעיון: כל פרק בעסק הוא הד על המסך

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

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

02 · PHOSPHOR

זרחן שזוכר: שני קנבסים ושלושה חוקים

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

  1. לעולם לא מנקים. הזיכרון לא עובר clearRect.
  2. מדעיכים כל פריים. מציירים מלבן שחור שקוף במצב destination-out, שמוריד מכל פיקסל אחוז קבוע מהאלפא.
  3. מטביעים באור. כל מה שהאלומה נוגעת בו נצרב במצב lighter, שמחבר אור כמו שפופרת אמיתית.
// per frame:
buf.globalCompositeOperation = 'destination-out';
buf.fillStyle = `rgba(0,0,0,${1 - Math.pow(1 - 0.0082, dt/16.7)})`;
buf.fillRect(0, 0, w, h);          // the memory dims a little
buf.globalCompositeOperation = 'lighter';
// ...stamp beam, speckles, echoes — they glow, then linger

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

fade = 0.008

ימינה: המסך שוכח מהר. שמאלה: ההד חי כמעט סיבוב שלם, כמו בצגי P7 הישנים.

03 · SWEEP MATH

מתמטיקת הסריקה: פרוסה, לא קו

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

const d = (target - a0 + TAU) % TAU;   // angular distance, wrap-safe
if (d <= span) excite(target);         // the beam crossed it this frame

שני טריקים קטנים עושים את ההבדל:

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

04 · HOT COLOR

למה ירוק לוהט נהיה ציאן, ואיך מתקנים

בחיבור אור (lighter) הערוץ הירוק של rgb(92,255,171) מגיע לרוויה ראשון, ואז הכחול, והתוצאה היא כתם ציאן קר, שנראה דיגיטלי ושקרי. זרחן אמיתי מתחמם לכיוון צהבהב-לבן. הפתרון: ליבת ההד נצבעת בירוק חם rgb(178,255,150), וההילה נשארת ירוקה קרה. ככה כתם חם נשרף ללבן-צהבהב, כמו P1 אמיתי.

05 · CRT PIPELINE

צינור ה-CRT: תשע שכבות

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

06 · REAL DOM

הבליפים הם כפתורים אמיתיים

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

אותו עיקרון בכל האתר: כל הקופי הוא טקסט אמיתי בעמוד. הקנבס מצייר אווירה, לא תוכן.

07 · AMBER

משמעת ענבר

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

08 · RTL TYPE

עברית על מכשיר: טריק הרווח

הסטאק: עברית מ-IBM Plex Sans Hebrew, וכל האותיות הלטיניות והספרות נופלות ל-IBM Plex Mono. ככה כל מספר, כל n8n וכל WooCommerce נראים כמו קריאת מכשיר, בחינם.

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

@font-face{
  font-family:'IBM Plex Sans Hebrew';
  src:url('...-latin-400.woff2');
  unicode-range:U+0020,U+00A0;  /* the space glyph only */
}

שורה אחת של unicode-range, והעברית חזרה לנשום.

09 · RESPECT

כבוד למשתמש