כל מבנה אריגה בהיסטוריה — טאבי, טוויל, אדרה, סלסלה — הוא תשובה לשאלה אחת: בשורה r ובעמודה c, האם חוט השתי עובר מעל חוט הערב? כשמבינים את זה, נול שלם נכנס לפונקציה של שורה אחת.
ארבעת המבנים באתר הם ארבע פונקציות (r, c) => boolean. זה כל ההבדל בין ג'ינס לסלסלה:
plain: (r, c) => (r + c) % 2 === 0 // מעל־מתחת קלאסי
twill: (r, c) => ((r + c) % 4) < 2 // אלכסון הג'ינס
herring: (r, c) => { // טוויל שמתהפך כל 8 חוטים
const z = Math.floor(c / 8) % 2 ? c : -c;
return (((r + z) % 4) + 4) % 4 < 2;
}
basket: (r, c) => (⌊r/2⌋ + ⌊c/2⌋) % 2 === 0 // זוגות חוטים ביחד
ספריית הדוגמאות בתחתית האתר לא מזויפת — כל swatch נארג חי מאותן פונקציות בדיוק, על קנבס מיני.
ההבדל בין "רשת פיקסלים" ל"טקסטיל" הוא שלושה דברים שקורים לכל חוט בודד:
roundRect עם פיקסל אוויר, כך שהאריג לא נאטם למשטח.האקראיות דטרמיניסטית (LCG עם זרע קבוע) — אותו בד ייראה אותו דבר בכל טעינה.
גרירה על הבד (או כפתור WEAVE) מוסיפה שורות לתור, ולולאת requestAnimationFrame מרוקנת אותו: כל פריים מוסיף 12 חוטים לשורה הנוכחית, וכשהיא מתמלאת — קליק נול קטן מ-WebAudio (אוסצילטור ריבועי, 50ms, נפתח רק אחרי מחוות משתמש). כל שורה זוכרת את המבנה והצבעים שבהם נארגה — אפשר להחליף באמצע ולקבל בד עם "היסטוריה".
כפתור הייצוא מרכיב קנבס 1000×1350 נסתר: רקע נייר, הבד עם צל רך (shadowBlur), וחתימה טיפוגרפית — שם המבנה, שם הצבעוניות ומספר השורות. toDataURL ומורידים PNG מוכן להדפסה.