TOL203M-WebGL

Heimadæmi 2

Heimadæmi 2

Dæmi 1

Breyta á sýniforritinu gasket1 (sjá heimadæmi 1) á eftirfarandi vegu.

  1. Í stað þess að fyrsti punkurinn sé innan í þríhyrningnum, þá byrji hann langt fyrir utan hann.
  2. Einn hornpunktanna hafi 90% líkur á að vera valinn en hinir tveir aðeins 5% hvor.

Lausn

Útkoma (a-liður):

(Sérstæð útgáfa)

Hér höfum við sett byrjunarpunktinn í (100, 100), sem er langt fyrir utan þríhyrninginn. Við sjáum samt að myndin breytist lítið sem ekkert. Fyrst teiknað er 5000 punkta er nægur tími fyrir punktinn að nálgast þríhyrningnum og að lokum lenda inni í honum.

Forritskóði (a-liður):

HTML WIP (vinsamlegast notið „View frame source“ á þessari síðu eða „Frame source“ á sérstæðu síðunni)
JavaScript

  

Útkoma (b-liður):

(Sérstæð útgáfa)

Hér höfum við valið (vegna þæginda í útfærslu) punktinn neðst til hægri til að hafa 90% líkur á að vera valinn. Við sjáum að myndin er mun meira lituð í því horni hvers þríhyrningshluta Sierpinski-þríhyrningsins.

Forritskóði (b-liður):

HTML WIP (vinsamlegast notið „View frame source“ á þessari síðu eða „Frame source“ á sérstæðu síðunni)
JavaScript

  

Dæmi 2

Gefið er WebGL forrit circlefan sem teiknar fyllta rauða hringskífu sem nálguð er með reglulegum marghyrningi. Breyta á forritinu þannig að það noti TRIANGLES í staðinn fyrir TRIANGLE_FAN til að teikna hana.

Lausn

Útkoma:

(Sérstæð útgáfa)

Hér göngum við rangsælis í gegnum hornpunkta marghyrningsins og skilgreinum þríhyrning með miðpunktinum, síðasta punktinum sem labbað var yfir og núverandi punkti. Við sendum þar með mun fleiri punkta til grafíkkortsins og endurtökum mikið.

Forritskóði:

HTML WIP (vinsamlegast notið „View frame source“ á þessari síðu eða „Frame source“ á sérstæðu síðunni)
JavaScript

    
  

Dæmi 3

Breyta á circlefan (sjá dæmi 2) þannig að hægt sé að velja fjölda hornpunkta í marghyrningnum.

Lausn

Útkoma:

(Sérstæð útgáfa)

Hér búum við til sleða fyrir val á fjölda hornpunkta. Þegar sleðinn breytist, býr forritið til nýja punkta og sendir á grafíkkortið.

Forritskóði:

HTML WIP (vinsamlegast notið „View frame source“ á þessari síðu eða „Frame source“ á sérstæðu síðunni)
JavaScript

    
  

Dæmi 4

Gefið er WebGL forrit 7-shape-fan sem teiknar tölustafinn 7 með því að nota TRIANGLE_FAN. Breyta á forritinu þannig að það noti TRIANGLE_STRIP í staðinn.

Lausn

Útkoma:

(Sérstæð útgáfa)

Í forritskóða eru hornpunktar sjöunnar merktir með tveggja stafa kóða með fyrsta staf U (Up), M (Middle) eða D (Down), og seinni staf L (Left) eða R (Right). Skyggnast má í JavaScript kóðann til að sjá röðina sem punktarnir eru skilgreindir.

Punkturinn efst til hægri er endurtekinn til þess að forðast að teikna þríhyrninga sem ekki er óskað eftir.

Forritskóði:

HTML WIP (vinsamlegast notið „View frame source“ á þessari síðu eða „Frame source“ á sérstæðu síðunni)
JavaScript

    
  

Dæmi 5

Gefið er WebGL forrit points sem leyfir notanda að búa til punkta með því að smella á strigann. Breyta á forritinu þannig að það teikni litla þríhyrninga í staðinn fyrir punkta og þannig að hægt sé hreinsa strigann með því að hægrismella á hann.

Lausn

Útkoma:

(Sérstæð útgáfa)

Til aðstoðar er breytan index notuð, en hún segir til um hversu mikið af gögnum WebGL á að skoða.

Í hvert sinn sem smellt er á strigann er bætt við þremur punktum í sömu fjarlægð frá músinni og frá hverjum öðrum. Nákvæm staðsetning þeirra er handahófskennd. Breytan index er síðan hækkuð um 3.

Ef hægri-smellt er á strigann þarf ekkert annað að gera en að núllstilla index.

Það ber að nefna að í hvert sinn sem bætt er við þríhyrningi er ekki sent alla punktana aftur til grafíkkortsins, heldur bara þá sem hefur verið bætt við. Einnig er ekki eytt neinum gögnum af grafíkkortinu þegar hægri-smellt er.

Forritskóði:

HTML WIP (vinsamlegast notið „View frame source“ á þessari síðu eða „Frame source“ á sérstæðu síðunni)
JavaScript