M5 | L2 – Colorarea cu javascript

Astăzi vom afla despre:

  • Functia : fill, backround, strokeWeight

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Ninsoare

Ce mancam diseara ?

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

Lectia Khan : https://en.khanacademy.org/computing/computer-programming/programming#coloring

    1. Desenam in cod

    Codul:

    // face

    ellipse(202, 208, 300, 300);

    // eyes

    ellipse(157, 151, 40, 40);

    ellipse(304, 142, 40, 40);

    // mouth

    ellipse(257, 240, 120, 136);

  1.  

    Explicatie :

    Aș vrea să vă prezint bunului meu prieten, Winston. E cam trist azi, pentru că a fost desenat în alb și negru, și crede că e plictisitor. Winston este alb-negru deoarece negru este implicit culoare pentru contururi, iar albul este implicit culoare pentru completarea formelor. O să schimbăm acele culori cu cod.

    În primul rând, să începem cu colorarea în fundal. Pot face asta tastând fucntia backround. Toate comenzile de colorare sunt completat automat la Khan Academy.

    Vedeți, avem nevoie de o cale pentru a descrie o culoare unui computer, pentru că computerele nu văd colorile in modul în care o fac oamenii. Aici, folosim culorile RGB. Primul parametru este cât de roșie este culoarea. Al doilea este cât de verde este culoarea, iar al treilea este cât de albastra. Este foarte important că funcția backround sa fie activată

    în partea de sus a programului nostru.

    Acum, să-i colorăm fața. Amintiți-vă că implicit culoarea formelor noastre este albă. Pentru a schimba asta, avem nevoie sa utilizam comanda fill pentru a colora fata ochi si gura.

    O Să-i dăm o bandă lui Winston. Voi folosi funcția line să-i deseneze o linie peste frunte. Vreau ca această bandă să fie mult mai groasă. Pentru asta, voi folosi un noua functie strokeWeight. Pentru a colora bentita, trebuie să folosesc

    o altă comandă nouă, stroke

    Avem și o funcție pe care o putem folosi pentru a dezactiva contururile în întregime noStroke.

     

    1. Provocare: Ninsoare

    https://en.khanacademy.org/computing/computer-programming/programming/coloring/pc/challenge-sunny-snowy-day

     

    1. Proiect: Ce mancam diseara?

    https://en.khanacademy.org/computing/computer-programming/programming/coloring/pp/project-whats-for-dinner

     

    Un proiect liber incare o sa incepeti de la o farfurie goala si o sa desenati ajutandu-va de toate informatiile acumulate un fel de mancare.