# 03 - Podmienka, cyklus
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](https://editor.p5js.org)
Nastave velkosť plátna (canvas) na celú dostupnú šírku/výšku.
{% hint style="info" %}
Pomôžu ti zabudované properties **`windowWidth`** a **`windowHeight`**
{% endhint %}
Nastav pozadie na čisto biele alebo čierne. Podľa preferencie.
## 1. kreslenie
Vytvor jednoduché kreslenie pomocou zobrazenia kruhu (**`ellipse`**) na pozíci myši.
{% hint style="info" %}
Pozri zabudované properties **`mouseX`** a **`mouseY`**
{% endhint %}
### 1.1 spojitá čiara
Miesto **`ellipse`** použi **`line`**. Pre spojenie predchádzajúcej pozície myši a aktuálnej.
{% hint style="info" %}
Pozri zabudované properties **`pmouseX`** a **`pmouseY`**
{% endhint %}
{% hint style="danger" %}
Pozor na **`stroke`** color.
{% endhint %}
### 1.2 začiatok a koniec
Kresli len keď je stlačená myš:
{% hint style="info" %}
**`mouseIsPressed`**
{% endhint %}
Bonus: Pri stlačení pravého tlačidla na myši zresetuj/zmaž plochu.\
Ak chceš zakázať kontextové menu, použi:
```html
```
### 2. farba
### 2.1 náhodná farba
Použi **`random`** pre generovanie farby čiary.
{% hint style="info" %}
Nastav hrubšiu šírku hrany **`strokeWeight()`**
{% endhint %}
### 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.
{% hint style="info" %}
Budeš potrebovať metódu **`colorMode()`**\
Aký rozsah hodnôt môžeme zadať pre Hue? (Hint .... má tvar kruhu)\
Viac info na ->
{% endhint %}
{% hint style="warning" %}
Hue— 0 to 360 by default. \
Saturation—0 to 100 by default. \
Brightness—0 to 100 by default.
{% endhint %}
### 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](https://p5js.org/reference/p5/noise/) (a [viac info a príklad](https://genekogan.com/code/p5js-perlin-noise/))
{% hint style="info" %}
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:
{% endhint %}
O farbách v p5.js sa dočítaš aj na
**Bonus:** pri kliknutí myšou začni s náhodnou (alebo s komplementárnou farbou k tej, ktorá bola naposledy použitá)
### 3. Uloženie obrazku "S"
Načo by bol Paintbrush, keby sme nevedeli výsledný obrázok uložiť?
Pre stlačenie kávesy "s" ulož práve nakreslený obrázok.
{% hint style="info" %}
Budeš potrebovať metódu **`keyPressed()`** a **`save()`**
{% endhint %}
### 4. zrkadlenie
Máme celkom pekné kreslenie myšou... ale posuňme to kúsok ďalej. Kresli čiaru hneď 2x - pridaj zrkadlový odraz.
```javascript
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
strokeWeight(2);
stroke(0);
// Draw the normal line
line(pmouseX, pmouseY, mouseX, mouseY);
// Mirror it across the vertical center
line(width-pmouseX, pmouseY, width-mouseX, mouseY);
}
```
{% hint style="info" %}
#### **Čo sa práve stalo?**
Odčítaním `mouseX` od `width` otočíš pozíciu horizontálne – predstav si, že prevrátiš polohu myši oproti pravej strane plátna namiesto ľavej. Rovnaký trik funguje aj pre vertikálne zrkadlenie, ale použiješ `height - mouseY`.
{% endhint %}
### 5. kaleidoskop (for cyklus)
Teraz, keď si zvládol zrkadlenie, poďme na vyšší level s **kaleidoskopickým efektom**. Využijeme silu **rotácie**, aby sme opakovane kreslili tvoje čiary v rôznych uhloch – presne ako kaleidoskop. 🌈✨
{% hint style="info" %}
Metódy: **`translate()`** a **`rotate()`**
{% endhint %}
Nakreslíme čiaru, otočíme plátno o kúsok, a znova kreslíme... a znova... a znova…
```javascript
function setup() {
createCanvas(400, 400);
background(220);
angleMode(DEGREES); // Používame stupne pre jednoduchšiu rotáciu
}
function draw() {
translate(width / 2, height / 2); // Presunieme pôvod do stredu plátna
strokeWeight(2);
stroke(0);
let rotations = 8; // 8 segmentov na zaciatok
for (let i = 0; i < rotations; i++) {
// Otočíme o 360 / rotations stupňov
rotate(360 / rotations);
// nakreslime povodnu ciaru (pozor - platno je uz centrovane, preto musime poziciu ciary posunut)
line(pmouseX - width / 2, pmouseY - height / 2, mouseX - width / 2, mouseY - height / 2);
}
}
```
{% hint style="info" %}
**Prečo používame `translate()`?**
Bez `translate()` by sa všetky rotácie diali od ľavého horného rohu plátna! Skončili by sme s niečím veľmi zvláštnym (alebo možno cool, ale určite nie kaleidoskop). Presunom pôvodu (origin) do stredu to vyzerá správne.
**Prečo `pmouseX - width / 2`?**
Keďže sme presunuli pôvod do stredu, musíme upraviť `mouseX` a `pmouseX`, aby to sedelo na nový referenčný bod. Odpočítanie `width / 2` posúva všetko do správnej pozície.
{% endhint %}
### **6.**Kombinácia zrkadlenia a kaleidoskopu
Poďme **skombinovať** čary! Je čas kresliť zrkadlené čiary vo všetkých smeroch. 💫
```javascript
function setup() {
createCanvas(400, 400);
background(220);
angleMode(DEGREES); // Používame stupne pre jednoduchšiu rotáciu
}
function draw() {
translate(width / 2, height / 2); // Presunieme pôvod do stredu plátna
strokeWeight(2);
stroke(0);
let rotations = 8; // 8 segmentov na zaciatok
for (let i = 0; i < rotations; i++) {
// Otočíme o 360 / rotations stupňov
rotate(360 / rotations);
// nakreslime povodnu ciaru (pozor - platno je uz centrovane, preto musime poziciu ciary posunut)
line(pmouseX - width / 2, pmouseY - height / 2, mouseX - width / 2, mouseY - height / 2);
// a zrkadlime ju:
line(width / 2 - pmouseX, pmouseY - height / 2, width / 2- mouseX , mouseY - height / 2);
}
}
```
{% hint style="info" %}
**Môžem zmeniť počet rotácií?**
Samozrejme! Stačí zmeniť premennú `rotations`. Chceš menej? Skús 4. Chceš viac? Poď divoko s 12 alebo dokonca 42!
{% endhint %}
**bonusy:**
* zmena veľkosti **strokeWeight** podľa pozície myši
* Experimentuj s farbami (Použi Perlinov šum na zmenu farby hladko počas kreslenia)
* **Dynamické rotácie**: Skús meniť počet rotácií podľa polohy myši alebo rýchlosti.
* **Animuj kaleidoskop**: Namiesto rotovania o pevnú hodnotu, nech sa uhol rotácie mení časom pre neustále sa meniaci vzor.
* použiť tvary
Ďaľšie tipy a info:
