Thread by @elad_bezalel

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

1/ כשאני ו @noamokman היינו בצבא וניסינו לדחוף nodejs היה לנו משפט “אם זה ביט שיוצא מהמחשב אנחנו נעשה את זה“, לימים, כש FE הפך אצלי לעיסוק העיקרי שיניתי את המשפט ל “אם זה פיקסל על המסך, אני יכול לעשות את זה”
וזה מה שאני תמיד אומר למעצבים שאני עובד איתם.

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

3/ **הבנת הבעיה** - אם ננסה לנתח את התנועה של העץ נבין שמדובר במטוטלת,
באנגלית pendulum (שאלתי את גוגל) ורצתי לחפש pendulum javascript
כי הרי, אני אולי הראשון שמנסה לעשות עץ ריח מתנדנד, אבל בטח שלא הראשון לעשות מטוטלת.

4/ מצאתי דוגמה שאפשרה לשנות יחסית הרבה פרמטרים, אחד מהם היה num_link, ז״א כמה חלקים יש במטוטלת, ואז הבנתי שאני בעצם רוצה מטוטלת כפולה - חלק אחד יהיה החוט, חלק שני העץ (בהתחלה חשבנו שהחוט לא יזוז)
הדוגמה שמצאתי הייתה נחמדה אבל מהסתכלות על הקוד זה היה נראה מסורבל וכבד

5/ **פתרון קרוב** - אז עברתי לחפש double pendulum ומצאתי את המאמר הבא:
physicsandbox.com/projects/doubl…
מלא חישובים ומתמטיקה שאני לא מבין, אבל הכי חשוב, הקוד מסתכם ב90 שורות.
+ זה מאפשר אורך ומשקל שונה עבור כל חלק של המטוטלת, nice!

6/ הכלי הכי טוב שאני מכיר לPOCs מהירים הוא @codesandbox, גם סביבה נוחה ומוכרת וגם אני תמיד יכול לשלוח אתר זמין שמעודכן בלייב לקוד שאני כותב.

7/ העתקתי את הקוד לשם והתחלתי לשחק עם הפרמטרים כדי להבין איך זה עובד, בקוד יש פונ׳ בשם drawLine, במקומה היינו רוצים לצייר את העץ (היפה מאוד ש@IdanSidi הגאון עשה) אז החלפתי אותה בפונ׳ בשם drawImage (שמקבלת גם את זווית הסיבוב של התמונה)

8/ **להתאים אלינו** - אבל איך עשיתי ספציפית זאת לא הפואנטה, אלא - למצוא נקודות קטנות שקל להתלבש עליהן, איך ואיפה drawLine עובד? ואז להחליף בצעדים קטנים לעבר המטרה - drawImage, אה אוקיי צריך גם לסובב? angle between two points בגוגל, canvas rotate by angle וכו׳

9/ **לעשות את זה מדהים** - אחרי שהוכחנו יכולת, זה הזמן ליצירתיות, ״רצינו שהעץ יסתובב כשהוא מתנדנד״ - יש אפשרות בcss לסובב אלמנטים בעזרת transform (רץ על הgpu), בשביל זה העברתי את הקוד מcanvas לריאקט (גם ככה תכננתי, תהליך יחסית פשוט, יכול להרחיב אם יעניין)

10/ משם זה ניסוי ותהיה - להוסיף שכבה אחורית לעץ ולמצוא דרך לחבר ביניהם בשביל מראה 3d, למצוא את הערכים הנכונים לסיבוב על הציר לפי הזווית של העץ, לצייר את החוט לפי הזווית, להוסיף צל.
כל אחד מאלה הוא טכניקה שונה שלמדתי מהתנסויות בדיוק כאלה ואני מוצא את עצמי משתמש בהן יותר משחשבתי

11/ לסיכום, אני ממליץ לאמץ - אם זה פיקסל זה אפשרי - אם אתם חושבים שזה לא אפשרי, פינג מי, מבטיח לקחת את האתגר ולעזור לכם למצוא פתרון

@ShayHDavidson הציע שאפרסם גיסט עם ה useDoublePendulum hook שכתבתי

gist.github.com/EladBezalel/d6…