# 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)


---

# 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/02-animacia-premenne-random.md?ask=<question>
```

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.