> For the complete documentation index, see [llms.txt](https://vyuka.digitalneumenia.sk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyuka.digitalneumenia.sk/kp-3/02-animacia-premenne-random.md).

# 02 - Animácia - premenné, random

V predchádzajúcej lekcii sme programovali obrázky pomocou zabudovaných funkcií pre vykreslovanie 2D primitív -> síce o čosi zdĺhavejšie, než vo vašom preferovanom kresliacom programe - ale aspoň sa výsledok nehýbe ani nič navyše nerobí.

Tak sa to môže zdať zvonka na prvý pohľad. 

Ale v skutočnosti hneď po inicializovaní aplikácie funkciou `setup()` sa následne 60x za sekundu prekreslí nanovo funkciou `draw()`- áno, presne ten istý obrázok.

...chcelo by to zmenu a na to tu máme premennú

{% hint style="info" %}
Veľmi pekne je celá interaktivita a práca s myšou aj klávesnicou popísaná v kapitole **interactivity** -> <https://p5js.org/learn/interactivity.html>
{% endhint %}

### Zabudované premenné

Knižnica p5.js nám poskytuje hneď niekoľko zabudovaných premenných - netreba ich inicializovať. Sú tam a dajú sa použiť hocikedy.

Napríklad `mouseX` a `mouseY` - ktoré obsahujú X a Y kordináty vášho kurzoru myši.

Skúsme to použiť:

```javascript
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50);
}
```

Na kurzore máme nalepený kruh. Hýbe sa to:\
![](/files/HKtl5L4PXZ8v5qKKNnI2)

Čo sa stane, ak presunieme `background(220);` z funkcie `draw()` do funkcie `setup()` ?

```javascript
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  ellipse(mouseX, mouseY, 50);
}
```

Jednoduchý kresliaci program:\
![](/files/piHbCpgpSseDnV2cT8rd)

{% hint style="info" %}
Skús použiť mouseX alebo mouseY aj pre definovanie farby kruhu
{% endhint %}

Teraz ak chceme zresetovať stav a začať "odznova" - musíme vypnúť/zapnúť sketch...

### Event - mousePressed()

Event je špeciálna - trpezlivá - funkcia, ktorá nič nerobí a čaká na svoju chíľu - keď nastane definovaná udalosť.

{% hint style="info" %}
Stále sme v prostredí JavaScriptu. Pre viac informácií o eventoch -> <https://developer.mozilla.org/en-US/docs/Web/Events>
{% endhint %}

Pre náš prípad ideme defunovať funkciu (áno, event je tiež funkcia), ktorá po kliknutí myšou zmaže všetko, čo bolo doposiaľ do canvasu nakreslené:

```javascript
function setup() {
  createCanvas(400, 400);
  background(10);
}

function draw() {
  noStroke();
  fill(mouseY, 50);
  ellipse(mouseX, mouseY, 50);
}

function mousePressed() {
  background(10);
}
```

Link pre vyskúšanie: <https://editor.p5js.org/igor-kamil/sketches/TeuSy28tH>

### Vlastné premenné

Syntax pre definovanie vlastnej premennej: `let premenna`

Život (globálnej) premennej by mal pozostávať z 3. krokov:

1. deklarácia (na začiatku sketchu)
2. inicializácia (pridelenie prvej hodnoty v `setup()`)
3. použitie v kóde

#### Úloha: animácia - nechať kruh vyletieť von z canvasu:

```javascript
// https://editor.p5js.org/igor-kamil/sketches/JY_YJ4pqR

let posX
let posY;

function setup() {
  createCanvas(400, 400);
  background(10);
  posX = 0; 
  posY = 200;
}

function draw() {
  noStroke();
  fill(255, 10);
  ellipse(posX, posY, 40);
  posX = posX + 1;
  posY = posY - 0.3;
  
}

function mousePressed() {
  background(10);
  posX = 0;
  posY = 200;
}

```

{% hint style="info" %}
`let` vs `var` ? -> <https://www.youtube.com/watch?v=q8SHaDQdul0>
{% endhint %}

### Random()

Jedna z možností, ako priniesť "*zmenu*" do aplikácie je použiť zabudovanú funkciu `random()`

{% embed url="<https://p5js.org/reference/#/p5/random>" %}
Random v referenčnej príručke
{% endembed %}

#### Úloha: kreslenie kruhov na náhodnej pozícií s náhodnou farbou

```javascript
// https://editor.p5js.org/igor-kamil/sketches/mPmeIX4EP

let r, g, b;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(10);
  r = random(255);
  g = random(255);
  b = random(255);
  frameRate(10);
}

function draw() {
  noStroke();
  r = r + random(-10, 10);
  g = g + random(-10, 10);
  b = b + random(-10, 10);
  fill(r, g, b);
  ellipse(random(width), random(height), 50);
}

function mousePressed() {
  background(10);
  r = random(255);
  g = random(255);
  b = random(255);
}

```

![](/files/snA4JEEdoLlkp6O6LVwB)

V horespomínanom príklade používame ďaľšie **zabudované funkcie**: `width`, `height`, `windowWidth` a `windowHeight`

Takto definovaný sketch má vždy veľkosť obrazovky. Od teraz nemáme pod kontrolou, koľko pixlov budeme mať k dispozícií vopred - avšak taká je povaha webového prostredia, kde nevieme dopredu, či si váš sketch pozrie niekto na fullHD monitore alebo na smartphone.&#x20;

AK si chceš pozrieť svoj sketch fullscreen: **File -> Share -> Fullscreen**

Napr. <https://editor.p5js.org/igor-kamil/full/mPmeIX4EP>

#### Úloha: symetrické kreslenie

Vytvor sketch, kde pomocou mouseX/mouseY a pmouseX/pmouseY vieš kresliť, ako v kresliacom programe. Zapoj `random()` pre farby. Uprav program, aby zrkadlovo krelil to isté:

```javascript
// https://editor.p5js.org/igor-kamil/sketches/jTzHDAgHp

let posX, posY;
let R, G, B;

function setup() {
  createCanvas(windowWidth, windowHeight);
  posX = width / 2;
  posY = height / 2;

  R = random(255);
  G = random(255);
  B = random(255);
  background(0);
}

function draw() {
  fill(R, G, B, 100);
  R += random(-10, 10);
  G += random(-10, 10);
  B += random(-10, 10);
  
  stroke(R,G,B);

  line(
    posX + (pmouseX - width / 2),
    posY + (pmouseY - height / 2),
    posX + (mouseX - width / 2),
    posY + (mouseY - height / 2),
  );

  line(
    posX - (pmouseX - width / 2),
    posY + (pmouseY - height / 2),
    posX - (mouseX - width / 2),
    posY + (mouseY - height / 2),
  );
    
}

function mousePressed() {
  background(0);

  posX = width / 2;
  posY = height / 2;

  R = random(255);
  G = random(255);
  B = random(255);
}

```

![](/files/CKHB4gw9OxrK9trH62rg)