Return to Video

פונקציות מיוחדות של ProcessingJS

  • 0:00 - 0:03
    בשלב זה אתה יכול להבין שאתה כבר מגדיר
  • 0:03 - 0:07
    פונקצייה פרטית בכל זמן
    שאתה רוצה להנפיש את התוכנית שלך
  • 0:07 - 0:09
    פונקציית הציור (draw function).
  • 0:09 - 0:13
    להזכירך, זו תוכנית
    המכונית המונפשת שלנו שוב.
  • 0:13 - 0:17
    יש לה המשתנה הזה ששמו
    הוא x, הוא מתחיל ב-11.
  • 0:17 - 0:23
    ואז בתוך פונקציית draw,
    הוא מצייר את המכונית במשתנה x זה
  • 0:23 - 0:27
    ואז היא מוסיפה 3 למשתנה x זה כל פעם
  • 0:27 - 0:29
    ואלו התוצאות במכונית
  • 0:29 - 0:32
    שנעה 3 פיקסלים על המסך ברציפות.
  • 0:32 - 0:35
    אז, כך זה עובד.
  • 0:35 - 0:38
    אבל עכשיו כשלמדת איך להכין פונקציה בעצמך,
  • 0:38 - 0:42
    ייתכן שאתה תוהה,
    מה לגבי פונקציית draw?
  • 0:42 - 0:44
    למה היא תמיד נקראת 'draw'?
  • 0:44 - 0:46
    האם היא פונקציה מותאמת אישית?
  • 0:46 - 0:49
    ואלו הן שאלות מאוד טובות.
  • 0:49 - 0:52
    אתה רואה, בספריית "ProcessingJS",
  • 0:52 - 0:56
    הפונקציה 'draw' היא אחת מתוך כמה פונקציות
    מוגדרות מראש
  • 0:56 - 1:01
    מה שנותן לתוכניות שלנו יותר שליטה
    על מה שקורה עם הקנבס.
  • 1:01 - 1:05
    פונקציה מוגדרת מראש היא פונקציה
    שכבר הוגדרה
  • 1:05 - 1:07
    על ידי ספריית ה-ProcessingJS.
  • 1:07 - 1:11
    אבל לעיתים קרובות זה מתחיל
    בהגדרה ריקה (של הפונקציה).
  • 1:11 - 1:17
    למשל, בספריית ה-ProcessingJS,
    יש קוד שנראה כמו זה:
  • 1:17 - 1:19
    {} () var draw = function
  • 1:19 - 1:23
    ואז הקוד רק ריק. ריק לחלוטין.
  • 1:23 - 1:29
    עכשיו, אנחנו טוענים את ספריית
    ה-ProcessingJS
    לתוך כל תוכנית פה באקדמיית קהאן.
  • 1:29 - 1:31
    אז את הקוד הזה מעולם לא ראית.
  • 1:31 - 1:34
    אבל תאמין לי, הוא קיים.
  • 1:34 - 1:41
    עכשיו אני אעיר שהקוד יצא מפני
    ש-ProcessingJS כבר עושה לנו את זה.
  • 1:41 - 1:45
    עכשיו כשאתה מגדיר שוב 'draw'
    בתוכנית הפרטית שלך,
  • 1:45 - 1:50
    ההגדרה החדשה "דורסת"
    את ההגדרה הישנה הריקה.
  • 1:50 - 1:52
    ועכשיו הפונקציה 'draw'
  • 1:52 - 1:55
    עושה למעשה דברים מרגשים,
    כמו לצייר מכונית.
  • 1:55 - 2:01
    עכשיו השאלה היא, למה הפונקציה 'draw'
    נקראת שוב ושוב?
  • 2:01 - 2:06
    טוב, בספריית ה-ProcessingJS
    יש רק קוד
  • 2:06 - 2:11
    שמגדיר לדפדפן לעשות זאת ולחזור ולחזור,
  • 2:11 - 2:14
    שוב ושוב ושוב.
  • 2:14 - 2:19
    אנחנו צריכים לשנות לפונקציה 'draw' את
    שמה, כי זה השם של הפונקציה
  • 2:19 - 2:22
    ש-ProcessingJS קוראת לו שוב.
  • 2:22 - 2:28
    אם נשנה את שמה, כמו
    שנשנה את זה ל 'drawCar'.
  • 2:28 - 2:31
    ובהתחלה נקבל שגיאה 'ללא הגדרה',
    אז אנחנו צריכים לומר 'var drawCar'.
  • 2:34 - 2:35
    תוכל לראות, אם משנים
  • 2:35 - 2:37
    שם ל-drawCar, אנחנו לא יכולים
    לראות אנימציה כלשהי.
  • 2:37 - 2:40
    וזה כך מפני שהפונקציה לא נקראת עוד
  • 2:40 - 2:45
    כי היא לא נקראת 'draw'.
  • 2:45 - 2:47
    אז אנו צריכים לשים את הקוד
    שאנו רוצים לקרוא לו
  • 2:47 - 2:51
    בתוך פונקציה שתהיה מאויתת 'draw' בדיוק.
  • 2:51 - 2:56
    אז אני רק אעשה זאת שוב,
    ואני רק אקרא ל-'drawCar' מכאן.
  • 2:56 - 3:01
    אהה! קיבלנו את זה בחזרה.
  • 3:01 - 3:03
    בסדר, אז זה צריך להיות בשם 'draw',
  • 3:03 - 3:07
    וזה גם אומר שאתה חייב לקרוא
    לפונקציה המותאמת אישית בשם 'draw',
  • 3:07 - 3:13
    אלא אם כן אתה רוצה לטפל בהם
    באופן מיוחד, ולקרוא להם שוב ושוב.
  • 3:13 - 3:18
    וגם תזכור, אתה לא יכול ליצור
    פונקציות רבות בשם 'draw'.
  • 3:18 - 3:24
    רק ההגדרה האחרונה תיחשב.
  • 3:24 - 3:28
    אם יש לנו 'rect' פה בפנים--
  • 3:28 - 3:31
    אז עכשיו אנו יכולים לראות שהמכונית
    שלנו נראית שוב ושוב,
  • 3:31 - 3:35
    ורק ה'rect' נראה, כי רק ההגדרה
    האחרונה נחשבת.
  • 3:35 - 3:40
    אז בואו ניפטר מזה.
  • 3:40 - 3:43
    עכשיו הפונקציה 'draw' היא לא רק
    פונקציה מוגדרת מראש
  • 3:43 - 3:48
    שיש לה פעולות מיוחדות כאלו.
  • 3:48 - 3:50
    יש גם אוסף של פונקציות
  • 3:50 - 3:53
    כדי להגיב לאינטרקציות עכבר
    ולחיצות במקלדת.
  • 3:53 - 3:57
    בואו נאמר שאנחנו רוצים שתהיה לנו תוכנית
    שתצייר אליפסה צבועה
  • 3:57 - 4:02
    בכל מקום שהמשתמש מעביר את העכבר...
  • 4:02 - 4:05
    אז אנו יכולים לעשות זאת עם פונקציה כמו זו.
  • 4:05 - 4:09
    [הקלדה]
  • 4:09 - 4:16
    בסדר, או, נפלא.
  • 4:20 - 4:23
    עכשיו, הפונקציה הזאת נקראת שוב ושוב,
  • 4:23 - 4:27
    גם כשהמשתמש לא מזיז את העכבר,
    כמו עכשיו.
  • 4:27 - 4:31
    והתוכנית הזאת, היא עובדת, היא עושה
    מה שאנו רוצים שתעשה
  • 4:31 - 4:35
    היא מציירת את האליפסות היפות האלה
    בכל רחבי המסך.
  • 4:35 - 4:38
    אבל כפי שמתברר, יש דרך טובה יותר
    לעשות את אותו הדבר.
  • 4:38 - 4:42
    זה יעיל יותר.
  • 4:42 - 4:44
    אז אנחנו יכולים לשנות את 'draw'
    ל-mouseMoved.
  • 4:44 - 4:52
    וזה עדיין עובד.
  • 4:52 - 4:55
    אתה רואה, הסביבה שלנו בודקת תוכניות
  • 4:55 - 4:58
    כדי לראות אם יש להן פונקציה מוגדרת
    mouseMoved
  • 4:58 - 5:01
    ואם כך, הסביבה קוראת לפונקציה הזאת
    בכל הזזת עכבר.
  • 5:01 - 5:05
    אבל היא לעולם לא תיקרא
    אם המשתמש לא מזיז את העכבר.
  • 5:05 - 5:10
    אז לפני זה קראנו את הקוד
    שבפונקציית 'draw'
  • 5:10 - 5:13
    כשאנחנו לא צריכים זאת,
    שוב ושוב
  • 5:13 - 5:16
    ועכשיו, אנחנו קוראים את הקוד
    של mouseMoved רק
  • 5:16 - 5:20
    כשהערכים של mouseX או mouseY משתנים.
  • 5:20 - 5:23
    אז התוכנית שלנו היא יותר יעילה,
    וזה דבר טוב.
  • 5:23 - 5:27
    באופן כללי, אם אתה רק רוצה לשנות
    את פלט התוכנית שלך
  • 5:27 - 5:31
    כשהמשתמש מזיז את העכבר,
    אז זה יותר טוב לשים את הקוד
  • 5:31 - 5:35
    בתוך פונקציית 'mouseMoved'.
  • 5:35 - 5:37
    ויש עוד אוסף של פונקציות מוגדרות מראש
    כמו זאת,
  • 5:37 - 5:41
    ואתה יכול לראות דוגמאות נוספות
    ב-Documentation.
  • 5:41 - 5:45
    כמו mousePressed, mouseReleasedm
    keyPressed, ועוד.
  • 5:45 - 5:49
    אז תזכור, אם אתה רוצה להשתמש
    בפונקציה מיוחדת מוגדרת מראש,
  • 5:49 - 5:54
    כמו mouseMoved או draw, איית אותה נכון,
    והשתמש בה נכון.
  • 5:54 - 5:59
    אם לא, תוודא שאתה מביא לפונקציות
    המותאמות אישית שלך
  • 5:59 - 6:03
    שם חדש, ייחודי.
  • 6:03 - 6:06
    בהצלחה!
Title:
פונקציות מיוחדות של ProcessingJS
Description:
more » « less
Video Language:
English
Duration:
06:08

Hebrew subtitles

Revisions

Our website uses cookies for analysis purposes.