M5 | L1 – Bazele desenului cu javascript

Astăzi vom afla despre:

  • Functia : elippse, rect, line
  • Parametrii

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Omul de zapada

Omul de zapada face cu mana

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

Email : clasajunior@gmail.com

P:itjunior2019

CodePen : https://codepen.io/trending

Email: P: clasajunior@gmail.com

P :itjunior2019

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

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

  1. Desenam in cod

Codul:

Explicatia :

Să începem programarea prin realizarea unei fețe cu cercuri. Pentru a desena un cerc avem nevoie pentru a utiliza comanda ellipse, așa că voi tasta ellipse în editor.

După ce am scris un nume de comandă într-un program, il urmez mereu cu paranteză și punct și virgulă.

Dar nu văd o elipsă. Nu există elipsă pentru că trebuie să dau mai multe informații despre unde să se deseneze elipsa

și ce dimensiune ar trebui să aibă.

Vreau ca aceasta elipsa sa fie in mijlocul ecranului si destul de mare

Voi introduce patru numere.

  • Primul numar: controlează cât de departe este elipsa de partea stângă a pânzei.
  • Al doilea număr: elipsa se mișcă în sus și jos pânza.
  • Al treilea număr: elipsa este mai largă sau mai subțire.
  • Al patrulea: Înălțimea, făcând elipsă mai înalta și mai scurta;

Primele două numere controlează poziția elipsei, iar urmatoarele doua controleaza dimensiunea elipsei. Numim aceste numere parametrii comandei ellipse. O sa numim o comandă o funcție. Așadar, în programul nostru apelam funcția de ellipse dandu-i patru parametri pentru a schimba modul în care desenează elipsa.

Când descriem parametrii unei funcții, de obicei le dăm porecle. Amintiți-vă ce controleaza primul parametru.

Numim acest parametru X, pentru că ne gândim la x ca o direcție ce trece prin ecran. Începe de la zero și se termină la 400.

Acest al doilea parametru, îl numim Y, deoarece controlează direcția y. Începe de la zero și se termină la 400

Numim al treilea parametru Width/Lățime, pentru că controlează lățimea, iar al patrulea parametru pe care îl numim Height/Înălțime.

Vom mia face o gura si doi ochi folosind tot functia ellipse.

  1. Provocare: Un om de zapada simplu

https://en.khanacademy.org/computing/computer-programming/programming/drawing-basics/pc/challenge-simple-snowman

  1. Desenam mai multe forme

Cod:

Explicatie :

Ce altceva putem desena? Putem face dreptunghiuri folosind funcția rect. Voi desena un gât mic pentru o față.

La fel ca ellipse, funcția rect ia patru parametri. Dar parametrii nu funcționează la fel ca și în cazul elipselor.

Voi transforma elipse in dreptunghiuri. Voi începe cu cea de sus și doar tastez rect în loc de ellipse păstrând numerele la fel. Observam ca draptunghiul s-a mutat la jumatatea ecranului dacă are la fel parametri ca „elipsa”.

De ce este asta? Ei bine, parametrii x și y a funcției „rect” controlează de fapt partea superioară a colțul stâng al dreptunghiului, nu centrul. Deci asta înseamnă că trebuie să fac unele ajustări din x și y.

Voi schimba restul elepselor in dreptunghiuri, nu o sa am numere perfecte din prima încercare.

Voi adăuga ceva numit „comentariu” pentru am reaminti ce reprezinta fiecare functie. Un „comentariu” începe întotdeauna cu două bare oblice si dupa continua cu putin text care nu este luat in seaman de program

Vom folosi functia line pentru a desena un unibrow peste ochii robotului. Trebuie să introduc patru parametri.

Primii doi parametri reprezinta punctul de plecare al liniei. Ultimii doi parametri vor spune programul unde ar trebui să se termine linia.

Ordinea in care scriem codul este de fapt foarte important pentru că așa programul nostrum va rula codul și va desena formele. Daca punem gura inaintea fetei nuvom mai vedea gura pentru ca programul va desena fata deasupra gurii

  1. Provocare: Omul de zapada face cu mana

https://en.khanacademy.org/computing/computer-programming/programming/drawing-basics/pc/challenge-waving-snowman