Урок 6, Проверки и условия

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

За да напишем едно условие, достатъчно е да напишем думата if ("ако", в смисъла на "ако нещо, тогава .."), след което да напишем условието в кръгли скоби и накрая да напишем кода в къдрави скоби.

Например:

if (1 > 2) {
  rect(0, 0, 100, 100)
}

Това условие никога не е вярно (едно не е по-голямо от две), и следователно кода няма да се изпълни. Но, ако обърнем знака за по-голямо:

if (1 < 2) {
  rect(0, 0, 100, 100)
}

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

Разбира се, може да използваме if заедно с променливи и тогава става интересно.

Така например, следния код би нарисувал правоъгълник само за около една секунда (за близо 60 кадъра), тъй като когато програмата започне да рисува 60-тия кадър, условието вече не би било вярно.

function draw() {
  background(220);
  if (frameCount < 60) {
    rect(0, 0, 100, 100)
  }
}

Разбира се, бихме могли да използваме и други знаци освен тези за по-голямо и по-малко.

Забележете, че знака за проверяване на равенство е два пъти равно, ==. Това е така, тъй като единично равно, =, вече се използва за задаване на стойности на променливи (както видяхме в урока за променливи) и създателите на JavaScript, базирайки се на минали програмни езици, са преценили, че най-лесно би било да се разграничат двете операции като проверката се отбележе с == а промяната с =.

И последно, преди да преминем към практични примери, е добре да отбележем че може да използваме else (значещо "иначе") след къдравите скоби на един if за да опишем какво да се случи в случай че условието е невярно. След else няма кръгли скоби, а направо изписваме къдрави скоби тъй като else няма условие.

Например, следния код рисува правоъгълник първата секунда, а след това започва да рисува кръг (използвайки circle(x, y, диаметър)) на същото място:

function draw() {
  background(220);
  if (frameCount < 60) {
    rect(0, 0, 100, 100)
    } else {
    circle(50, 50, 100)
  }
}

Използване на условие за да рестартираме една анимация

Kакто видяхме в урока за анимации, можем да направим една анимация използвайки променлива, която променяме всеки кадър, ето така:

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

let x = 0

function draw() { // всеки кадър..
  background(220);
  
  rect(x, 0, 100, 100)
  x = x + 3       // премести правоъгълника на дясно
}

Но направена по този начин, анимацията продължава и след като правоъгълника вече отдавна е излезнал извън края на екрана.

В случай, че искаме да я направим да се повтаря след като правоъгълника е излезнал от екрана, бихме могли за изпозваме условие с if.

За цела ни трябват две неща: проверка с което да разберем, че правоъгълника е извън екрана, и код с който да го върнем в началото.

За да върнем правоъгълника в началото е достатъчно да променим стойността на променливата x. Ако изпълним линията код x = 0 в конзолата, за да направим новата стойност на x да бъде същата като началната стойност, ще видим че анимацията се връща и започва отначало.

За да разберем дали правоъгълника е извън екрана, трябва да помислим за самия екран. От параметрите на createCanvas знаем, че екрана е широк 400 пиксела. А пък от параметрите на rect разбираме, че от левия край на екрана до левия край на правоъгълника има x пиксела разстояние. За да не се вижда правоъгълника, достатъчно е разстоянието до левия му край да е повече от широчината на целия екран.

Условието с което може да опишем, че правоъгълника е излезнал от екрана, следователно, е x по-голямо от 400 – или със знаци, x > 400.

Комбинирайки тези две части, получаваме следното:

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

let x = 0

function draw() { // всеки кадър..
  background(220);
  
  rect(x, 0, 100, 100)
  x = x + 3       // премести правоъгълника на дясно
  if (x > 400) {  // ако правоъгълника е извън екрана
    x = 0         // върни правоъгълника в началото
  }
}

И по този начин, получаваме анимация, която се повтаря! 🎉 Кода може да видите тук (с -100, за да се върне точни преди левия край на екрана).

Използване на условие за да разберем дали мишката е натисната

С променливата mouseIsPressed (от английски, "mouse" - мишка, "is" - е, "pressed" - натисната) идваща от p5.js, може да проверим дали мишката е натисната.

Самата променлива има стойности true (истина/да) и false (лъжа/неистина/не). Тези две стойности са абсолютно същите като стойностите, които бихме могли да получим от някоя проверка като x > 400, и следователно можем да използваме тази променлива директно в условието на нашия if:

function draw() {
  background(220);
  
  if (mouseIsPressed) {  // нямаме нужда от <, >, или ==, тъй като mouseIsPressed може да се използва директно
    rect(0, 0, 100, 100)
  }
}

Така например, горния код изрисува правоъгълник само ако е натисната мишката когато се рисува кадъра.

Нещо, което ще разгледаме в повече детайл по-късно (тъй като не е толкова свързано със условията, които разглеждаме в този урок), но може да ви е интересно да изпробвате, са променливите mouseX и mouseY, които ни дават съответно отстоянието от левия и горния край на самата мишка. Така например това е правоъгълник, който се намира където е мишката, и се движи заедно с нея:

rect(mouseX, mouseY, 100, 100)

Ако премахнем линията с код извикваща background(), ще получим нещо, с което може да рисуваме, като например тук 😃

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

Можете ли да направите един малък град (/ улица) с няколко коли, които всички се движат и рестартират, и може би с някоя къщичка наоколо? 😊

Допълнителна задача по желание

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