מבוא לקוד 🎳

יסודות התכנות דרך creative coding

מה זה קוד?

קוד הוא ממשק בין שפה אנושית לשפת מכונה.

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

מחשבה / לוגיקה אנושית
(למשל: ״אם לחצו על הכפתור, תדליק אור״)

↓

שפת תכנות (קוד)
(טקסט קריא ומופשט – if button_pressed: light.on())

↓

תהליך התרגום (מהדר/מפרש)
(ה״מתורגמן״ שהופך פקודות מופשטות להוראות מעבד)

↓

שפת מכונה (Binary)
(רצף חשמלי של 0 ו-1: 10110001 01101001...)

ההבדל בין שפות קוד לשפות תצוגה

בשיעור הקודם למדנו HTML ו־CSS — שפות שמגדירות מבנה ועיצוב (State).

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

מאפיין שפות תצוגה (HTML/CSS) שפת קוד (JavaScript)
תפקיד הגדרת מצב (State) קבוע. הגדרת לוגיקה (Logic) ושינוי.
זמן סטטי — הכל קורה ברגע הטעינה. דינמי — דברים משתנים תוך כדי תנועה.
דוגמה ״הכפתור יהיה כחול ובמרכז.״ ״אם המשתמש לא מילא אימייל, צבע את הכפתור באדום.״

שפות קוד

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

ספריית p5.js של JavaScript

p5.js היא ספריית creative coding — כלי שמרחיב את JavaScript ומאפשר ליצור גרפיקה, אנימציה ואינטראקציה בקלות.

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

☝️ נכתוב את הקוד שלנו ב־עורך p5.js המקוון — או לחצו על ״עורך״ בתפריט הצף מימין ונסו ישירות כאן באתר.

לקסיקון בסיסי (Syntax) של JavaScript

לפני שנתחיל לכתוב, כמה סימנים שחשוב להכיר:

// זו הערה — המחשב מתעלם מהשורה הזו

function setup() {   // פותחים בלוק בסוגריים מסולסלים
  createCanvas(400, 400);   // פקודה עם פרמטרים, מסתיימת בנקודה-פסיק
}

המבנה של כל קוד ב־p5.js

כל סקיצה (sketch) ב־p5.js בנויה משני חלקים עיקריים:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0, 255, 0);
  fill(255, 0, 255);
  circle(200, 200, 250);
}

createCanvas(w, h) יוצר את שטח היצירה (Canvas) ברוחב w ובגובה h פיקסלים.

פקודות "מברשת" (הגדרת סגנון)

פקודות שמגדירות צבע וסגנון — חלות על כל מה שנצייר אחריהן:

function draw() {
  background(30, 30, 80);
  fill(255, 100, 50);
  stroke(255, 255, 0);
  circle(200, 200, 80);
}

ערכי הצבע הם r, g, b — אדום, ירוק וכחול, כל אחד בטווח 0–255.
אפשר גם להעביר ערך אחד בלבד לגוון אפור: background(220).
אפשר להוסיף ערך רביעי — alpha — שקובע את רמת השקיפות, גם הוא בטווח 0–255. למשל: fill(255, 100, 50, 120) ייתן עיגול עם שקיפות.

מברשת: בתוקף עד לדריסה

fill(255, 0, 0);
fill(0, 0, 255);
circle(200, 200, 80); // עיגול כחול

אותה הגדרת "מברשת" נשארת בתוקף לכל השורות שמתחתיה — כל צורה שתציירו אחרי fill או stroke תקבל את הצבעים האלה, עד שתגדירו מחדש. לדרוס את ההגדרה: קוראים שוב ל־fill(...) או ל־stroke(...) עם ערכים חדשים.

פקודות "צורות" (ביצוע)

circle(x, y, d) — מציירת עיגול: 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0, 255, 0);
  fill(255, 0, 255);
  circle(200, 200, 250);
}

נקודת ה־(0, 0) נמצאת בפינה השמאלית-עליונה של הקנבס. ערך ה־x עולה ימינה, ערך ה־y עולה כלפי מטה.

✏️ תרגיל: ציירו — באמצעות עיגולים בלבד.

תנאי — If Statement

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

if (mouseIsPressed) {
  fill(255, 0, 0);
}

mouseIsPressed — משתנה מובנה ב-p5.js שמחזיר true כשלוחצים על העכבר ו-false כשלא. 

function draw() {
  background(220);

  if (mouseIsPressed) {
    fill(255, 0, 0);
  } else {
    fill(0, 0, 255);
  }

  circle(200, 200, 80);
}

else — "אחרת". מה לעשות כשהתנאי לא מתקיים.
אם התנאי בתוך ה־if מחזיר false, הקוד שבתוך ה־else ירוץ במקום.

✏️ תרגיל: שנו אלמנט בלחיצה על העכבר.

משתנה — Variable

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

let X = 10;   // הכרזה ראשונית על משתנה
X = 50;        // השמת ערך חדש למשתנה

let — מילת מפתח ב-JavaScript להכרזה על משתנה.

אפשר במקום מספר קבוע במיקום של הצורה, להזין את המשתנים: 

let r = 50;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circle(mouseX, mouseY, r);
}

המשתנה r מוגדר מחוץ לפונקציות — כך הוא נגיש גם ב-setup() וגם ב-draw().

✏️ תרגיל: הזיזו את האלמנט באמצעות מיקום העכבר.

אקראיות — Generative

random(min, max) — מחזירה מספר אקראי שגדול מ-min וקטן מ-max. 

// גוון אקראי לרקע
background(
  random(0, 255),
  random(0, 255),
  random(0, 255)
);
// עיגול בגודל אקראי במיקום העכבר
function draw() {
  fill(random(0, 255), 100, 200);
  circle(mouseX, mouseY, random(10, 80));
}

✏️ תרגיל: שנו את ערכי האלמנטים לפרמטרים אקראיים.

עוד פקודות

function draw() {
  background(240);

  stroke(0);
  line(50, 50, 350, 350);

  fill(100, 200, 100);
  rect(60, 200, 120, 80);

  noFill();
  stroke(255, 0, 0);
  ellipse(300, 150, 100, 60);
}

פקודות טקסט

function draw() {
  background(240);
  textSize(32);
  textAlign(CENTER);
  fill(0);
  text("שלום עולם", 200, 200);
}

אפשר גם להעלות פונט מקומי בעזרת loadFont(): 

let font;

function preload() {
  font = loadFont('assets/MyFont.otf');
}

function setup() {
  createCanvas(400, 400);
  textFont(font);
}

function draw() {
  background(240);
  textSize(48);
  textAlign(CENTER);
  fill(0);
  text("שלום", 200, 220);
}

p5.js באתר שלכם

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

שני שלבים:

const sketch = function(p) {
  p.setup = function() {
    p.createCanvas(400, 300);
  };
  p.draw = function() {
    p.background(220);
    p.circle(p.mouseX, p.mouseY, 40);
  };
};
new p5(sketch, document.getElementById('my-div'));

ב-Instance Mode כל פונקציה מתחילה ב-p. — למשל p.circle() במקום circle(). בכל דוגמה למטה תוכלו לראות אתר עם סקיצת p5 משולבת, ובצד — הקוד.

Hero של האתר

קנבס p5 ברוחב מלא כרקע אינטראקטיבי ל-Hero Section — האזור הראשי בראש העמוד. הטקסט צף מעל.

דוגמה חיה ←

לוגו של האתר

קנבס קטן בתוך ה-Navbar מצייר לוגו אנימטיבי — מגיב ל-hover ומשתנה לאורך זמן.

דוגמה חיה ←

סמן מותאם (Custom Cursor)

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

דוגמה חיה ←

מה עוד אפשר?

עוד רעיונות לשילוב p5.js באתר:

✏️ תרגיל: בחרו אחד מהרעיונות ושלבו סקיצת p5 באתר שלכם.

רפרנסים

אתרי עזר שכדאי להכיר ולהשתמש בהם:

לתרגול נוסף