------------ code starts here --------------<canvas id='canvas' width=1200 height=800 style='border:1px solid black'></canvas>
<!-- <img src='https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' id='img'> -->
<img src='https://i.imgur.com/3WN5wPL.jpeg' id='leafsample'>
<script>
leafsample = document.getElementById('leafsample');
img = document.getElementById('img');
colors = ['#82310d','#ffb614','#de7406','#7b1200']; //random colors from this
leaves = 1000;
wind = .03;
canvas = document.getElementById('canvas')
ctx = canvas.getContext("2d");
function clearscreen(){
ctx.fillStyle = 'black';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
clearscreen();
sample = [];
size = [];
color = [];
x = [];
y = [];
incx = [];
incy = [];
horizontalradius = [];
verticalradius = [];
horizontalangle = [];
horizontalangleinc = [];
verticalangle = [];
verticalangleinc = [];
for (var i=0;i<leaves;i++){
sample.push(Math.floor(Math.random()*(leafsample.height-5))); //get sample pixel area
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()*10+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){
sample[i] = (Math.floor(Math.random()*(leafsample.height-5))); //get sample pixel area
x[i]=(Math.random()*canvas.width*3-canvas.width/2);
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.05;//due to gravity;
x[i]+=incx[i]*size[i];
incx[i] += wind; //due to wind;
horizontalradius[i] -= 0.1;
}
}
function draw(){
clearscreen();
//ctx.drawImage(img,0,0,1200,800);
// 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.drawImage(leafsample,0,sample[i],leafsample.width,leafsample.width,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.drawImage(leafsample,0,sample[i],leafsample.width,leafsample.width,dx,dy,10*size[i],Math.max(1,10*size[i]*Math.sin(verticalangle[i]/2)));
//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 here ---------------
No comments:
Post a Comment