Thursday, March 7, 2024

Twirling Animated Dots with Tracers

 Just saving this code here so I don't lose it.
Q: Check To Pause Next Fade Image Upload Demo

Q:<input type='text' value='flowers' id='k' size='20'>

<input type='checkbox' id='pause'> Check To Pause Next Fade

<span id='debug'>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Upload Demo</title>

<input type="file" id="imageUpload" accept="image/*">

<br/>

<!-- <canvas id='canvas' width="2400px" height='1480px' style='border:1px solid black'>  -->

<canvas id='canvas' width="4000px" height='4000px' style='border:1px solid black'> 

<canvas id='imgc' width='800' height='800' hidden>

<canvas id='imgc2' width='800' height='800' hidden>

<canvas id='imgc3' width='800' height='800' hidden>

<canvas id='swapcanvas' width='800' height='800'>

<img src="" hidden id='image' crossorigin="anonymous"/>

<img src="" hidden id='image2' crossorigin="anonymous"/>

<img src="" hidden id='image3' crossorigin="anonymous"/>

<img src="" hidden id='imagenext' crossorigin="anonymous"/>

<script>

ctx = 0;

jitter = 0;

function changePause(){

if (document.getElementById("pause").checked){


}else{

putit = 1;

}

}

variation = 3.1415*2/6000.0;

function randomVariation(){

return 0;//Math.random()*variation - variation/2.0;

}

function getanginc(){

// 3.1415*2/360*1.2+ 3.1415*2/1024;//

return Math.random()*3.1415*2/360*2.5 + 3.1415*2/1024;

}

set = 0;

maxrings = 10000;

liftit = 0;

putit = 0;

ga = 0.2;

dec = 0.0;

swapcanvas = document.getElementById("swapcanvas");

swapctx = swapcanvas.getContext("2d");

canvas = document.getElementById('canvas');

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

hcanvas = document.getElementById('imgc');

ctxh = hcanvas.getContext("2d",{willReadFrequently: true});

hcanvas2 = document.getElementById('imgc2');

ctxh2= hcanvas2.getContext("2d",{willReadFrequently: true});

hcanvas3 = document.getElementById('imgc3');

ctxh3 = hcanvas3.getContext("2d",{willReadFrequently: true});


img2 = document.getElementById('image2');

img2.onload = function(){

ctxh2.drawImage(img2,0,0);

}

img3 = document.getElementById('image3');

img3.onload = function(){

ctxh3.drawImage(img3,0,0);

}

img = document.getElementById('image');

lines = 3;//3600;

drawlines = lines/3;

declines = 1;

colors = [];

colorx = [];

colory = [];

colorincx = [];

colorincy = [];

function getIncColor(){

return Math.random()*6.0+2.0;

}

img.onload = function(){

ctxh.drawImage(img,0,0);

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

colorx.push(Math.floor(Math.random()*img.width));

colory.push(Math.floor(Math.random()*img.height));

colorincx.push(getIncColor());

colorincy.push(getIncColor());

if (i<lines/3){

var p = ctxh.getImageData(parseInt(colorx[i]), parseInt(colory[i]), 1, 1).data; 

colors.push("rgb("+parseInt(p[0])+","+parseInt(p[1])+","+parseInt(p[2])+")");

}else if (i<lines*2/3){

var p = ctxh2.getImageData(parseInt(colorx[i]), parseInt(colory[i]), 1, 1).data; 

colors.push("rgb("+parseInt(p[0])+","+parseInt(p[1])+","+parseInt(p[2])+")");

}else {

var p = ctxh3.getImageData(parseInt(colorx[i]), parseInt(colory[i]), 1, 1).data; 

colors.push("rgb("+parseInt(p[0])+","+parseInt(p[1])+","+parseInt(p[2])+")");

}


}

// alert(colors[0]+"|"+colors[1]);


ctx.fillStyle = 'black';

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

ctx.globalAlpha = 0.2;

cx = canvas.width/2;

cy = canvas.height/2;

cxang = 0;

cyang = 0;

cxinc = Math.random()*3.1415*2/(5*360)+0.001;

cxang += cxinc;

//cx = canvas.width/2 + Math.cos(cxang)*(canvas.width/2-150);

cyinc = Math.random()*3.1415*2/(5*360)+0.001;

cyang += cyinc;

//cy = canvas.height/2 + Math.cos(cyang)*(canvas.height/2-150);

rings = maxrings;

tracks = 5;

x = [];

y = [];

r = [];

ang = [];

anginc = [];

points = [];

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

points.push([]);

}

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

ang.push(Math.random()*3.1415*2);

anginc.push(getanginc());

if (Math.random()>0.5){

anginc[i] *= -1;

}

r.push(Math.random()*9+2);

x.push(0);

y.push(0);

}

savecolor = 0;

colorsn = 0;

dec = 0.005;

putit = 0;

ga = 0.2;

additionalga = 0;

function update(){

if (liftit == 1){

ga -= dec;

if (ga <= 0){

ga = 0;

liftit = 0;

changeURL();

// setTimeout(function(){

// putit = 1;

// },Math.random()*2000+1000);

}

} else if (putit == 1){


ga += dec;

if (ga >= 0.2){

ga = 0.2;

putit = 0;

}

}

ctx.globalAlpha = ga;

if (set == 1){

ctx.lineWidth = 2;

loopend = points[0].length-1;

loopstart = points[0].length-2;

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

for (var l=0;l<lines;l++){

colorx[l] += colorincx[l];

colory[l] += colorincy[l];

if (colorx[l] < 0){

colorx[l] = 0;

colorincx[l] = getIncColor();

}

if (colorx[l]>img.width){

colorx[l] = img.width;

colorincx[l] = - getIncColor();

}

if (colory[l] < 0){

colory[l] = 0;

colorincy[l] = getIncColor();

}

if (colory[l]>img.height){

colory[l] = img.height;

colorincy[l] = -getIncColor();

}

if (l<lines/3){

//d = Math.max(1,(l+1)/Math.floor(maxrings/3/5));

p = ctxh.getImageData(parseInt(colorx[l]),parseInt(colory[l]),1, 1).data; 

// p = ctxh.getImageData(parseInt(colorx[0]+(points[l][i][0]-points[0][i][0])*1.0/d), parseInt(colory[0]-(points[l][i][1]+points[0][i+1][1])*1.0/d), 1, 1).data; 

}else if (l<lines/3*2){

//d = Math.max(1,(l+1)/Math.floor(maxrings/3*2/5));

p = ctxh2.getImageData(parseInt(colorx[l]),parseInt(colory[l]),1, 1).data; 


}else{

//d = Math.max(1,(l+1)/Math.floor(maxrings/5));

p = ctxh3.getImageData(parseInt(colorx[l]),parseInt(colory[l]),1, 1).data; 

// p = ctxh3.getImageData(parseInt(colorx[0]+(points[l][i][0]-points[0][i][0])/d), parseInt(colory[0]-(points[l][i][1]+points[0][i+1][1])/d), 1, 1).data; 

}

colorsn = "rgb("+parseInt(p[0])+","+parseInt(p[1])+","+parseInt(p[2])+")";

l1 = l % (lines/3);

if (l1 < drawlines){

// var grad= ctx.createLinearGradient(parseInt(points[l][i][0]),parseInt(points[l][i][1]),parseInt(points[l][i+1][0]),parseInt(points[l][i+1][1]));

// grad.addColorStop(0, colors[l]);

// grad.addColorStop(1, colorsn);

// ctx.strokeStyle = grad;


// ctx.beginPath();

// ctx.moveTo(points[l][i][0],points[l][i][1]);

// ctx.lineTo(points[l][i+1][0],points[l][i+1][1]);


//ctx.stroke();

}

// ctx.beginPath();

// ctx.strokeStyle = "white";

// ctx.lineWidth = 10;

// ctx.moveTo(points[l][i][0],points[l][i][1]);

// ctx.lineTo(points[l][i+1][0],points[l][i+1][1]);

// ctx.stroke();

colors[l] = colorsn;

// if (l == 256){

// savecolor = colorsn;

// }

}

savega = ctx.globalAlpha;

ctx.globalAlpha = 0.015;

ctx.fillStyle = 'black';

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

ctx.globalAlpha = 1;

l = lines -1;

if (i == points[l].length-2){

ctx.beginPath();

    ctx.lineWidth = 10;

ctx.strokeStyle = "white";//colors[l];

ctx.moveTo(points[l][i][0],points[l][i][1]);

ctx.lineTo(points[l][i+1][0],points[l][i+1][1]);

ctx.stroke();

}


// Assuming (cx, cy) is the center, and (x1, y1) is the position of the first circle

CX = canvas.width/2;

CY = canvas.height/2;

x1 = points[l][i][0]; // Example position of the first circle

y1 = points[l][i][1];

x2 = points[l][i+1][0];

y2 = points[l][i+1][1];

// Function to draw a circle

// function drawCircle(ctx, x, y, radius) {

//   ctx.beginPath();

//   ctx.arc(x, y, radius, 0, Math.PI * 2, true);

//   ctx.stroke();

// }


// Calculate the distance (r) from (cx, cy) to (x1, y1)

R = Math.sqrt((x1 - CX) ** 2 + (y1 - CY) ** 2);

R2 = Math.sqrt((x2 - CX) ** 2 + (y2 - CY) ** 2);

// Calculate the initial angle

ANGLE = Math.atan2(y1 - CX, x1 - CY);

ANGLE2 = Math.atan2(y2 - CX, x2 - CY);


// Draw the initial circle (if not already drawn)

// drawCircle(ctx, x1, y1, 20); // Assuming you have the context (ctx)


// Draw the other 5 circles

petals = 12;

for (let i = 1; i < petals; i++) {

  // Calculate the angle for this circle

  ANGLE += (2 * Math.PI) / petals; // 360°/6 in radians

  ANGLE2 += (2 * Math.PI) / petals; // 360°/6 in radians


  // Calculate the x and y position

  X1 = CX + R * Math.cos(ANGLE);

  Y1 = CY + R * Math.sin(ANGLE);

  X2 = CX + R2 * Math.cos(ANGLE2);

  Y2 = CY + R2 * Math.sin(ANGLE2);


  // Draw the circle

  ctx.beginPath();

  ctx.moveTo(X1,Y1);

  ctx.lineTo(X2,Y2);

  ctx.stroke();

}

// alert(colors[0]+"|"+colors[1]);

}



drawlines -= declines;

if (drawlines <= 0){

declines *= -1;

}else if (drawlines >= lines/3){

declines *= -1;

}

additionalga += 1;

if (additionalga > 750){

ctx.globalAlpha = 0.005;

ctx.fillStyle = 'black';

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

additionalga = 0;

}

}

// if (points2.length > 0){

// ctx.beginPath();

// for (var i=0;i<points2.length;i++){

// ctx.strokeStyle = 'red';

// ctx.lineWidth = 2;

// ctx.lineTo(points2[i][0],points2[i][1]);

// }

// ctx.stroke();

// }

// if (points3.length > 0){

// ctx.beginPath();

// for (var i=0;i<points3.length;i++){

// ctx.strokeStyle = 'green';

// ctx.lineWidth = 2;

// ctx.lineTo(points3[i][0],points3[i][1]);

// }

// ctx.stroke();

// }


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

ctx.strokeStyle = "white";

ctx.lineWidth = 3;

ctx.beginPath();

ang[i] += anginc[i] + randomVariation();


//change it here so it changes over time

if (jitter == 1){

if (Math.random()<0.01){ //5% of the time

ri = Math.floor(Math.random()*rings)

anginc[ri] = (Math.random()*3.1415*2/360*2.5 + 3.1415*2/1024);

if (Math.random()>0.5){

anginc[ri] *= -1;

}

}

}

if (i == 0){

ctx.moveTo(cx,cy);

x[i] = cx + Math.cos(ang[i])*r[i];

y[i] = cy + Math.sin(ang[i])*r[i];

ctx.lineTo(x[i],y[i]);

}else{

ctx.moveTo(x[i-1],y[i-1]);

x[i] = x[i-1] + Math.cos(ang[i])*r[i];

y[i] = y[i-1] + Math.sin(ang[i])*r[i];

ctx.lineTo(x[i],y[i]);

}


//ctx.stroke();

}


// ctx.beginPath();

// ctx.lineWidth = 3;

// ctx.globalAlpha = 0.001;

// ctx.fillStyle = savecolor;

// ctx.strokeStyle = savecolor;

// radius = (cxang*36)%200;

// ctx.arc(x[parseInt(rings/3)],y[parseInt(rings/3)],radius,0,3.1415*2);

// ctx.fill();

// ctx.globalAlpha = 0.2;


cxang += cxinc + randomVariation();

cx = canvas.width/2; // + Math.cos(cxang)*(canvas.width/2-150);

cyang += cyinc + randomVariation();

cy = canvas.height/2; // + Math.cos(cyang)*(canvas.height/2-150);

for (var l=0;l<lines;l++){

if (points[l].length == tracks){

points[l] = points[l].slice(1,tracks);

}

points[l].push([(x[rings-l-1]),(y[rings-l-1])]);

//CODE BELOW seperates the 3 different colors. CODE ABOVE LINE keep them together merged.

// if (l < lines/3){

// points[l].push([(x[rings-l-1]),(y[rings-l-1])]);

// }else if (l<lines/3*2){

// points[l].push([(x[rings-l-parseInt(rings*2/3)]),(y[rings-l-parseInt(rings*2/3)])]);

// }else{

// points[l].push([(x[rings-l-parseInt(rings/3)]),(y[rings-l-parseInt(rings/3)])]);



// }else if (l<255+128+64+32){

// points[l].push([(x[rings-l-(rings/8*5)]),(y[rings-l-(rings/8*5)])]);

// }else{

// points[l].push([(x[rings-l-(rings/8*4)]),(y[rings-l-(rings/8*4)])]);

// }

    //}


}

set = 1;

// if (points2.length == tracks){

// points2 = points2.slice(1,tracks);

// }

// points2.push([x[rings/3-1],y[rings/3-1]]);


// if (points3.length == tracks){

// points3 = points3.slice(1,tracks);

// }

// points3.push([x[rings/3*2],y[rings/3*2]]);


}

changing = 0;

function draw(){

ctx.fillStyle = 'black';

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

if (changing == 0){

update();

}

}

setInterval(draw,1);

}

rri = 0;

url = 0;

function getLink(){

rri = (rri+1)%5;

if (rri==0){

return "https://source.unsplash.com/random/800x800?blue&auto=jpg&r" + Math.random();

}else if (rri==1){

return "https://source.unsplash.com/random/800x800?red&auto=jpg&r" + Math.random();

}else if (rri==2){

return "https://source.unsplash.com/random/800x800?yellow&auto=jpg&r" + Math.random();

}else if (rri==3){

return "https://source.unsplash.com/random/800x800?orange&auto=jpg&r" + Math.random();

}else if (rri==4){

return "https://source.unsplash.com/random/800x800?yellow&auto=jpg&r" + Math.random();

}



rr= Math.floor(Math.random()*17);

if (rr==0){

return "https://source.unsplash.com/random/800x800?red&auto=jpg&r" + Math.random();

}

if (rr==1){

return "https://source.unsplash.com/random/800x800?blue&auto=jpg&r" + Math.random();

}

if (rr==2){

return "https://source.unsplash.com/random/800x800?green&auto=jpg&r" + Math.random();

}

if (rr==3){

return "https://source.unsplash.com/random/800x800?yellow&auto=jpg&r" + Math.random();

}

if (rr==4){

return "https://source.unsplash.com/random/800x800?cyan&auto=jpg&r" + Math.random();

}

if (rr==5){

return "https://source.unsplash.com/random/800x800?purple&auto=jpg&r" + Math.random();

}

if (rr==6){

return "https://source.unsplash.com/random/800x800?orange&auto=jpg&r" + Math.random();

}

if (rr==7){

return "https://source.unsplash.com/random/800x800?purple&auto=jpg&r" + Math.random();

}

if (rr==8){

return "https://source.unsplash.com/random/800x800?flowers&auto=jpg&r" + Math.random();

}

if (rr==9){

return "https://source.unsplash.com/random/800x800?clouds&auto=jpg&r" + Math.random();

}

if (rr==10){

return "https://source.unsplash.com/random/800x800?sunset&auto=jpg&r" + Math.random();

}

if (rr==11){

return "https://source.unsplash.com/random/800x800?forest&auto=jpg&r" + Math.random();

}

if (rr==12){

return "https://source.unsplash.com/random/800x800?ocean&auto=jpg&r" + Math.random();

}

if (rr==13){

return "https://source.unsplash.com/random/800x800?city&auto=jpg&r" + Math.random();

}

if (rr==14){

return "https://source.unsplash.com/random/800x800?paint&auto=jpg&r" + Math.random();

}

if (rr==15){

return "https://source.unsplash.com/random/800x800?art&auto=jpg&r" + Math.random();

}

if (rr==16){

return "https://source.unsplash.com/random/800x800?abstract&auto=jpg&r" + Math.random();

}

return "https://source.unsplash.com/random/800x800?&auto=jpg&r" + Math.random();

}

    

function changeURL(){

image = document.getElementById("imagenext");

// changing = 1;

    sr = Math.floor(Math.random()*3);

    image.onload = function(){

    if (sr == 0){

    ctxh.drawImage(image,0,0);

    }

    if (sr==1){

    ctxh2.drawImage(image,0,0);

    }

    if (sr==2){

    ctxh3.drawImage(image,0,0);

    }

    if (document.getElementById("pause").checked){


    }else{

   

    putit = 1;

    }

    // changing = 0;

    }

    image.src = getLink();

}

opacityinc = 0;

liftit = 0;

function lift(){

if (Math.random()*7 < 1 && putit == 0){

liftit = 1;

}


}

img.src = getLink();

img2.src = getLink();

img3.src = getLink();;

//setInterval(changeURL,10000);

setInterval(lift,1000);

// img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg";

// img2.src = "https://upload.wikimedia.org/wikipedia/en/b/bc/Old_guitarist_chicago.jpg";

// img3.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1280px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg";

document.getElementById('imageUpload').addEventListener('change', function(event) {

    if (event.target.files && event.target.files[0]) {

        // Create a FileReader to read the uploaded file

        var reader = new FileReader();

        

        // Set the onload function to run once the file is fully read

        reader.onload = function(e) {

            // Get all the <img> elements inside the div#imagesToChange

            url = e.target.result;

            img.src = url;

            img2.src = url;

            img3.src = url;

        };

        

        // Read the file as a Data URL (base64 encoded string of the file)

        reader.readAsDataURL(event.target.files[0]);

    }

});

function jitterit(){

if (Math.random() < 0.2){

//jitter = Math.abs(jitter-1);

}

}

setInterval(jitterit,5000);

</script>

---------------- code ends here --------------------

at No comments:

Wednesday, March 6, 2024

Digital Falling Leaves with improvement by using a realistic background

 Here I added background from unsplash (https://unsplash.com/photos/forest-heat-by-sunbeam-RwHv7LgeC7s) of forest in fall (I guess).



Here is the code

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

<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'>

<script>

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();

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()*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){

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.08;//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.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 -----------------


at No comments:

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 ----------

at No comments:

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 ---------------
at No comments:
Subscribe to: Posts (Atom)

How to use the Color Picker

 Depending on the Color Picker, there will be minor differences (there are already step by step Instructions). But this is graphical Instruc...

  • How to use the Color Picker
     Depending on the Color Picker, there will be minor differences (there are already step by step Instructions). But this is graphical Instruc...
  • How to use the Image Color Picker Tool
    How to use the Image Color Picker Tool : 1. Open Image File (to load it on canvas). 2. Click on any color on canvas to pick the color. 3. Pu...