עבודה עם מטריצת הלדים ב Pico:ed - שיעור רביעי

 

הקדמה

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

מטריצת הלדים ב-PICO:ED נשלטת באמצעות שבב IS31FL3731 שמאפשר לנו לשלוט ברמת הבהירות של כל לד בנפרד, וכך ליצור תמונות עם עומק ופרטים. 

עבודה בסיסית עם מטריצת הלדים

הצגת טקסט

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

from picoed import display import time # הצגת טקסט סטטי display.scroll("ABC") time.sleep(2) # להמתין שתי שניות # הצגת טקסט נגלל display.scroll("Hello World") # הצגת ספרות כטקסט נגלל display.scroll(12345)

שליטה בבהירות

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

ניתן לשלוט בבהירות הטקסט באמצעות הפרמטר brightness שערכו יכול לנוע בין 0 (כבוי) ל-255 (בהירות מקסימלית):

from picoed import display # הצגת טקסט בבהירות נמוכה display.scroll("Dim :-)", brightness=5) # הצגת טקסט בבהירות בינונית display.scroll("Normal", brightness=80) # הצגת טקסט בבהירות גבוהה display.scroll("Bright", brightness=255)

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

ציור פיקסלים בודדים

כעת נעבור לשליטה מדויקת יותר - לשלוט בכל נקודת אור (פיקסל) בנפרד. זו היכולת שהופכת את מטריצת הלדים לכלי עוצמתי ליצירת תמונות ואנימציות מותאמות אישית.

מטריצת הלדים של ה-PICO:ED כוללת 17 עמודות (x=0 עד x=16) ו-7 שורות (y=0 עד y=6), כאשר הפינה השמאלית העליונה היא (0,0).

ניתן לשלוט בכל פיקסל (לד) במטריצה בנפרד באמצעות הפונקציה pixel():

from picoed import display import time # ננקה את המסך תחילה display.clear() # יצירת רשת "שחמט" פשוטה for y in range(display.height): for x in range(display.width): # רק פיקסלים במיקומים זוגיים יידלקו if (x + y) % 2 == 0: display.pixel(x, y, 30) time.sleep(2) # ננקה שוב את המסך display.clear() # יצירת רשת נקודות עם מרווחים for y in range(0, display.height, 2): # כל שורה שנייה for x in range(0, display.width, 2): # כל עמודה שנייה display.pixel(x, y, 50) time.sleep(2) # יצירת קווים אופקיים מקוטעים display.clear() for y in range(0, display.height, 2): # קווים אופקיים במרווחים for x in range(display.width): display.pixel(x, y, 30)

בדוגמה זו הדגמנו כיצד להדליק פיקסל בודד, וכיצד לצייר קווים אופקיים ואנכיים. אלו הן אבני הבניין של כל ציור שנרצה ליצור.

ציור מסגרת (מלבן ריק)

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

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

from picoed import display import time # ניקוי המסך לפני שמתחילים display.clear() # ציור מסגרת שמקיפה את כל המסך # ראשית, ניצור את הקווים האופקיים למעלה ולמטה for x in range(display.width): display.pixel(x, 0, 50) # קו עליון - בשורה הראשונה (y=0) display.pixel(x, display.height - 1, 50) # קו תחתון - בשורה האחרונה (y=6) # כעת, ניצור את הקווים האנכיים משמאל ומימין for y in range(display.height): display.pixel(0, y, 50) # קו שמאלי - בעמודה הראשונה (x=0) display.pixel(display.width - 1, y, 50) # קו ימני - בעמודה האחרונה (x=16) # השאר את המסגרת מוצגת למשך 3 שניות כדי שנוכל לראות את התוצאה time.sleep(3)

שימו לב איך אנחנו משתמשים ב - display.width ו- display.height כדי לדעת את הגודל המדויק של המסך. זה עוזר לנו לגשת בדיוק לשורה ולעמודה האחרונות. שיטה זו מבטיחה שהקוד שלנו יעבוד גם אם בעתיד יהיו גרסאות של ה-PICO:ED עם מסכים בגדלים שונים.

עבודה עם תמונות מוכנות

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

השימוש בתמונות המוכנות הוא פשוט מאוד - פשוט מייבאים את מחלקת ה-Image ומשתמשים ב - display.show() להצגת התמונה הרצויה. זה מאפשר לנו להציג איקונים ואימוג'ים פופולריים בקלות ובמהירות.

from picoed import display, Image import time # הצגת פנים שמחות - אימוג'י חיוך קלאסי display.show(Image.HAPPY) time.sleep(1) # השאר את התמונה למשך שנייה # הצגת לב - סמל אוניברסלי לאהבה display.show(Image.HEART) time.sleep(1) # הצגת פנים עצובות - כשמשהו לא עובד כמו שצריך... display.show(Image.SAD) time.sleep(1) # הצגת וי (סימן "כן") - לציון הצלחה display.show(Image.YES) time.sleep(1) # הצגת איקס (סימן "לא") - לציון שגיאה או כישלון display.show(Image.NO)

ה - Pico:ed כולל מגוון רחב של תמונות מוכנות כמו: NO, SQUARE, RECTANGLE, RHOMBUS, TARGET, CHESSBOARD, HAPPY, SAD, YES, HEART, TRIANGLE, ועוד רבים. נסו לשחק עם האפשרויות השונות כדי לגלות את כל התמונות המובנות.

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

יצירת תמונות מותאמות אישית

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

הדרך ליצור תמונה מותאמת אישית היא באמצעות שימוש במחלקת Image עם מחרוזת המתארת את רמת הבהירות של כל פיקסל. המספרים 0-9 מייצגים רמות בהירות שונות, כאשר 0 הוא כבוי ו-9 הוא הבהיר ביותר. התבנית היא 17 ספרות לכל שורה (כי יש 17 עמודות), עם ':' בסוף כל שורה.

from picoed import display, Image import time # יצירת תמונה מותאמת אישית - חץ שמצביע ימינה # כל שורה מייצגת שורה במטריצת הלדים (סה"כ 7 שורות) # כל ספרה מייצגת את רמת הבהירות של פיקסל אחד arrow_right = Image( '00000000900000000:' # שורה ראשונה (עליונה) '00000000990000000:' # שורה שנייה '00000000999000000:' # שורה שלישית '99999999999900000:' # שורה רביעית (אמצעית) - הקו האופקי של החץ '00000000999000000:' # שורה חמישית '00000000990000000:' # שורה שישית '00000000900000000:' # שורה שביעית (תחתונה) ) # הצגת החץ שיצרנו display.show(arrow_right) time.sleep(2) # השאר את החץ מוצג למשך שתי שניות # יצירת תמונה נוספת - פנים מחייכות פשוטה # שימו לב לדרך שבה אנחנו יוצרים עיניים ו"חיוך" smile = Image( '00000000000000000:' # שורה ריקה למעלה '00099000000990000:' # העיניים - שני בלוקים של פיקסלים בהירים '00099000000990000:' # המשך העיניים '00000000000000000:' # שורה ריקה באמצע '00900000000009000:' # קצוות הפה '00099999999990000:' # הפה - קו מעוקל כלפי מעלה '00000000000000000:' # שורה ריקה בתחתית ) # הצגת הפנים המחייכות שיצרנו display.show(smile)

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

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

יצירת אנימציות פשוטות

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

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

from picoed import display import time # אנימציה של כוכב מורכב מ-X ו-+ עם קווים פרופורציונליים while True: # שלב 1: ריק לחלוטין display.clear() time.sleep(0.3) # שלב 2: נקודה קטנה במרכז display.clear() display.pixel(8, 3, 60) time.sleep(0.2) # שלב 3: כוכב X קטן display.clear() display.pixel(8, 3, 80) # מרכז display.pixel(7, 2, 50) # אלכסונים display.pixel(9, 2, 50) display.pixel(7, 4, 50) display.pixel(9, 4, 50) time.sleep(0.2) # שלב 4: כוכב בינוני - X ו-+ פרופורציונליים display.clear() # נקודה מרכזית display.pixel(8, 3, 100) # אלכסונים (X) for i in range(1, 3): display.pixel(8-i, 3-i, 70) display.pixel(8+i, 3-i, 70) display.pixel(8-i, 3+i, 70) display.pixel(8+i, 3+i, 70) # קווים + באורך פרופורציונלי for i in range(5, 12): # x מ-5 עד 11 = 7 פיקסלים if i != 8: display.pixel(i, 3, 70) for i in range(0, 7): # y מ-0 עד 6 = 7 פיקסלים if i != 3: display.pixel(8, i, 70) time.sleep(0.2) # שלב 5: כוכב גדול display.clear() # נקודה מרכזית display.pixel(8, 3, 100) # אלכסונים ארוכים (X) for i in range(1, 5): if 8-i >= 0 and 3-i >= 0: display.pixel(8-i, 3-i, 80) if 8+i < display.width and 3-i >= 0: display.pixel(8+i, 3-i, 80) if 8-i >= 0 and 3+i < display.height: display.pixel(8-i, 3+i, 80) if 8+i < display.width and 3+i < display.height: display.pixel(8+i, 3+i, 80) # קווים + פרופורציונליים בגודל for i in range(4, 13): # x מ-4 עד 12 = 9 פיקסלים if i != 8: display.pixel(i, 3, 80) for i in range(0, 7): # y מ-0 עד 6 = 7 פיקסלים if i != 3: display.pixel(8, i, 80) time.sleep(0.3) # שלב 6: חזרה לכוכב בינוני display.clear() # נקודה מרכזית display.pixel(8, 3, 100) # אלכסונים (X) for i in range(1, 3): display.pixel(8-i, 3-i, 70) display.pixel(8+i, 3-i, 70) display.pixel(8-i, 3+i, 70) display.pixel(8+i, 3+i, 70) # קווים + באורך פרופורציונלי for i in range(5, 12): # x מ-5 עד 11 = 7 פיקסלים if i != 8: display.pixel(i, 3, 70) for i in range(0, 7): # y מ-0 עד 6 = 7 פיקסלים if i != 3: display.pixel(8, i, 70) time.sleep(0.2) # שלב 7: כוכב X קטן display.clear() display.pixel(8, 3, 80) # מרכז display.pixel(7, 2, 50) # אלכסונים display.pixel(9, 2, 50) display.pixel(7, 4, 50) display.pixel(9, 4, 50) time.sleep(0.2) # שלב 8: נקודה קטנה display.clear() display.pixel(8, 3, 60) time.sleep(0.2)

האנימציה הזו תרוץ ללא הפסקה (בגלל while True), כאשר הכוכב גדל וקטן. 

ניתן לשנות את מהירות האנימציה על ידי שינוי ערכי ה-time.sleep(). ערכים קטנים יותר יגרמו לאנימציה לרוץ מהר יותר, וערכים גדולים יותר יאטו אותה.

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

בהצלחה!!