03 - Podmienka, cyklus

Kaleidoskop

Previous02 - Animácia - premenné, random Next04 - Zvuk & FFT

Last updated 6 months ago

03 - Podmienka, cyklus

Kaleidoskop

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

Nastave velkosť plátna (canvas) na celú dostupnú šírku/výšku.

Pomôžu ti zabudované properties windowWidth a windowHeight

Nastav pozadie na čisto biele alebo čierne. Podľa preferencie.

1. kreslenie

Vytvor jednoduché kreslenie pomocou zobrazenia kruhu (ellipse) na pozíci myši.

Pozri zabudované properties mouseX a mouseY

1.1 spojitá čiara

Miesto ellipse použi line. Pre spojenie predchádzajúcej pozície myši a aktuálnej.

Pozri zabudované properties pmouseX a pmouseY

Pozor na stroke color.

1.2 začiatok a koniec

Kresli len keď je stlačená myš:

mouseIsPressed

Bonus: Pri stlačení pravého tlačidla na myši zresetuj/zmaž plochu. Ak chceš zakázať kontextové menu, použi:

<body oncontextmenu="return false;">

2. farba

2.1 náhodná farba

Použi random pre generovanie farby čiary.

Nastav hrubšiu šírku hrany strokeWeight()

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.

Budeš potrebovať metódu colorMode()Aký rozsah hodnôt môžeme zadať pre Hue? (Hint .... má tvar kruhu) Viac info na -> https://archive.p5js.org/learn/color.html

Hue— 0 to 360 by default. Saturation—0 to 100 by default. Brightness—0 to 100 by default.

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 (a viac info a príklad)

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: https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-noise/a/perlin-noise

O farbách v p5.js sa dočítaš aj na https://celiawrite.medium.com/learn-apply-p5-js-b927e254cf11

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.

Budeš potrebovať metódu keyPressed() a save()

4. zrkadlenie

Máme celkom pekné kreslenie myšou... ale posuňme to kúsok ďalej. Kresli čiaru hneď 2x - pridaj zrkadlový odraz.

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

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

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. 🌈✨

Metódy: translate() a rotate()

Nakreslíme čiaru, otočíme plátno o kúsok, a znova kreslíme... a znova... a znova…

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

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.

6.Kombinácia zrkadlenia a kaleidoskopu

Poďme skombinovať čary! Je čas kresliť zrkadlené čiary vo všetkých smeroch. 💫

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

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!

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:

Previous02 - Animácia - premenné, random Next04 - Zvuk & FFT

Last updated 6 months ago