04 - Oscilácia

Kmitanie všade okolo nás

Zdroj: https://www.freshphotons.com/post/55803355977/jtotheizzoe-mathani-following-1ucasvb

Úvod a motivácia

Po uvedení vektorov a síl by sme sa teraz azda mohli priamo pustiť naplno do modelovania húfov rýb, lietajúcich vtákov, plaziacich dážďoviek, poletujúcich mušiek a množstva iných organizmov okolo nás.

Avšak je tu ešte jedna dôležitá kapitola, skôr, než sa naplno ponoríme do "aplikovania" simulácie prírodných úkazov.

Je to kapitola o kmitaní (anglicky oscillation). Možno nie hneď na prvý poľad, ale celý svet okolo nás kmitá. Je to ten najrozšírenejší pohyb.

Kmitajú atómy na mieste v pevných objektoch. Vlnia sa vlny. V mori. Aj tie elektromagnetické okolo nás. Rádio. Aj wifi.

Kmitá naše srdce. Osciluje náš krvný obeh. Aj dýchanie.

Aj svetlo, ktoré vychádza z displeja keď práve toto teraz čítaš je kmitanie. Každá farba na trocha inej frekvencii.

Kmitanie je pre pochopenie reálneho sveta kľúčové. Tak poďme na to.

V tejto kapitole sa na téme oscilácie zvezie aj téma uhlov, trigonometrie a transformácií.

Uhly

Úloha 1

Doplň uhly do obrázku:

Zdroj: https://nature-of-code-2nd-edition.netlify.app/oscillation/#31-angles

Dobný zádrhel spočíva v tom, že vo svete programovania sa uhly zadávajú v radiánoch.

Čo je to radián?

Zdroj: https://www.wikihow.com/Calculate-Pi

Radián je merná jednotka pre uhly definovaná ako pomer dĺžky oblúka kružnice k polomeru tejto kružnice.

Zdroj: https://nature-of-code-2nd-edition.netlify.app/oscillation/#31-angles

Úloha 2

Zober nasledujúci sketch:

let angle = 0;

function setup() {
  createCanvas(640, 240);
}

function draw() {
  background(115, 130, 144);

  noStroke();
  rectMode(CENTER);
  // @todo translate();
  // @todo rotate();
  fill(194, 216, 185);
  rect(width/2 - 50, height/2, 100, 30);
  fill(228, 240, 208);
  rect(width/2 + 50, height/2, 100, 30);
  // @todo increment angle
}

Alebo zduplikuj sketch:

p5.js Web Editor

A implementuj rotáciu okolo stredu.

Úloha 3 (bonus)

• Nastav opacity pre pozadie

• Dynamicky rotuj podľa mouseY (a nezabudni na opačnú rotáciu)

Uhlový pohyb

V predchádajúcich kapitolách sme si vysvetlili, že základ pohybu sa dá predstaviť ako reťazec vzájomne sa ovplyvňujúcich vektorov:

sila (resp. sily) -> zrýchlenie -> rýchlosť -> pocícia

Vieme tieto pravidlá aplikovať aj na rotáciu?

angle = angle + angular velocity
angular velocity = angular velocity + angular acceleration

Poďme prepísať sketch z poslednej úloha pridajme doň premenné:

let angle = 0; // angle current position
let aVelocity = 0; // angle velocity
let aAcceleration = 0.0001; // angle acceleration

Za poznámku stojí povšimnutie, že sa tu jedná o skalárnu hodnotu a nie vektor.

Úloha 4

Otvor sketch z minula. A pridaj uhlový pohyb pre každý Mover.

Prípadne začni so sketchu:

p5.js Web Editor

Pribudla nám tu trieda Ground. V nej si všimni stav ground.magic - ten sa aktivuje keď na klávesnici stlačíš klávesu "m".

Úlohou je vymyslieť stav "magic".

Avšak určite by v ňom pri dotyku objektu so zemou mal začať objekt rotovať (náhodne? v smere dotyku? to je na tebe...).

Druhá časť úlohy je zistiť, že animácia skončila. Vtedy musí prestať aj rotovať.

Tretia časť úlohy - uprav metódu "display" v triede Mover podľa seba, aby zobrazovala niečo tebe blízke - z čoho sa dá vyčítať orientácia.

Dvojité kyvadlo

Autor: Dorota Kňažková