# 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:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://vyuka.digitalneumenia.sk/kp-3/03-podmienka-cyklus.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.