Limbajul LOGO - Mediu de programare online | Ţestoasa ta ce ştie să facă?
Trasarea curbelor Bésier - "Inimioara animată!"



Introducere

În matematică o curbă Bézier este o curbă parametrică cu importante aplicații în grafica pe calculator și în domeniile asociate acesteia. Curbele Bézier au fost mediatizate în 1962 de inginerul francez Pierre Bézier. Curbele Bézier se folosesc și în animație pentru controlul mișcării în aplicații renumite.

Cele mai des întâlnite curbe Bézier sunt cele cuadratice și cele cubice.
Este redundant să detaliem elementele teoretice matematice, le găsiți [aici] ori pe Internet.

Platforma permite trasarea acestor două tipuri de curbe vizual. Accesați din meniu butonul:
Se va deschide o fereastră de unde puteți alege una dintre cele două comenzi.

Curbă Bézier cuadratică

Când creionul este orientat în jos, puteţi folosi comanda "curba1" (în engleză, "quadcurve") pentru a trasa o curbă Bézier cuadratică. Parametrii sunt coordonatele punctului de control ( pc) şi ale punctului de final ( pf):
Jucați-vă puțin cu valorile parametrilor pentru a observa imediat modificarea liniei curbe!

Curbă Bézier cubică

Când creionul este orientat în jos, puteţi folosi "curba2" (în engleză, "cubiccurve") pentru a trasa o curbă Bézier cubică. Parametrii sunt coordonatele celor două puncte de control ( pc1, pc2) şi ale punctului de final ( pf):
De asemenea, testați valorile parametrilor pentru a observa imediat modificarea liniei curbe!

Notă. Dacă ați setat creionul în sus, Țestoasa doar se mișcă pe traseul curbei!

Exemplul 1. O inimioară

O inimă desenată primar este simetrică, astfel că trebuie să trasăm mai întâi jumătate din ea. După ce am testat un pic parametrii pentru curba cuadratică, am ajuns la punctul de control (-150,55) și punctul final (0,160):
Îmi este greu să trasez cealaltă jumătate din locația curentă a Țestoasei, așadar apelez la "acasa" (revin la coordonatele 0,0) și o trasez apoi și spre dreapta cu punctul de control (150,55) - deci inversez valoarea pe axa X:
Gata! Trei linii de cod... :)

Exemplul 1*. O inimioară (continuare)

Hmm... cum ar fi să o și colorăm? Simplu - folosim căile!
Căile sunt descrise în tabul "Obiecte grafice" în cadrul editorului în partea de jos.

Principiul este următorul: deschid o cale pe care Țestoasa o va urma. După ce am trasat totul, o inchid și o colorez, specificând culoarea dorită în prelabil. Analizați programul de mai jos, este simplu:
De asemenea, mai jos am setat grosimea creionului de 8 pixeli, culoarea de trasare "verde" ("green") și înainte de a umple inima cu roșu, am trasat și conturul:
Exemplul 2. Inimioara animată!

Inima trasată este statică. Cum putem de exemplu ca la fiecare secundă, culoarea de umplere să se modifice (de exemplu aleator)? Din nou, foarte simplu! La fiecare secundă, spre exemplu de 10 ori, afișăm inimioara cu o culoare impusă la întâmplare.

Analizați programul de mai jos (aveți link spre cel publicat):

repeta 10 [
     curataecranul
     pornestecale
     curba1 -150 55 0 -160
     acasa
     curba1 150 55 0 -160
     set_culoare_umplere aleator 10
     set_culoare "green
     set_dim_creion 8
     traseazacale
     umplecale
     asteapta 1000 "fals
]


Aici găsiți [programul funcțional] publicat.

Atenție. La fiecare pas ștergem ecranul complet prin comanda "curataecranul" pentru a putea reinițializa fundalul. În esență avem o animație cu frecvență de un cadru/secundă - comanda "asteapta" întârzie repetarea trasării cu 1000 de milisecunde. De asemenea, culoarea de umplere este aleasă aleator (instrucțiunea "aleator") dintre valorile mulțimii {0,1,...,9}.

Exemplul 3. Inimioara parametrizată - trecerea spre procedură

Din moment ce avem un obiect funcțional care ne satisface grafic, îl putem transforma într-o procedură care poate trasa o serie / o gamă de inimioare în funcție de parametrii primiți.

Evident, putem parametriza dimensiunile, culoarea fundalului ori cea a conturului, poziția față de centrul ecranului, etc.

Mai jos este prezentată o procedură care trasează inimioara cu cele două culori (contur și fundal):
De acum înainte, Țestoasa noastră știe această procedură și o puteți doar apela cu parametrii doriți!


Probleme propuse

1. Modificați procedura "inimioara" a.î. să primească ca parametru și înălțimea (indicație - momentan are 160 de pixeli).
2. Modificați procedura "inimioara" a.î. să fie centrată pe axa Y (coordonatele (0,0) în centru).
3. Creați o procedură numită "frunza" folosind una ori o combinație dintre cele două tipuri de curbe Bézier.
4. Parametrizați procedura anterioară în funcție de culoare, contur și dimensiune.
5. Realizați o animație interesantă folosind procedura anterioară.

LOGO este aproape de un limbaj natural şi este o alternativă de învățare a programării la gimnaziu în curriculumul oficial M.E.N. [programa].
Acest proiect este susţinut şi colaborează cu:
U.P.I.R.         www.infogim.ro
ebooks.infobits.ro
Cărți, culegeri de probleme și cursuri în format electronic
(simplu, rapid, sigur, *.pdf)
www.infobits.ro
Biblioteca Digitală de Informatică "TUDOR SORIN"

Materiale educaționale în format electronic