M5 | L4 – Bazele Animatiilor cu javascript

Astăzi vom afla despre:

  • Animatii prin identare

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Soarele care explodeaza

Nori care se despart

Stea cazatoare

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

Link Proiect Masina Zi : https://www.khanacademy.org/computer-programming/exemplu-masina-zi/5467050436149248

    Codul:

    background(151, 244, 247);

    noStroke();

    // position of the car

    var x = 10;

    // draw the car body

    fill(255, 0, 115);

    rect(x, 200, 100, 20);

    rect(x + 15, 178, 70, 40);

    // draw the wheels

    fill(77, 66, 66);

    ellipse(x + 25, 221, 24, 24);

    ellipse(x + 75, 221, 24, 24);

     

    Explicatie :

    Să transformăm un desen într-o animație. Am creat acest program care desenează o mașină roșie pe un cer albastru strălucitor. Am o variabilă în acest program, „x”. Și încep acea variabilă la 10. „x” înseamnă poziția x a mașinii, și îl folosesc când desenez caroseria mașinii, cele două dreptunghiuri. Îl folosesc și când desenez roțile mașinii, cele două elipse. Când schimb „x” mașina se mișcă pe ecran. Dar nu este chiar o animație. Ar fi o animație dacă mașina s-ar muta fără ca eu să trebuiască să schimb codul. Ar fi o animație dacă oricine ar putea vedea vedea masina miscanduse fara sa schimbe codul. Deci, cum facem cu adevărat o animație?

    Ei bine, trebuie să ajungem cumva in acest mediu de programare să facem desene noi de multe ori pe secundă, adica acele desene să aibă o valoare „x” diferită de fiecare dată.

    În partea de jos a programului meu, voi scrie „draw =” si apoi se va completa automat. Aceasta este o definiție a funcției. Dar, practic, o funcție o ușurează gruparea a mult de cod împreună. Funcția „draw” este o funcție specială. Iar programul va rula apoi codul în interiorul „draw” în mod repetat de multe ori pe secundă. Tot ce nu este înăuntru

    aceastei funcții, va rula o singură dată.

    Voi lua codul care imi deseneaza masina si il voi pune in draw. Acum avem de fapt desenul mașinii noastre desenat de mai multe ori o secundă, dar arată la fel pentru că este întotdeauna desenat în același loc. Vrem ca mașina să fie înăuntru intr-un loc nou de fiecare dată. Conceptual, vrem să fim capabil să spunem programului, „Să începem cu poziția  x  a mașinii la 10, și apoi adăugați 1 la poziția respectivă în fiecare desen al animației.

    Pentru a face asta, setez variabila x la 10 in afara functiei. Acum, din moment ce asta este in afară funcției „draw”, această linie de cod va rula o singură dată. In interiorul „draw” la sfârșit, voi adăuga o linie de cod pentru a adăuga 1 la x, „x = x + 1”

    Dacă vrem programul sa ștearga mașina dinainte, atunci ceea ce putem face este sa preluam apelul „backround

    și punem în interiorul „draw”.

    1. Pas proiect

    Vom desena o masina care se misca pe iarba.

    Codul:

    noStroke();

    // position of the car

    var x = 10;

    draw = function() {

    background(255, 255, 255);

    fill(0, 255, 68);

    //grass

    rect(0,320,400,100);

       // draw the car body

    fill(255, 0, 115);

    rect(x, 306, 100, 20);

    rect(x + 15, 283, 70, 40);

    // draw the wheels

    fill(77, 66, 66);

    ellipse(x + 25, 326, 24, 24);

    ellipse(x + 75, 326, 24, 24);

    //x++;

    };

    1. Pas proiect

    Vom desena cum soarele rasare din spatele masinii.

    Codul:

    noStroke();

    // position of the car

    var x = 10;

    // the starting size for the sun

    var sunSize = 30;

    draw = function() {

    background(255, 255, 255);

    fill(0, 255, 68);

    fill(255, 204, 0);

    ellipse(200, 298, sunSize, sunSize);

    // The land, blocking half of the sun

    fill(76, 168, 67);

    rect(0, 300, 400, 100);

    //sunSize++;

    //grass

    rect(0,320,400,100);

       // draw the car body

    fill(255, 0, 115);

    rect(x, 306, 100, 20);

    rect(x + 15, 283, 70, 40);

    // draw the wheels

    fill(77, 66, 66);

    ellipse(x + 25, 326, 24, 24);

    ellipse(x + 75, 326, 24, 24);

    //x++;

    };

    1. Pas proiect

    Vom desena 2 nori care dispar datorita soarelui:

    Codul:

    noStroke();

    // position of the car

    var x = 10;

    // the starting size for the sun

    var sunSize = 30;

    var leftX = 160;

    var rightX = 227;

    draw = function() {

    background(255, 255, 255);

    //sun

    fill(255, 204, 0);

    ellipse(200, 319, sunSize, sunSize);

    // left cloud

    fill(201, 209, 201);

    ellipse(leftX, 150, 126, 97);

    ellipse(leftX+62, 150, 70, 60);

    ellipse(leftX-62, 150, 70, 60);

    // right cloud

    ellipse(rightX, 100, 126, 97);

    ellipse(rightX+62, 100, 70, 60);

    ellipse(rightX-62, 100, 70, 60);

    //grass

    fill(0, 184, 6);

    rect(0,320,400,100);

    // draw the car body

    fill(255, 0, 115);

    rect(x, 306, 100, 20);

    rect(x + 15, 283, 70, 40);

    // draw the wheels

    fill(77, 66, 66);

    ellipse(x + 25, 326, 24, 24);

    ellipse(x + 75, 326, 24, 24);

    x++;

    sunSize+=3;

    leftX–;

    rightX++;

    };

     

    1. Scurtaturi pentru identare

    Codul: