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.
Nastav pozadie na čisto biele alebo čierne. Podľa preferencie.
1. kreslenie
Vytvor jednoduché kreslenie pomocou zobrazenia kruhu (ellipse) na pozíci myši.
1.1 spojitá čiara
Miesto ellipse použi line. Pre spojenie predchádzajúcej pozície myši a aktuálnej.
Pozor na stroke color.
1.2 začiatok a koniec
Kresli len keď je stlačená myš:
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.
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.
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)
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.
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. 🌈✨
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);
}
}
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);
}
}
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:
Last updated