{"id":444,"date":"2023-04-19T10:48:41","date_gmt":"2023-04-19T10:48:41","guid":{"rendered":"https:\/\/tarkvara.thkit.ee\/veeb\/?page_id=444"},"modified":"2023-05-09T16:53:57","modified_gmt":"2023-05-09T16:53:57","slug":"kukkumine","status":"publish","type":"page","link":"https:\/\/tarkvara.thkit.ee\/veeb\/kukkumine\/","title":{"rendered":"Kukkumine"},"content":{"rendered":"\n

Tegelikus elus toimuvaid liikumisi j\u00e4ljendades tuleb m\u00f5nigikord ka kukkumist ehk vaba langemist j\u00e4rgi teha. J\u00e4rgnevalt m\u00f5ned n\u00e4ited, seletused ja soovitused selle kohta.<\/p>\n\n\n\n

Ring ekraanil<\/strong><\/p>\n\n\n\n

Kukkumine kipub millegip\u00e4rast vahel kergesti palliga seostuma. Pall aga teadaolevalt enamasti
ringikujuline. Seet\u00f5ttu tuletame meelde, kuidas sai ringi joonistada ekraanile. Ristk\u00fcliku puhul
piisas joonistamiseks \u00fchest k\u00e4sust. Ringi ja muude kujundite puhul aga tuleb joonistamist alustada k\u00e4suga beginPath(). Seej\u00e4rel luua vajalikud kujundid. Ning l\u00f5puks \u00f6elda stroke() v\u00f5i fill() vastavalt sellele, kas soovitakse n\u00e4ha vaid piirjooni v\u00f5i siis kogu kujund seest \u00e4ra t\u00e4ita. Ning ringi joonistamiseks sobib kaare tegemise k\u00e4sklus (arc). M\u00e4\u00e4ratakse, keskpunkt, raadius, kaare algnurk ja kaarepikkus radiaanides ning joonistamise suund. Ringi puhul v\u00f5ib alustada algusest (ehk nullkraadist), t\u00e4isringiks on 2 piid ehk 2*Math.PI ning joonistamise suund pole t\u00e4htis, siin n\u00e4ites j\u00e4tsime selle true-ks.<\/p>\n\n\n

\n<!doctype html>\n<html>\n <head>\n <title>Kukkumine<\/title>\n <script>\n var x=20, y=20, r=10, samm=0;\n function joonista(){\n var t=document.getElementById("tahvel");\n var g=t.getContext("2d");\n g.clearRect(0, 0, t.width, t.height);\n g.strokeStyle="red";\n g.beginPath()\n g.arc(x, y, r, 0, 2*Math.PI, true);\n g.stroke()\n }\n <\/script>\n <\/head>\n <body onload="joonista()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"><\/canvas><br \/>\n <\/body>\n<\/html>\n\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
\u00dchtlane kukkumine<\/strong><\/p>\n\n\n\n
\u00dclalt alla liikumine toimub sarnaste arvutuste tulemusena nagu ennist vaadatud vasakult paremale liikumine – vaid muuta tuleb y-koordinaati. Algusfunktsioonis k\u00fcsitakse ligip\u00e4\u00e4s tahvlile ja temale joonistamiseks vajalikule graafilisele kontekstile (muutujad t ja g). K\u00e4sklus<\/p>\n\n\n
\n setInterval('liigu()', 100);\n\n<\/pre><\/div>\n\n\n
teatab, et funktsioon liigu() tuleb k\u00e4ivitada iga 100 millisekundi tagant, ehk siis 10 korda
sekundis. Seda ooteaega saab katsetada ja muuta, aga 100 on osutunud suhteliselt kuldseks
keskteeks. Pikem ooteaeg n\u00e4ib juba silmale viivitusena. L\u00fchema aja puhul aga ei pruugi seade suuta enne pilti korralikult valmis joonistada.<\/p>\n\n\n
\n<!doctype html>\n<html>\n <head>\n <title>Kukkumine<\/title>\n <script>\n var x=20, y=20, r=10, ysamm=1;\n var t, g; \/\/tahvel, graafiline kontekst\n\n function algus(){\n t=document.getElementById("tahvel");\n g=t.getContext("2d");\n setInterval('liigu()', 100);\n }\n\n function joonista(){\n g.clearRect(0, 0, t.width, t.height);\n g.strokeStyle="red";\n g.beginPath()\n g.arc(x, y, r, 0, 2*Math.PI, true);\n g.stroke()\n }\n\n function liigu(){\n y=y+ysamm;\n joonista();\n }\n <\/script>\n <\/head>\n <body onload="algus()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"><\/canvas><br \/>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
Kiirenev kukkumine<\/strong><\/p>\n\n\n\n
Tavaelu j\u00e4lgides saab k\u00f5rgemalt kukkudes k\u00e4tte suurema kiiruse. Ehk siis kiirus kukkumise ajal
kasvab. Mingist suurusest hakkab kiirust piirama \u00f5hutakistus, aga lihtsamate arvutuste juures ka f\u00fc\u00fcsika\u00f5pikus j\u00e4etakse \u00f5hutakistus v\u00e4lja. V\u00e4liolukorda \u00fcsna t\u00e4pselt saaks j\u00e4ljendada, kui arvestada, mitu ekraanipunkti vastab \u00fchele meetrile looduses ning siis vastavalt esemed ja raskuskiirendus paika ajada. Lihtsamal juhul aga v\u00f5ib kukkumissammule igal ringil veidi otsa liita, et sammu pikkus suureneks. Ning sobivat tulemust saab juba silma j\u00e4rgi hinnata. Siin n\u00e4ites said k\u00f5igepealt \u00fcles muutujad sammu ja kiirenduse kohta<\/p>\n\n\n
\n var ysamm=1, ykiirendus=0.4;\n\n<\/pre><\/div>\n\n\n
Liikumisfunktsioonis k\u00f5igepealt suurendatakse sammu kiirenduse jagu ning siis liigutakse igrekiga sammu jagu allapoole.<\/p>\n\n\n
\n ysamm=ysamm+ykiirendus;\n y=y+ysamm;\n\n<\/pre><\/div>\n\n\n
Kood tervikuna<\/p>\n\n\n
\n<!doctype html>\n<html>\n <head>\n <title>Kukkumine<\/title>\n <script>\n var x=20, y=20, r=10;\n var ysamm=1, ykiirendus=0.4;\n var t, g; \/\/tahvel, graafiline kontekst\n\n function algus(){\n t=document.getElementById("tahvel");\n g=t.getContext("2d");\n setInterval('liigu()', 100);\n }\n\n function joonista(){\n g.clearRect(0, 0, t.width, t.height);\n g.strokeStyle="red";\n g.beginPath()\n g.arc(x, y, r, 0, 2*Math.PI, true);\n g.stroke()\n }\n\n function liigu(){\n ysamm=ysamm+ykiirendus;\n y=y+ysamm;\n joonista();\n }\n <\/script>\n <\/head>\n <body onload="algus()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"><\/canvas><br \/>\n <\/body>\n<\/html>\n\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
Kukkumiskoha m\u00e4\u00e4ramine hiirega<\/strong><\/p>\n\n\n\n
Liikumist j\u00e4llegi mugavam ekraanil juhatada hiirega. Siin n\u00e4ites leitakse k\u00f5igepealt hiire asukoht tahvli suhtes (muutujad hx ja hy) ning p\u00e4rast paigutatakse ring vastavale kohale. Vajalik on samuti ysamm’u ehk allakukkumiskiiruse m\u00e4\u00e4ramine nulliks, sest muul juhul j\u00e4tkaks pall hiirevajutuse kohast endise kiirusega kukkumist ning varsti poleks teda ekraanil v\u00f5imalik enam kuigiv\u00f5rd j\u00e4lgida<\/p>\n\n\n
\nfunction hiirAlla(e){\n var tahvlikoht=t.getBoundingClientRect();\n var hx=e.clientX-tahvlikoht.left;\n var hy=e.clientY-tahvlikoht.top;\n x=hx;\n y=hy;\n ysamm=0;\n }\n\n<\/pre><\/div>\n\n\n
Kui n\u00fc\u00fcd n\u00f5ndamoodi toimetada, siis igal hiire vajutamise korral h\u00fcppab sinna pall ja asub sealt vaikselt alla kukkuma. Kood tervikuna.<\/p>\n\n\n
\n<!doctype html>\n<html>\n <head>\n <title>Kukkumine<\/title>\n <script>\n var x=20, y=20, r=10;\n var ysamm=1, ykiirendus=0.4;\n var t, g; \/\/tahvel, graafiline kontekst\n\n function algus(){\n t=document.getElementById("tahvel");\n g=t.getContext("2d");\n setInterval('liigu()', 100);\n }\n\n function joonista(){\n g.clearRect(0, 0, t.width, t.height);\n g.strokeStyle="red";\n g.beginPath()\n g.arc(x, y, r, 0, 2*Math.PI, true);\n g.stroke()\n }\n\n function liigu(){\n ysamm=ysamm+ykiirendus;\n y=y+ysamm;\n joonista();\n }\n function hiirAlla(e){\n var tahvlikoht=t.getBoundingClientRect();\n var hx=e.clientX-tahvlikoht.left;\n var hy=e.clientY-tahvlikoht.top;\n x=hx;\n y=hy;\n ysamm=0;\n }\n <\/script>\n <\/head>\n <body onload="algus()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"\n onmousedown="hiirAlla(event)"><\/canvas><br \/>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
Peatumine servas<\/em><\/strong><\/p>\n\n\n\n
Nagu niisama liikumise juures, nii ka kukkumise puhul on vahel hea, kui kokkupandud kujundid  meie tahtmata silmapiirilt ei kao. Taas tuleb kontrollida, et soovitav j\u00e4rgmine asukoht oleks lubatud  ala sees, vaid siis liigutakse edasi. Ning tulevikule m\u00f5eldes on lisatud muutuja ka x-suunalise  liikumise tarbeks. Lihtsalt kuna xsamm on parajasti 0, siis kukutakse otse alla. Kui juhtub, et uus  leitud asukoht satuks tahvlilt v\u00e4lja, siis pannakse x ja y-sammud nulliks. <\/p>\n\n\n
\n function liigu(){ \n ysamm=ysamm+ykiirendus; \n if(kasSees(x+xsamm, y+ysamm)){ \n x=x+xsamm; \n y=y+ysamm;  \n } else { \n xsamm=0; ysamm=0; \n } \n joonista(); \n } \n\n<\/pre><\/div>\n\n\n
Ringi peatamise v\u00f5imega kood tervikuna: <\/p>\n\n\n
\n<!doctype html> \n<html> \n <head> \n <title>Kukkumine<\/title> \n <script> \n var x=20, y=20, r=10; \n var ysamm=1, xsamm=0, ykiirendus=0.4; \n var t, g; \/\/tahvel, graafiline kontekst \n  \n function algus(){ \n t=document.getElementById("tahvel"); \n g=t.getContext("2d"); \n setInterval('liigu()', 100); \n } \n  \n function joonista(){ \n g.clearRect(0, 0, t.width, t.height); \n g.strokeStyle="red"; \n g.beginPath() \n g.arc(x, y, r, 0, 2*Math.PI, true); \n g.stroke()\n } \n  \n function liigu(){ \n ysamm=ysamm+ykiirendus; \n if(kasSees(x+xsamm, y+ysamm)){ \n x=x+xsamm; \n y=y+ysamm;  \n } else { \n xsamm=0; ysamm=0; \n } \n joonista(); \n } \n function kasSees(uusX, uusY){ \n if(uusX-r<0){return false;} \n if(uusX+r>t.width){return false;} \n if(uusY-r<0){return false;} \n if(uusY+r>t.height){return false;} \n return true; \n } \n function hiirAlla(e){ \n var tahvlikoht=t.getBoundingClientRect();  var hx=e.clientX-tahvlikoht.left; \n var hy=e.clientY-tahvlikoht.top; \n x=hx; \n y=hy; \n ysamm=0; \n } \n <\/script> \n <\/head> \n <body onload="algus()"> \n <canvas id="tahvel" width="300" height="200"  \n style="background-color:yellow" \n onmousedown="hiirAlla(event)"><\/canvas><br \/> \n <\/body> \n<\/html> \n\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
Palli loopimine\u00a0<\/em><\/strong><\/p>\n\n\n\n
N\u00fc\u00fcdseks on juba piisavalt oskusi kogunenud, et midagi t\u00e4iesti elavat ja usutavat kokku panna.  N\u00e4itena palli heitmise rakendus, kus pall hakkab liikuma hiire poole. Mida kaugemal hiir on, seda  kiiremini. Servade juures kontrollitakse, et pall sealt v\u00e4lja ei l\u00e4heks. Kui serv ette tuleb, siis  v\u00f5etakse hoog maha. Kui v\u00f5imalust, hakkab ta sellest kohast uuesti allapoole kukkuma. Kui alla  j\u00f5udnud, siis peab lihtsalt j\u00e4\u00e4ma ootama, kuni hiirega uuesti vajutatakse ja pall liikuma  meelitatakse.  <\/p>\n\n\n\n
Tehniliselt midagi v\u00e4ga erip\u00e4rast v\u00f5rreldes eelnenuga polegi. M\u00f5lema koordinaadi puhul pannakse  pall sammuma hiire suunas. Sammu pikkus v\u00f5rdeline kaugusega hiirest.  <\/p>\n\n\n
\n xsamm=(hx-x)*kiiruskoef; \n ysamm=(hy-y)*kiiruskoef; \n\n<\/pre><\/div>\n\n\n
Tulemusena aga valmib t\u00e4iesti mitmek\u00fclgne palli heitmise rakendus, mida saab edaspidi  mitmesuguste liikuvate mudelite juures kasutada. <\/p>\n\n\n
\n<!doctype html> \n<html> \n <head> \n <title>Kukkumine<\/title> \n <script> \n var x=20, y=20, r=10; \n var ysamm=1, xsamm=0, ykiirendus=0.4, kiiruskoef=0.1;  var t, g; \/\/tahvel, graafiline kontekst \n  \n function algus(){ \n t=document.getElementById("tahvel"); \n g=t.getContext("2d"); \n setInterval('liigu()', 100); \n } \n  \n function joonista(){ \n g.clearRect(0, 0, t.width, t.height); \n g.strokeStyle="red"; \n g.beginPath() \n g.arc(x, y, r, 0, 2*Math.PI, true); \n g.stroke() \n } \n  \n function liigu(){ \n ysamm=ysamm+ykiirendus; \n if(kasSees(x+xsamm, y+ysamm)){ \n x=x+xsamm; \n y=y+ysamm;  \n } else { \n xsamm=0; ysamm=0; \n } \n joonista(); \n } \n function kasSees(uusX, uusY){ \n if(uusX-r<0){return false;}\n if(uusX+r>t.width){return false;} \n if(uusY-r<0){return false;} \n if(uusY+r>t.height){return false;} \n return true; \n } \n function hiirAlla(e){ \n var tahvlikoht=t.getBoundingClientRect(); \n var hx=e.clientX-tahvlikoht.left; \n var hy=e.clientY-tahvlikoht.top; \n xsamm=(hx-x)*kiiruskoef; \n ysamm=(hy-y)*kiiruskoef; \n } \n <\/script> \n <\/head> \n <body onload="algus()"> \n <canvas id="tahvel" width="300" height="200"  \n style="background-color:yellow" \n onmousedown="hiirAlla(event)"><\/canvas><br \/> \n <\/body> \n<\/html> \n\n<\/pre><\/div>\n\n\n
Nagu piltidelt n\u00e4ha, saab n\u00f5nda panna palli oma asukohta muutma. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Tegelikus elus toimuvaid liikumisi j\u00e4ljendades tuleb m\u00f5nigikord ka kukkumist ehk vaba langemist j\u00e4rgi teha. J\u00e4rgnevalt m\u00f5ned n\u00e4ited, seletused ja soovitused selle kohta. Ring ekraanil Kukkumine kipub millegip\u00e4rast vahel kergesti palliga seostuma. Pall aga teadaolevalt enamastiringikujuline. Seet\u00f5ttu tuletame meelde, kuidas sai ringi joonistada ekraanile. Ristk\u00fcliku puhulpiisas joonistamiseks \u00fchest k\u00e4sust. Ringi ja muude kujundite puhul aga tuleb … Loe edasi Kukkumine<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-444","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":38,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/444\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/444\/revisions\/532"}],"wp:attachment":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/media?parent=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}