Вълни

Ако си казваш, "Хм, всичко това е много хубаво, но всъщност искам да нарисувам само една вълна на екрана", ами, добре, времето за това дойде. Всъщност вече сме го направили на 90%. Когато осцилираме един кръг нагоре и надолу според функцията синус, това, което правим, е да гледаме една точка по оста х на модела на една вълна. С малко показност и един for цикъл можем да поставим няколко от тези осцилиращи кръгове един до друг.

Този вълнообразен модел може да бъде използван в конструкцията на тялото или придатъците на същество, както и да симулира мека повърхност (например вода).

Тук ще се натъкнем на същите въпроси за амплитудата (височината на модела) и периода. Вместо период по отношение на времето, обаче, тъй като разглеждаме пълна вълна, можем да говорим за период по отношение на широчината (в пиксели) на пълния цикъл на вълната. И точно както беше при простата осцилация, имаме възможността да изчислим модела на вълната според точен период или просто като следваме модела за ъглова скорост.

Да започнем с по-простия случай – ъгловата скорост. Знаем, че трябва да започнем с ъгъл, ъглова скорост и амплитуда.

var angle = 0;
var angleVel = 0{,}2;
var amplitude = 100;

След това ще обходим всички стойности x, в които искаме да нарисуваме точка от вълната. Засега да кажем 24 пиксела. В този цикъл ще искаме да направим три неща:

Да изчислим местоположението y според амплитудата и синуса на ъгъла.
Да нарисуваме кръг на позиция (x,y).
Да увеличим ъгъла според ъгловата скорост.

for (var x = 0; x <= width; x += 24) {
    // Изчисляваме позицията y според амплитудата и синуса на ъгъла
    var y = amplitude * sin(angle);
    // Рисуваме кръг на позиция x, y 
    ellipse(x, y+height/2, 48, 48);
    // Увеличаваме ъгъла според ъгловата скорост
    angle += angleVel;
}

Да разгледаме резултатите при различни стойности на angleVel:

Забележи как, въпреки че изчисляваме съвсем точно периода на вълната, колкото по-висока е ъгловата скорост, толкова по-малък е периодът. Също така си струва да се спомене, че колкото по-кратък става периодът, става все по-трудно да видим самата вълна, тъй като разстоянието между отделните точки нараства. Една от нашите възможности, е да използваме функциите beginShape() и endShape(), за да свържем точките с линия.

Горният пример е статичен. Вълната никога не се променя, никога не става вълнообразна, и това беше целта ни. Тази допълнителна стъпка за анимиране на вълната е малко сложна. Първоначалният ти инстинкт може би е да кажеш: "Хей, няма проблем, само ще поставим ъгъла в глобална променлива и след това ще го увеличаваме от един цикъл на draw() до друг.”

Макар че е добро предположение, това няма да работи. Ако разгледаш статично нарисуваната вълна, дясната ѝ граница не пасва на лявата граница; мястото, където свършва в един цикъл на функцията draw(), не може да бъде същото място, от което започва в следващия цикъл. Вместо това ще трябва да си направим променлива, която се използва само за проследяването на това с каква стойност на ъгъла трябва да започва вълната. Този ъгъл (който ще наричаме startAngle) се увеличава със собствена ъглова скорост.

Ето програмата с включен начален ъгъл. Опитай се да промениш различни числа, за да видиш какво се случва с осцилиращата вълна.

Курсът "Компютърни симулации на физични явления" е производeн на "Природата на кода" от Даниел Шифман, използвана от Creative Commons Attribution-NonCommercial 3,0 Unported License.

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.