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ă.