Урок 5, Функции

В уроците досега научихме някои неща, които можем да опишем с код, като анимации и картинки. Преди да продължим нататък с по-сложните програми, бих искал да покажа един начин по който можем да организираме нашия код, без той да става става сложен.

Това за което бих искал да говоря са така наречените функции. Подобно на променливите, функциите идват от математиката. Те ни позволяват ни да групираме части от кода и да си спестим преписването на код.

За демонстрация, ще използваме кода от урока за променливи, който изглеждаше горе-долу ето така:

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

let x = 30

function draw() {
  background(220);
  
  fill(0, 0, 0)
  rect(x + 40, 90, 60, 70)
  
  fill(255, 100, 0)
  rect(x, 50, 60, 70)
}

За да създадем нова функция е достатъчно да напишем function, след това името на функцията (описващо какво прави тя), след което две кръгли скоби (), и после две къдрави скоби, в които ще сложим кода на функцията. Например, премествайки кода за изрисуването на тези два правоъгълника във функция наречена twoRects (от английски, "two rectangles", "два правоъгълника"):

let x = 30

function draw() {
  background(220);
}

function twoRects() {
  fill(0, 0, 0)
  rect(x + 40, 90, 60, 70)
  
  fill(255, 100, 0)
  rect(x, 50, 60, 70)
}

Ако изпълните този код сега ще забележете че правоъгълниците вече не се показват. Това е така тъй като функцията е само обяснение как се прави нещо, но не е команда да се направи нещо. Тоест, ние единствено сме обяснили как се рисуват два правоъгълника, но не сме задали че трябва да се нарисуват тези два правоъгълника.

За да се изпълни кода на функцията, достатъчно е да я използваме като напишем нейното име на мястото, на което трябва да се изпълни, и след това сложим две кръгли скоби ():

let x = 30

function draw() {
  background(220);
  
  twoRects(); // <-- използваме функцията
}

function twoRects() { // <-- създаваме функцията
  fill(0, 0, 0)
  rect(x + 40, 90, 60, 70)
  
  fill(255, 100, 0)
  rect(x, 50, 60, 70)
}

Това е точно същото като начина по който използваме fill или rect.

Параметри

Освен това да опише списък от инструкции, функцията може да има и така наречените параметри. Параметрите са подобни на променливи описани вътре във функцията, само че стойността им я задаваме, когато използваме самата функция.

Така например, за да преправим миналия код така че x да е параметър, а не променлива, може да направим следното:

function draw() {
  background(220);
  
  twoRects(30) // <-- задаваме стойност 30 на параметъра "x"
}

function twoRects(x) { // <-- описваме че функцията приема параметър "x"
  fill(0, 0, 0)
  rect(x + 40, 90, 60, 70)
  
  fill(255, 100, 0)
  rect(x, 50, 60, 70)
}

Един начин да прочетем това е, че twoRects е функция, на която е нужен един параметър, x, описващ отстоянието от левия край на екрана; както функцията rect има нужда от няколко параметъра, първия от които е отстояние от левия край на екрана. А когато използваме функцията twoRects(..) в draw(), ние посочваме отстоянието от левия край на екрана, което да се използва.

Използвайки параметри, можем да извикаме (използваме) функцията повече от един път, за да нарисуваме повече правоъгълници:

function draw() {
  background(220);
  
  twoRects(30)  // минава през кода на функцията с x = 30
  twoRects(200) // минава през кода на функцията с x = 200
}
// функцията twoRects(x) остава същата

Разбира се, функцията може да има повече от един параметър; подобно на функциите от p5.js:

function draw() {
  background(220);
  
  twoRects(30,  50, 60, 70) // <-- задаваме стойности на параметрите
  twoRects(200, 50, 10, 70) // <-- задаваме стойности на параметрите
}

function twoRects(x, y, w, h) { // <-- описваме параметрите
  fill(0, 0, 0)
  rect(x + 40, y + 40, w, h) // <-- използваме параметрите
  
  fill(255, 100, 0)
  rect(x, y, w, h)
}

И това, накратко, са функциите в JavaScript.

Вземете превозното средство / кола от задачата от миналия урок и го променете, така че да използва функция за нарисуването на самото превозно средство. След това, направете състезание между две копия на това превозното средство!

1. Преместете кода в функция.
2. Добавете параметри на тази функция, и задайте техните стойности в draw().
   • Най-вероятно параметрите, които искате, са x, отстояние от левия край, и y, отстояние от горния край. Анимацията тогава остава в draw().
   • Алтернативно може да добавите speed, скоростта с която се движи колата. Анимацията тогава се случва в функцията за превозното средство.
3. Дублирайте извикването на функцията, така че да имате два състезателя! Можете ли да ги сложите един под друг и да организирате състезание? 🏁

let speed = 1 // създава променлива за скоростта на състезателя

function setup() {
  createCanvas(400, 400);
  
  speed = random(1, 10) // прави стойността на тази променлива да е случайно число между 1 и 10
}

function draw() {
  background(220);
  
  rect(frameCount * speed,  50, 40, 40) // анимира правоъгълник със скорост = speed пиксела в кадър
}