M5 | L10 – Structura Daca/IF I

Astăzi vom afla despre:

  • Structura IF, variabile BOOL, operatori logici, structura IF/ELSE

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Minge

Painting App

Numere

Khan Editor : https://www.khanacademy.org/computer-programming/new/pjs

Cod de inceput:

// position of the ball

var x = 20;

// how far the ball moves every time

var speed = 3;

draw = function() {

background(202, 255, 97);

fill(66, 66, 66);

ellipse(x, 200, 50, 50);

// move the ball

x = x + speed;

};

O altă animație. De data aceasta avem o minge care se mișcă pe ecran, și voi știți cum se face acest lucru. Avem o variabilă, „x”, care ne arată poziția mingii, o „viteză” variabilă care ne spune cât de departe se deplasează mingea de fiecare data și o buclă de desen familiară în care desenăm fundalul de fiecare data setarea culorilor de umplere și desenarea elipsei în poziția x și de fiecare data. Atâta timp cât viteza nu este zero, în cele din urmă mingea va ieși de pe ecran. Și pot apăsa oricând butonul de repornire pentru a-l readuce înapoi, dar știi, după o vreme, devine vechi.

Deci, ce zici de asta? Când mingea ajunge la marginea dreaptă a ecranului, în loc să mă îndepărtez de marginea ecranului ca acum, vreau să se întoarcă. Și știu cum să întorc mingea, pot spune doar că „viteza” devine negativă 5. Dacă fac viteza negativă, atunci mingea ar merge înapoi. Dar aici este problema. Vreau să schimb viteza numai dacă mingea a ajuns la marginea dreaptă.

Acest lucru necesită o afirmație „dacă”.

Până acum, am dat comenzilor computerului să ruleze, indiferent de ce. Structurile IF sunt o modalitate de a spune „Hei programule, vreau să rulazi acest cod, dar numai în aceste circumstanțe specifice”. „Deci, schimbați viteza numai dacă mingea a ajuns la marginea dreaptă.”

Și iată cum arată în cod. Tot ce faci este să tastați „IF” și apoi o pereche de paranteze, apoi inca o perece de acolade. În paranteze vom pune condiția. În acolade vom pune codul să ruleze. Deci, modul în care funcționează este „Dacă această condiție este adevărată, atunci executați acest cod. În caz contrar, nu vă deranjați”. Deci, în cazul nostru, condiția este ca mingea să ajungă la marginea dreaptă. De unde știm dacă mingea a ajuns la marginea dreaptă?

Avem această variabilă „x” care ne spune unde este mingea și știu că marginea ecranului este x poziția 400, deci să vedem. Când „x” este mai mare de 400, atunci știm că mingea a trecut puțin peste marginea dreaptă. Și codul pentru a rula, am spus deja înainte, vom schimba viteza. Viteza devine negativă de cinci. Vom apăsa restart și vom vedea ce se întâmplă.

De data aceasta, vrem să verificăm dacă mingea a ajuns la marginea stângă. Și atunci x este mai mic decât zero și ceea ce vrem să facem este să facem din nou viteza pozitivă, deci viteza devine 5.

  1. Provocare: Minge

https://www.khanacademy.org/computing/computer-programming/programming/logic-if-statements/pc/challenge-bouncy-ball

  1. Interactiuni cu Mouse-ul

Cod de inceput:

var position = 20;

var speed = 3;

draw = function() {

background(202, 255, 97);

fill(66, 66, 66);

position = position + speed;

ellipse(position, 200, 50, 50);

if (position > 375) {

speed = -5;

}

if (position < 25) {

speed = 5;

}

};

Interactiunea cu mouse-ul:

În ultima noastră discuție, am arătat cum puteți anima o minge care săre de pe pereți folosind funcția draw și declarațiile if. Dar acum, vreau să adaug interacțiunea utilizatorului la acest program. Amintiți-vă mai devreme am aflat despre două variabile globale speciale numite mouseX și mouseY. Aceste variabile returnează numere care ne spun despre poziția curentă a mouse-ului utilizatorulur și sunt o modalitate excelentă de a face un program mai interactiv. Deci, să vedem. Cum le putem folosi?

Ei bine, ar trebui să le folosim în interiorul funcției draw undeva. Pentru că acesta este singurul cod care este apelat de mai multe ori pe măsură ce programul rulează. Totul în afara draw este apelat o singură dată, când programul pornește pentru prima dată. Deci, nu are sens să folosiți mouseX și mouseY acolo.

In draw, desenam mingea cu 200 de pixeli pe ecran chiar acum. Ce-ar fi să înlocuim asta doar cu mouseY? Deci, verificați acest lucru, prin simpla mișcare a cursorului în sus și în jos, pot schimba linia pe care o deplasează mingea. Vreau să folosesc și mouseX.

Vreau să dau utilizatorului puterea de a porni o a doua minge sis a ii poata controla pozitia pe axa X. Să o aducem la existență, doar apăsând mouse-ul. Ei bine, atunci trebuie să aflu cum să spun că utilizatorul își apasă mouse-ul. Din fericire, avem o variabilă booleană super specială pentru asta. Se numește mouseIsPressed și îl putem folosi într-o instrucțiune if.

Deci, ceea ce face asta aici, este să spunem programului că vrem să desenăm această elipsă doar dacă acest lucru este adevărat și mouseIsPressed vor fi adevărate numai dacă utilizatorul apasă mouse-ul.

  1. Provocare: Pictura

https://www.khanacademy.org/computing/computer-programming/programming/logic-if-statements/pc/challenge-your-first-painting-app

  1. Variabile bool

Cod de inceput:

background(66, 17, 143);

var number = 50;

if (number <= 48) {

// top left

fill(255, 255, 0);

ellipse(100, 100, 100, 100);

}

if (number >= 48) {

// top right

fill(0, 225, 255);

ellipse(300, 100, 100, 100);

}

if (number === 48) {

// bottom left

fill(255, 25, 117);

ellipse(100, 300, 100, 100);

}

if (number !== 48) {

// bottom right

fill(0, 255, 68);

ellipse(300, 300, 100, 100);

}

În limba romana avem diferite părți ale vorbirii, ca Substantiv, Adjectiv, Prepozitie, Verb. Și apoi există o grămadă de reguli care ne spun cum să punem împreună aceste diferite părți ale vorbirii. Deci, dacă aș spune ceva de genul „Cărți pentru câini mănâncă”, mi-ați spune „Ce naiba înseamnă asta?” Și dacă nu v-ați dat seama de acest lucru înainte, se pare că nu puteți lipi doar două substantive în fața unui adjectiv în fața unui verb. Nu funcționează. Dar dacă le-aș schimba și aș spune „câinele meu mănâncă cărți”, atunci ați ști la ce mă refer. Aș putea chiar înlocui acest verb „mănâncă” cu un alt verb de genul, „aruncă” și ar avea totuși un sens gramatical, chiar dacă nu vă puteți imagina câinele aruncând o carte.

Deci, în programare, în loc de părți de vorbire avem aceste lucruri numite tipuri. Ați văzut deja unul dintre acestea: numerele. Folosim numere tot timpul în codul nostru de desen. Și la fel ca în limba engleză, există momente în care este logic să folosiți un număr și momente când nu.

In programare exista tipul boolean. Și se numește Boolean pentru că un tip pe nume George Boole a inventat-o. Și spre deosebire de un număr care are o mulțime de valori posibile, un boolean poate fi doar una dintre cele două valori: adevărat sau fals.

Daca ne uitam la instructiunea IF acum această afirmație spune: „Dacă numărul este mai mic de 48” (care este!) „Atunci vom desena elipsa superioară”. Și dacă fac un număr mai mare de 48, puteți vedea că elipsa superioară dispare. acest lucru din paranteze este de fapt o expresie booleană. Amintiți-vă, o expresie matematică este orice lucru care se evaluează la un număr: cum ar fi 3 plus 2 plus 4 ori 8. Deci, o expresie booleană este tot ceea ce se evaluează ca fiind boolean.

O modalitate bună de a verifica dacă o expresie se evaluează ca fiind booleană este să lipiți cuvântul „este” în fața ei și pune-l ca o întrebare. Dacă sună ca o întrebare da sau nu, atunci știți că este o expresie booleană. Deci, aici putem spune: „Este numărul mai mic de 48?” Da, da, este și da, aceasta este o expresie booleană. Pe de altă parte, dacă aș avea ceva de genul „4 + 4” și am încercat să întreb, „este 4 + 4?” Nu, nu este boolean.

  1. Provocare: Analizator de numere

https://www.khanacademy.org/computing/computer-programming/programming/logic-if-statements/pc/challenge-number-analyzer