Sharing my digital leaves dropping animation

 I was playing around trying to animate falling leaves digitally.

and this is my result.

It's as simple as possible I think.

There's COS applied to a horizontal angle.

and SIN applied to a horizontal angle.

vertical angle is incremented double amount of increment used for horizontal angle.

and then applied some fictional gravity.

and fictional light wind (toward the right).

here's the code running

And here's the code

---------- code starts --------------

<canvas id='canvas' width=1200 height=800 style='border:1px solid black'></canvas>

<script>

colors = ['#82310d','#ffb614','#de7406','#7b1200']; //random colors from this

leaves = 500;

wind = 0.02;

canvas = document.getElementById('canvas')

ctx = canvas.getContext("2d");

function clearscreen(){

    ctx.fillStyle = 'black';

ctx.fillRect(0,0,canvas.width,canvas.height);

}

clearscreen();

size = [];

color = [];

x = [];

y = [];

incx = [];

incy = [];

horizontalradius = [];

verticalradius = [];

horizontalangle = [];

horizontalangleinc = [];

verticalangle = [];

verticalangleinc = [];

for (var i=0;i<leaves;i++){

size.push(Math.random()*1.5+0.5);

color.push(colors[Math.floor(Math.random()*colors.length)]);

x.push(Math.random()*canvas.width);

y.push(Math.random()*100);

incx.push(0);

incy.push(0);

horizontalradius.push(Math.random()*30+120);

verticalradius.push(Math.random()*20+10);

horizontalangle.push(Math.random()*Math.PI*2.0);//cos

horizontalangleinc.push(5/360.0*Math.PI*2.0);

verticalangle.push(-90/360*Math.PI*2.0); //start from top and drop down /// use sin

verticalangleinc.push(10/360.0*Math.PI*2.0);

}

function reset(i){

x[i]=(Math.random()*canvas.width);

y[i]=(-Math.random()*100);

incx[i]=(0);

incy[i]=(0);

horizontalradius[i]=(Math.random()*120+30);

verticalradius[i]=(Math.random()*20+10);

horizontalangle[i]=(Math.random()*Math.PI*2.0);//cos

horizontalangleinc[i]=(5/360.0*Math.PI*2.0);

verticalangle[i]=(-90/360*Math.PI*2.0); //start from top and drop down /// use sin

verticalangleinc[i]=(10/360.0*Math.PI*2.0);

}

function updatestart(){

for (var i=0;i<leaves;i++){

r = Math.random()*1000;

for (var j;j<r;j++){

horizontalangle[i] = (horizontalangle[i]+horizontalangleinc[i])%(Math.PI*2.0);

verticalangle[i] = (verticalangle[i]+verticalangleinc[i])%(Math.PI*2.0);

y[i] +=incy[i];

incy[i] +=0.02;//due to gravity;

x[i]+=incx[i];

incx[i] += wind; //due to wind;

horizontalradius[i] -= 0.1;

}

x[i] = Math.random()*canvas.width;

y[i] = Math.random()*canvas.height;

// y[i] +=incy[i];

// incy[i] +=0.02;//due to gravity;

// x[i]+=incx[i];

// incx[i] += wind; //due to wind;

// horizontalradius[i] -= 0.1;

}

}

updatestart();

function update(){

for (var i=0;i<leaves;i++){

horizontalangle[i] = (horizontalangle[i]+horizontalangleinc[i])%(Math.PI*2.0);

verticalangle[i] = (verticalangle[i]+verticalangleinc[i])%(Math.PI*2.0);

y[i] +=incy[i]*size[i];

incy[i] +=0.08;//due to gravity;

x[i]+=incx[i]*size[i];

incx[i] += wind; //due to wind;

horizontalradius[i] -= 0.1;

}

}

function draw(){

clearscreen();

// ctx.fillStyle = 'black';

// ctx.fillRect(0,0,canvas.width,canvas.height);

for (var i=0;i<leaves;i++){

dx = x[i] + Math.cos(horizontalangle[i])*horizontalradius[i];

dy = y[i] + Math.sin(verticalangle[i])*verticalradius[i];

if (dy > canvas.height){

reset(i);

}

ctx.fillStyle = color[i];

ctx.fillRect(dx-5*size[i],dy+3*size[i],20*size[i],4*size[i]);

ctx.fillRect(dx,dy,10*size[i],10*size[i]);

}

update();

}

setInterval(draw,30);

</script>

---------- code ends ---------------