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

<!DOCTYPE html>

<head>

<title>Image Upload Demo</title>

<br/>

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

jstoolbox

Thursday, March 7, 2024

Twirling Animated Dots with Tracers

No comments:

Post a Comment

How to use the Color Picker

Pages