02 - Animácia - premenné, random

Ak chceme zmenu, potrebujeme premennú

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ú

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

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ť:

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

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

Na kurzore máme nalepený kruh. Hýbe sa to:

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

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

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

Jednoduchý kresliaci program:

Skús použiť mouseX alebo mouseY aj pre definovanie farby kruhu

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ť.

Stále sme v prostredí JavaScriptu. Pre viac informácií o eventoch -> https://developer.mozilla.org/en-US/docs/Web/Events

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é:

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:

// 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;
}

let vs var ? -> https://www.youtube.com/watch?v=q8SHaDQdul0

Random()

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

reference | p5.js

Random v referenčnej príručke

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

// 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);
}

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.

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é:

// 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);
}