M5 | L8 – Functii I

Astăzi vom afla despre:

  • Functii, parametrii functiilor, valoriu returnabile, variabile locale si globale

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Spuneti numele

Cartite

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

Link Proiect Acvariu : https://www.khanacademy.org/computer-programming/exemplu-proiect-acvariu/6065983441027072

  1. Functii

Acum să vorbim despre ceva pe care l-ai folosit tot acest timp: Funcții. Ori de câte ori ați folosit comenzi cum ar fi rect () saufill () sau text (), ati apelat funcții, iar acele funcții au desenat ce le-ai spus să facă.

Ce este de fapt o funcție? Este o colecție de coduri ce le-am grupat și li s-a dat un nume pentru că vrem să putem

pentru a folosi aceea funcționalitate de multe ori. Gândiți-vă la rect ()? Ce face un rect ()? Trage doar patru linii, nu? Am putea face asta folosind funcția noastră line (), nu?

Sa desenezi un dreptunghi in felul asta de fiecare data ar fi foarte enervant pentru ca ar trebui să faci calculele de fiecare data pentru a încerca să-ti dai seama cum să trasezi o linie de la un colț la altul. Deci, în schimb, avem o funcție rect (),și această funcție o face exact același lucru.

Partea interesanta este ca putem sa ne facem propriile functii. De exemplu – să spunem ca facem un program și vrem să-l desenam pe Winston de mai multe ori -poate pentru că vom spune povestea de viață a lui Winston și il vom arata la fiecare vârstă în viața lui.

Deci, aici este Winston:

var faceX = 202;

var faceY = 208;

fill(255, 255, 0);

ellipse(faceX, faceY, 300, 300); // face

fill(46, 46, 41);

ellipse(faceX – 45, faceY – 57, 40, 40); // eyes

ellipse(faceX + 102, faceY – 66, 40, 40);

fill(252, 65, 65);

ellipse(faceX + 55, faceY + 32, 120, 136); // mouth

Codul nu este intr-o functie deci programul il va rula doar o data. OK, să transformăm acest lucru într-o funcție. Pentru a face asta, o facem foarte asemănător cu modul in care declarăm o variabilă,

Deci spunem „var drawWinston”. Îi dăm un nume frumos, foarte descriptiv, și apoi ‘=’, dar aici, în loc să scrieți un număr sau un șir, vom scrie „function”, iar apoi paranteze goale ‘()’ și apoi un „{” ‘}’ și punctul și virgula noastră ‘;’. Apoi punem tot codul pentru desenul lui Winston intre acolade.

Acum ce avem este o variabilă care stochează o funcție – deci practic am pus o etichetă pentru acest bloc de cod, ca să putem apela codul nostru în orice moment.

Noi facem acest bit de cod reutilizabil. Dar acum observă că nu mai avem un Winston! Trebuie să-i spunem programului să ruleze codul, ceea ce înseamnă că avem nevoie să „apelăm” funcția – la fel ca rect (). Așa că doar scriem

numele funcției (‘drawWinston’) și finalizați paranteze ‘()’

Apelam de 3 ori functia si schimbam valorile variabelelor din functie cu valori random si avem 3 Winston scriind cod numai pentru un Winston.

  1. Pas proiect

Desenam un peste si il punem intr-o functie. Parametrii functiilor pestelui detrbuie sa fie relative cu doar patru variabile predefinite.

Codul:

background(89, 216, 255);

var centerX = 200;

var centerY = 100;

var bodyLength = 118;

var bodyHeight = 74;

var bodyColor = color(162, 0, 255);

var fish = function (){

    noStroke();

    fill(bodyColor);

    // body

    ellipse(centerX, centerY, bodyLength, bodyHeight);

    // tail

    var tailWidth = bodyLength/4;

    var tailHeight = bodyHeight/2;

    triangle(centerX-bodyLength/2, centerY,

            centerX-bodyLength/2-tailWidth, centerY-tailHeight,

            centerX-bodyLength/2-tailWidth, centerY+tailHeight);

    // eye

    fill(33, 33, 33);

    ellipse(centerX+bodyLength/4, centerY, bodyHeight/5, bodyHeight/5);

};

fish();

  1. Parametrii functiilor

Ne-am întors la programul nostru de desen Winston, dar i-am adăugat un text.

var drawWinston = function() {

    var faceX = random(50, 350);

    var faceY = random(50, 350);

    fill(255, 255, 0);

    ellipse(faceX, faceY, 220, 220); // face

    fill(46, 46, 41);

    ellipse(faceX – 30, faceY – 50, 30, 30); // eyes

    ellipse(faceX + 44, faceY – 55, 30, 30);

    fill(252, 65, 65);

    ellipse(faceX + 19, faceY + 32, 82, 81); // mouth

};

fill(255, 0, 0);

text(„Toddler Winston:”, 10, 20);

text(„Teenage Winston:”, 200, 20);

text(„Twenty-Something Winston:”, 10, 220);

text(„Adult Winston:”, 200, 220);

drawWinston();

drawWinston();

drawWinston();

drawWinston();

Vezi, ceea ce vreau să fac este să poziționez un Winston sub fiecare dintre aceste etichete, pentru a-i arăta în fiecare moment al vieții.

Chiar acum este peste tot. Asta pentru că stabilim faceX și faceY to numere aleatorii în interiorul funcției. Vrem să spunem: „Iată exact la aceasta poziție Vreau să desenezi acest Winston „. Vreau să pot specifica această poziție de fiecare dată când apelez funcția, la fel cum facem cu elipse () și rect ().

Pentru a face acest lucru, trebuie să specificăm „parametri” pentru funcție, atât în ​​definiția funcției noastre – în partea de sus aici – și în funcția noastră de apel. Pentru var drawWinston (), o sa trecem doar numele variabilelor faceX și faceY , in interiorul parantezelor function(faceX, faceY). Apoi stergem linii unde variabilele au fost decclarat.

Acum vom putea scrie in interiorul unei fucntii apelate doua valori, care vor fi pasate parametrilor din function(faceX, faceY) care la randul lor vor schimba cum se va comporta codul

  1. Pas proiect

Punem in interioul functiei 2 parametrii pentru locatia pestelui si vom apela functia de desant un paste de 4 ori cu paramatrii diferiti.

Codul:

background(89, 216, 255);

var bodyLength = 118;

var bodyHeight = 74;

var bodyColor = color(162, 0, 255);

var fish = function (centerX, centerY){

    noStroke();

    fill(bodyColor);

    // body

    ellipse(centerX, centerY, bodyLength, bodyHeight);

    // tail

    var tailWidth = bodyLength/4;

    var tailHeight = bodyHeight/2;

    triangle(centerX-bodyLength/2, centerY,

            centerX-bodyLength/2-tailWidth, centerY-tailHeight,

            centerX-bodyLength/2-tailWidth, centerY+tailHeight);

    // eye

    fill(33, 33, 33);

    ellipse(centerX+bodyLength/4, centerY, bodyHeight/5, bodyHeight/5);

};

fish(200,100);

fish(300,255);

fish(100, 300);

fish(245,78);

  1. Provocare: Spune-ti Numele

https://www.khanacademy.org/computing/computer-programming/programming/functions/pc/challenge-say-your-name

  1. Provocare: Cartite

https://www.khanacademy.org/computing/computer-programming/programming/functions/pc/challenge-moles-in-holes