Improvement with Digital Leave animation

 Here, I changed the height of the leaves to make it look like it's rotated so that it's thinner depending on the vertical angle.

here is the full 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 = .03;

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,dy+3*size[i]*Math.sin(verticalangle[i]/2),20*size[i],Math.max(1,4*size[i]*Math.sin(verticalangle[i]/2)));

ctx.fillRect(dx,dy,10*size[i],Math.max(1,10*size[i]*Math.sin(verticalangle[i]/2)));

}

update();

}

setInterval(draw,30);

</script>

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