הקו שזז — אנימציה ראשונה
היום הקו שלנו מתעורר לחיים. נלמד איך לגרום לדברים לזוז על המסך, ונבין את הדפוס הבסיסי שעומד מאחורי כל משחק מחשב.
שני סרטונים לשיעור הזה
הראשון מסביר את הרעיון (16 דקות), השני מראה את הקוד בפעולה (8 דקות). צפו לפחות בראשון לפני שמריצים.
020 מבוא לאנימציה — לולאת משחק (16 דקות)
021 הקו שזז — הקוד בפעולה (8 דקות)לפני שמתחילים
הרצתם בהצלחה את 010 lines.py בשיעור הקודם וראיתם קו על המסך. אם לא, חזרו ל-שיעור 3 קודם.
לולאת המשחק — Game Loop
כל משחק, אנימציה, או סרטון עובד באותו עיקרון: חוזרים על ארבעה צעדים שוב ושוב, מהר מאוד.
בלי fill(0) בתחילת הלולאה, הקו הישן נשאר על המסך. במקום תנועה, נקבל "זנב" של קווים שנערמים. נקה → צייר → שלח → עדכן. תמיד באותו סדר.
פתחו את הקובץ והריצו
פתחו את הקובץ ב-Thonny
File → Open, נווטו ל-c:\projects\single_button ופתחו את 020 move the line.py.
הריצו (F5)
הקו מתחיל לזוז! הוא נע ימינה, מגיע לקצה, וקופץ חזרה.
לעצור: לחצו Stop
כי הקוד רץ בלולאה אינסופית (while True), הוא לא ייעצר לבד. לחצו על כפתור Stop האדום ב-Thonny (או Ctrl+C).
מה כתוב בקובץ?
קצר ופשוט. הקסם הוא בלולאה.
from machine import Pin, I2C import ssd1306 i2c = I2C(scl=Pin(22), sda=Pin(21), freq=4000000) display = ssd1306.SSD1306_I2C(128, 64, i2c) # משתנים — מיקום ומהירות x = 0 x_speed = 1 # לולאת המשחק — רצה לנצח while True: display.fill(0) # 1. נקה display.line(x, 0, 63, 63, 1) # 2. צייר display.show() # 3. שלח למסך x += x_speed # 4. עדכן מיקום if x > 127 or x < 0: # הגענו לקצה? x_speed *= -1 # הפוך כיוון!
שורה אחר שורה — מה חדש?
משתנים — x = 0 ו-x_speed = 1
משתנה הוא שם שמחזיק מספר. x הוא המיקום הנוכחי של הקו, ו-x_speed הוא כמה הוא זז בכל פעם.
כשכותבים x = 0 אנחנו אומרים: "הקו מתחיל בעמודה 0 (הקצה השמאלי)".
לולאה — while True:
"כל עוד זה נכון — תמשיך". True תמיד נכון, אז הלולאה רצה לנצח. כל מה שמוזח ימינה (עם רווחים) שייך ללולאה.
ב-Python, רווחים בתחילת שורה אומרים "השורה הזו שייכת לבלוק שמעליה". כל השורות שמתחילות ב-4 רווחים אחרי while True: רצות בתוך הלולאה.
עדכון — x += x_speed
אחרי שציירנו ושלחנו למסך, אנחנו מזיזים את x. הסימן += אומר "תוסיף על מה שיש". אם x היה 30 ו-x_speed הוא 1, עכשיו x הוא 31.
בפעם הבאה שהלולאה רצה, הקו ייצוייר במיקום 31 במקום 30. ככה הוא "זז".
קפיצה מהקיר — x_speed *= -1
כש-x מגיע ל-127 (הקצה הימני) או יורד מתחת ל-0 (הקצה השמאלי), אנחנו הופכים את הכיוון.
*= -1 הופך חיובי לשלילי ולהפך. אם x_speed היה 1, הוא הופך ל-(-1). עכשיו x += x_speed מחסיר 1 במקום מוסיף. הקו זז שמאלה!
| מצב | x_speed | מה קורה |
|---|---|---|
| זז ימינה | 1 | x גדל בכל סיבוב |
| הגיע לקצה | *= -1 | הופך ל-(-1) |
| זז שמאלה | -1 | x קטן בכל סיבוב |
מהירות — freq=4000000
שימו לב שה-I2C פה מוגדר ל-4,000,000 (4 מגהרץ) במקום 400,000 כמו בשיעור הקודם. זה פי 10 יותר מהר! בלי זה האנימציה תהיה איטית מאוד כי show() שולח את כל הזיכרון למסך בכל סיבוב.
עכשיו תורכם!
שנו מספרים בקוד, שמרו, והריצו שוב. ראו מה משתנה.
הפכו את זה למהיר יותר
שנו מספר אחד בלבד
גרמו לקו לזוז מהר יותר. מצאו את המשתנה שאחראי על כמה פיקסלים הקו קופץ בכל סיבוב, ושנו אותו.
💡 לחצו לרמז
הפכו את הכיוון
הצד העליון קבוע, התחתון זז
עכשיו הקו זז מלמעלה. שנו אותו כך שהנקודה העליונה של הקו קבועה במקום, והנקודה התחתונה היא שזזה.
🎯 לחצו לרמז
display.line(x, 0, 63, 63, 1) — הפרמטר הראשון (x) הוא הנקודה שזזה. העבירו את ה-x למקום אחר בפקודה.בונוס — תנועה בשני הצירים
הקו זז גם למעלה ולמטה
הוסיפו משתנה y ו-y_speed וגרמו לנקודה גם לעלות ולרדת, לא רק ימינה ושמאלה.
💡 לחצו לרמז
y += y_speed ו-if y > 63 or y < 0: y_speed *= -1. השתמשו ב-y בתוך display.line().מה למדנו היום
while True
לולאה אינסופית
משתנים
x, x_speed — שם שמחזיק מספר
x += speed
מזיז את המיקום
if — תנאי
בודק אם הגענו לקצה
*= -1
הופך כיוון
freq=4MHz
מהירות I2C לאנימציה חלקה
בשיעור 5 נלמד לצייר צורות נוספות — מלבנים, עיגולים, ונקודות. המסך הולך להיות הרבה יותר מעניין.