הדרכת תכנות מעניינת למעצב-הפעל את התמונה שלך (חלק ראשון): 16 שלבים

2025 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2025-01-13 06:57

לָרוּץ! לָרוּץ! לָרוּץ!

התכנות לא כל כך קשה. נקודת המפתח היא למצוא את הקצב שלך ולעשות אותו אחד אחד.

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

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

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

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

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

שלב 1: משתנה

משתנה הוא מיכל הנתונים. ניתן להשתמש בו שוב ושוב בתוך תוכנית.

לדוגמה:

[cceN_cpp theme = "dawn"] גודל (500, 500); אליפסה (100, 250, 50, 50); אליפסה (200, 250, 50, 50); אליפסה (300, 250, 50, 50); אליפסה (400, 250, 50, 50);

[/cceN_cpp]

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

להלן הקוד לאחר הוספת משתנה:

[cceN_cpp theme = "dawn"] גודל (500, 500); int a = 50; אליפסה (100, 250, א, א); אליפסה (200, 250, א, א); אליפסה (300, 250, א, א); אליפסה (400, 250, א, א);

[/cceN_cpp]

אנחנו מקבלים תוצאה זהה לחלוטין!

מכיוון שהגדרנו משתנה a, אנו יכולים לשנות פרמטרים בנוחות. אם נשנה a = 50 ל- a = 100, אז כל רוחב וגובה העיגולים יהפכו ל -100 באופן אחיד. אז אנחנו לא צריכים לשנות פרמטרים אחד אחד. משתנה הוא באמת המצאה טובה.

שלב 2: יצירת משתנה

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

int i;

i ＝ 50;

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

int i ＝ 50;

זה יחסית חופשי לתת שם למשתנה. אבל לפעמים עלינו לשים לב למשהו.

שלב 3: שמות תקנה של משתנה

• זה חייב להיות השילוב של האלפבית והקו תחתון. זה יכול להיות סמל או מילה.

• תלוי רישיות. שם ושם יכולים להוות משתנים שונים.

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

• אין מילות מפתח כמו int, float

להלן מספר אמירות שגויות.

int $ a;

int 89b;

להלן המשפטים הנכונים:

int r;

int super_24;

int openTheDoor;

שלב 4: סוג משתנה

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

לצוף b = 0.5

עלינו לזכור איזה סוג נתונים השתמשנו בהצהרה שלנו. אם השתמשנו במילת מפתח int, ההקצאה האחרונה לא יכולה לכתוב i ＝ 0.5 או משהו כזה, או שהתוכנית תהפוך לשגיאה. אבל אם נכתוב בניגוד, זה בסדר. לדוגמה, float i = 5 היא הדקדוק הנכון אך התוכנית תזהה אותה כמספר עשרוני.

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

שלב 5: מפעיל

להלן מפעילים של עיבוד:

+ פלוס

- מינוס

* להכפיל

לחלק

％ מודול של שאר

עליך להכיר את כל המפעילים הללו למעט %. זה נראה די מוזר כי התוצאה שלו נשארת. 9%3 הוא 0. בעוד 9%5 הוא 4.

ניתן להשתמש במפעילים בין הקצאות ומשתנים.

[cceN_cpp theme = "dawn"] int a = 1; // להכריז על משתנה שלם a, הקצאה היא 1. int b = 2; // הכריז על משתנה שלם b, ההקצאה היא 2. int c; // הכריז על משתנה שלם ג. c = a + b; // פלוס שתי הקצאות והקצה את התוצאה שלה לג. הדפס (ג); // משתנה פלט ג.

[/cceN_cpp]

שלב 6: תוצאת הפעולה:

תוצאת הפלט לא תוצג בחלון אלא בקונסולה בתחתית.

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

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

שלב 7: תקנת המבצע

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

הדפס （6 /5）; // תוצאה 1

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

הדפסה (6.0 / 5.0); // תוצאה 1.2

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

הדפסה (6 / 5.0); // תוצאה 1.2

הדפסה (6.0 / 5); // תוצאה 1.2

לבסוף היא תערובת של מספר שלם ומספר נקודה צפה. התוצאה הסופית של הפלט תהיה 1.2.

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

שלב 8: הגדרת פונקציית פונקציית צייר

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

הגדרת בטל () {

}

צייר חלל () {

}

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

[cceN_cpp theme = "dawn"] הגדרת חלל () {הדפסה (1); } צייר חלל () {הדפס (2); } [/cceN_cpp]

בואו נסתכל על דוגמה:

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

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

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

שלב 9: מעגל בתנועה אופקית

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

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

כתוב לתוכו את הקוד הבא (עכשיו נתחיל לעשות את זה בידיים):

[cceN_cpp theme = "dawn"] int x; int y; הגדרת חלל () {גודל (300, 300); x = 0; y = גובה/2; } צייר חלל () {רקע (234, 113, 107); noStroke (); אליפסה (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

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

x = x + 1

אל תראה בזה משוואה מתמטית, אחרת זה יהיה מוזר מאוד. כאן, "＝" הוא סמל להקצאה. הוא מייצג למקם את המספרים הנכונים במשתנה השמאלי. נניח x הוא 50, ברגע שהקוד פועל, הצד הימני של "＝" שווה ל- 50+1, כלומר 51. התוצאה הסופית תוקצה למשתנה x. אז הערך של x הופך ל -51.

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

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

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

הנה דרך פשוטה יותר להביע זאת. כדי לגרום למעגל המשתנה להגדיל 1 באופן אוטומטי, עלינו לכתוב אותו כך שיהיה בפורמט הבא.

עיגול ＝ עיגול ＋1

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

מעגל ＋＋

האין זה פשוט מאוד? זה אומר להגדיל 1 באופן אוטומטי. בדומה לזה, יש - -, שפירושו ירידה 1 באופן אוטומטי.

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

מעגל += 2

זה שווה ל

מעגל = עיגול + 2

באופן דומה, יש - ＝, /=, *=.

שלב 10: כיוון תנועה

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

[cceN_cpp theme = "dawn"] int x, y; // יכול להכריז על מספר משתנים בו זמנית, להשתמש בפסיק כדי להפריד. הגדרת חלל () {גודל (300, 300); x = 0; y = 0; } צייר חלל () {רקע (234, 113, 107); noStroke (); אליפסה (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

קצב תנועה

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

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

x ＝ x ＋ 10

הוא שיפר את המהירות פי 10 בהשוואה למקור!

השיטה הנוספת היא לשנות את תדירות רענון הבד. frameRate ()

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

שלב 11: רקע המשקיף

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

[cceN_cpp theme = "dawn"] int x, y; הגדרת חלל () {גודל (300, 300); רקע (234, 113, 107); x = 0; y = גובה/2; } צייר חלל () {noStroke (); אליפסה (x, y, 50, 50); x += 1; } [/cceN_cpp]

מה קרה? אולי זה לא יכול להבין את הסיבה לייצור הבעיה כראוי. מחק את הפונקציה noStroke, הוסף שוב שבץ וראה את נתיב התנועה של המעגל.

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

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

[cceN_cpp theme = "dawn"] הגדרת חלל () {size (400, 400); } צייר חלל () {אליפסה (רוחב/2-mouseX, גובה/2-mouseX, mouseY, mouseY); אליפסה (רוחב/2-mouseX, גובה/2+mouseX, mouseY, mouseY); אליפסה (רוחב/2+mouseX, גובה/2-mouseX, mouseY, mouseY); אליפסה (רוחב/2+עכבר X, גובה/2+עכבר X, עכבר Y, עכבר Y); } [/cceN_cpp]

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

שלב 12: מעגל רועד

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

הפעלת פורמט:

אקראי (גבוה)

גבוה מייצג את הגבול העליון האקראי, והגבול התחתון המוגדר כברירת מחדל הוא 0. לדוגמה, אקראי (10). הוא יפיק מספר מ- 0 עד 10 באופן אקראי (0 כלול אך 10 אינו כלול).

אקראי (נמוך, גבוה)

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

דוגמא:

[cceN_cpp theme = "dawn"] float x;

x = אקראי (50, 100);

הדפס (x); [/cceN_cpp]

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

• הערה: ערכים הנוצרים על ידי פונקציה אקראית שייכים לסוג הנקודה הצפה (סוג מספר עשרוני). אם ברצוננו להקצות ערך למשתנה שלם, עלינו להפוך אותו באמצעות הפונקציה int (). השינוי אינו עומד בעיגול אלא מוחק את החלק העשרוני ישירות. לפיכך לפלט int (אקראי (5)), יש רק 5 אפשרויות: 0, 1, 2, 3, 4.

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

[cceN_cpp theme = "dawn"] int x, y; הגדרת חלל () {גודל (300, 300); x = רוחב/2; y = גובה/2; } צייר חלל () {רקע (234, 113, 107); noStroke (); x += int (אקראי (-5, 5)); y += int (אקראי (-5, 5)); אליפסה (x, y, 50, 50); }

[/cceN_cpp]

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

שלב 13: מעגל נודד

מעגל הגירה

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

הפעלת פורמט:

רעש לא

רעש פונקציות אינו יכול להגדיר את טווח הפלט שלו. התוכנית מגדירה שהיא יכולה לייצר רק מספרי נקודה צפה מ -0 ל -1 וקלט קבוע יכול להיות בעל פלט קבוע בלבד.

[cceN_cpp theme = "dawn"] float x = רעש (5); צף y = רעש (5); הדפס (x, y); [/cceN_cpp]

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

[cceN_cpp theme = "dawn"] float x, y; הגדרת חלל () {גודל (700, 100); x = 0; רקע (0); } צייר חלל () {x += 1; y = רעש (frameCount/100.0)*100; noStroke (); אליפסה (x, y, 2, 2); }

[/cceN_cpp]

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

• ביניהם, frameCount המשתנה יקבל את המסגרת הנוכחית. שונה לרוחב, לגובה הקודם, הוא יציב ללא כל שינוי. חוץ מזה, הוא מתחיל לעלות מ -0. אם אנו מבינים אותו לפי הגרפיקה המונפשת הראשונית שלנו לתצוגה, הוא מציג את הדף שאליו פנינו (דווקא לתפיסת הזמן בתוכנית).

• frameCount הוא משתנה שלם. התוכנית תהיה מחולקת במשתנה שלם אחר, כברירת מחדל לעבד את התוצאה כמספר שלם.על מנת לשפר את דיוק התוצאה, עלינו לשנות 100 ל- 100.0. מחולק במספר נקודה צפה, נקבל גם מספר נקודה צפה.

• על מנת לשנות את ציר Y מ -0 ל -100, עלינו להכפיל את תוצאת הרעש ב -100. כך נוכל לשלוט על טווח הערכים האקראיים.

כמה מכם שחושבים בחשיבה עשויים לשאול "מדוע עלינו לחלק את frameCountby 100? האם זה לא בסדר לכתוב frameCount ישירות?" כמובן שאתה יכול! אך כאן, על מנת להציג טוב יותר את מאפייני רעשי הפונקציות, אנו מאטים את "קצב השידור". הדוגמה שלהלן מציגה את שינויי ערך הפלט בשיעור שינוי שונה.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; הגדרת חלל () {גודל (700, 500); x = 0; רקע (0); } צייר חלל () {x += 1; y1 = רעש (frameCount)*100; y2 = רעש (frameCount/10.0)*100; y3 = רעש (frameCount/100.0)*100; y4 = רעש (frameCount/1000.0)*100; y5 = רעש (frameCount/10000.0)*100; noStroke (); אליפסה (x, y1, 2, 2); אליפסה (x, y2+100, 2, 2); אליפסה (x, y3+200, 2, 2); אליפסה (x, y4+300, 2, 2); אליפסה (x, y5+400, 2, 2); שבץ (80); קו (0, 100, רוחב, 100); קו (0, 200, רוחב, 200); קו (0, 300, רוחב, 300); קו (0, 400, רוחב, 400); }

[/cceN_cpp]

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

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

[cceN_cpp theme = "dawn"] float x, y; הגדרת חלל () {גודל (300, 300); x = 0; } צייר חלל () {רקע (234, 113, 107); x = רעש (frameCount/100.0 + 100)*300; y = רעש (frameCount/100.0)*300; noStroke (); אליפסה (x, y, 50, 50); }

[/cceN_cpp]

כעת, התנועה מעניינת יותר בדיוק כמו ג'ירו מסתובב.

• הסיבה מדוע משתנה x בתוך רעש הפונקציות חייב להיות פלוס 100 היא כי על מנת להפריד ביניהם למרחק. אם הפרמטרים של xy בתוך רעש הפונקציות זהים או די קרובים, השינוי של קואורדינטת x, y ייסגר לאותו הדבר. זאת בכדי לגרום לתנועה להפוך באופן אקראי הרבה יותר.

שלב 14: מעגל הועבר על ידי עכבר

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

המקרה די פשוט:

[cceN_cpp theme = "dawn"] int x, y; הגדרת חלל () {גודל (300, 300); x = 0; y = 0; } צייר חלל () {רקע (234, 113, 107); noStroke (); x = עכבר X; y = עכבר Y; אליפסה (x, y, 50, 50); }

[/cceN_cpp]

mouseX יכול לרכוש קואורדינטות x של העכבר, בעוד mouseY יכול להשיג קואורדינטות y.

• ננסה לשנות סמל חיובי ושלילי, או להחליף את mouseX ו- mouseY.

שלב 15: סיום

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

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

מאמר זה מגיע מהמעצב וונזי.

שלב 16: קריאות יחסיות:

הנחיית תכנות מעניינת למעצב-עיבוד מגע ראשוני

הדרכת תכנות מעניינת למעצב-צור את תוכנית העיבוד הראשונה שלך

מאמר זה הוא מתוך:

אם אתה זקוק לעזרה, תוכל ליצור קשר עם: [email protected].