03 - Podmienka, cyklus

Kaleidoskop

V tejto kapitole si zopakujeme premenné, vyskúšame eventy a cyklus.

Začneme s jednoduchým kreslením. A na konci kapitoly si budeš vedieť vytvoriť vlastný kresliaci kaleidoskop s toľkými zkladlami, kolko sa do skutočného ani nezmestí. A výsledný obrazok si budeš môcť uložiť.

Táto lekcia je členená do kapitol / receptov.

0. príprava

Vytvor prázny sketch -> editor.p5js.org

Nastave velkosť plátna (canvas) na celú dostupnú šírku/výšku.

Pomôžu ti zabudované properties windowWidth a windowHeight

Nastav pozadie na čisto biele alebo čierne. Podľa preferencie.

1. kreslenie

Vytvor jednoduché kreslenie pomocou zobrazenia kruhu (ellipse) na pozíci myši.

Pozri zabudované properties mouseX a mouseY

1.1 spojitá čiara

Miesto ellipse použi line. Pre spojenie predchádzajúcej pozície myši a aktuálnej.

Pozri zabudované properties pmouseX a pmouseY

Pozor na stroke color.

1.2 začiatok a koniec

Kresli len keď je stlačená myš:

mouseIsPressed

Bonus: Pri stlačení pravého tlačidla na myši zresetuj/zmaž plochu. Ak chceš zakázať kontextové menu, použi:

<body oncontextmenu="return false;">

2. farba

2.1 náhodná farba

Použi random pre generovanie farby čiary.

Nastav hrubšiu šírku hrany strokeWeight()

2.2 HSB

Ak nechceme úplne divoko náhodné farby. Pomôže nám model HSB.

Zafixuj saturation a brightness na rovnakých hodntách a generuj len náhodné Hue.

Budeš potrebovať metódu colorMode()Aký rozsah hodnôt môžeme zadať pre Hue? (Hint .... má tvar kruhu) Viac info na -> https://p5js.org/learn/color.html

2.3 plynulá zmena farby

Pre postupnú zmenu farby máme niekoľko možností.

lineárny prírastok (hue = (hue + hueShift) % 360
použiť funkciu perlin noise (a viac info a príklad)

Ken Perlin developed the noise function while working on the original Tron movie in the early 1980s; he used it to create procedural textures for computer-generated effects. In 1997, Perlin won an Academy Award in technical achievement for this work. Source: https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-noise/a/perlin-noise

O farbách v p5.js sa dočítaš aj na https://celiawrite.medium.com/learn-apply-p5-js-b927e254cf11

Bonus: pri kliknutí myšou začni s náhodnou (alebo s komplementárnou farbou k tej, ktorá bola naposledy použitá)