Animacja canvas w Java Script
Rezultat
W tej części posłużę się językiem Java Script oraz elementem <canvas>, który jest częścią powstającej specyfikacji HTML 5. Znacznik canvas ma służyć celom animacyjnym za pomocą Java Script, co przy okazji zaprezentuję.
Program ten ma posłużyć jako przykład użycia rekurencji w animacji. Założeniem jest generowanie w losowych miejscach, kół o losowych parametrach. Koła te mają pojawiać się jako niewielkie kropki, po czym powiękrzyć się i pod koniec zaniknąć.
Składowymi programu są dwie główne funkcje: draw() oraz circle(). Funkcja draw() jest odpowiedzialna za wywołanie funkcji circle() z losowymi parametrami z odpowiedniego zakresu. Zaś funkcja circle() bezpośrednio rysuje na zadanym obszarze okrąg o zadanych parametrach.
function draw()
{
var x=Math.floor(Math.random()*200)+50;
var y=Math.floor(Math.random()*200)+50;
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
circle(x,y,r,g,b,1);
draw();
}
function circle(x,y,r,g,b,i)
{
var alpha;
var p;
var radius=(Math.log(3000)/Math.log(i+14)*(-10)+30)*m;
if(i>97) alpha=0;
else
{
p=100-i;
alpha=Math.log(p)/Math.log(20)-0.65;
}
ctx.beginPath();
ctx.arc(x,y,radius,-Math.PI,Math.PI,true);
ctx.fillStyle='rgba('+r+','+g+','+b+','+alpha+')';
ctx.fill();
i++;
if(i<99) circle(x,y,r,g,b,i);
}
Jak widać w kodzie obydwie funkcje na koniec działania wywołują się ponownie, z czego draw() bezwarunkowo a circle() tylko określoną ilość razy.
Takie użycie obydwu funkcji pozwala na wielokrotne uruchomienie funkcji rysującej koła, która po pierwszym uruchomieniu staje się autonomiczna i przekazuje potrzebne sobie informacje w parametrach przetwarzanych w jej wnętrzu.
Parametry funkcji circle to:
- x - współrzędna x środka koła
- y - współrzędna y środka koła
- r, g, b - wartości kolorów czerwonego, zielonego i niebieskiego (0-255)
- i - zmienna pomocnicza przekazująca liczbę przebiegów funkcji i służąca do przeliczania dynamicznych elementów animacji