Rotating tunnel of rainbowness

Developer
Matei Copot
Size
2,885 Kb
Views
28,336
  1. Rotating tunnel of rainbowness Previews
  2. Rotating tunnel of rainbowness HTML Codes
  3. Rotating tunnel of rainbowness CSS Codes
  4. Rotating tunnel of rainbowness JS Codes

How do I make an rotating tunnel of rainbowness?

Overlay idea from @chinchang. What is a rotating tunnel of rainbowness? How do you make a rotating tunnel of rainbowness? This script and codes were developed by Matei Copot on 12 June 2022, Sunday.

Rotating tunnel of rainbowness Previews
IQ Test

Rotating tunnel of rainbowness - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rotating tunnel of rainbowness</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { background-color:#111; overflow:hidden; margin:0 0;
}
#c { position:absolute; top: calc(50vh - 200px); left: calc(50vw - 200px);
}
#alpha { position:absolute; top: calc(50vh + 220px); left: calc(50vw - 50px); width:100px; height:40px; background-color: #000; border:none; font:20px Verdana; color:white; text-shadow:0 0 2px white; cursor:pointer; transition:.4s;
}
#alpha:focus { outline:none;
}
#alpha:hover { background-color: #555;
}
#overlay { position: absolute; width: 400px; height: 400px; top: calc(50vh - 200px); left: calc(50vw - 200px); background-image: radial-gradient(transparent 20%, #111 69%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id=c></canvas>
<button id=alpha>alpha</button>
<div id=overlay></div> <script src="js/index.js"></script>
</body>
</html>

Rotating tunnel of rainbowness - Script Codes CSS Codes

body, html { background-color:#111; overflow:hidden; margin:0 0;
}
#c { position:absolute; top: calc(50vh - 200px); left: calc(50vw - 200px);
}
#alpha { position:absolute; top: calc(50vh + 220px); left: calc(50vw - 50px); width:100px; height:40px; background-color: #000; border:none; font:20px Verdana; color:white; text-shadow:0 0 2px white; cursor:pointer; transition:.4s;
}
#alpha:focus { outline:none;
}
#alpha:hover { background-color: #555;
}
#overlay { position: absolute; width: 400px; height: 400px; top: calc(50vh - 200px); left: calc(50vw - 200px); background-image: radial-gradient(transparent 20%, #111 69%);
}

Rotating tunnel of rainbowness - Script Codes JS Codes

var w = c.width = h = c.height = 400, ctx = c.getContext('2d'), total = 50, particlesParRow = 10, minValue = 30, updatesBeforeStart = 500, repaintColor = 'rgba(0, 0, 0, .04)', templateColor = 'hsl(hue, 80%, 50%)', particles = [], colors = [], radiants = [], colorPart = 360/total, radiantPart = Math.PI*2/total, alphaValue = true;
for(var i = 0; i < total; ++i){ var array = []; particles.push(array); colors.push(templateColor.replace('hue', colorPart * i)); radiants.push(radiantPart * i); for(var j = 0; j < particlesParRow; ++j){ array.push(i * minValue); }
}
for(var i = 0; i < updatesBeforeStart; ++i) update();
function anim(){ window.requestAnimationFrame(anim); ctx.fillStyle = repaintColor; ctx.beginPath(); ctx.arc(w/2, h/2, w/2 + 1, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); ctx.translate(w/2, h/2); ctx.rotate(.006); ctx.translate(-w/2, -h/2); for(var i = 0; i < total; ++i){ ctx.fillStyle = colors[i]; for(var j = 0; j < particlesParRow; ++j){ var particle = particles[i][j]; particles[i][j] -= particle/70; ctx.beginPath(); ctx.arc(w/2, h/2, particle, radiants[i], radiants[i] + radiantPart); ctx.arc(w/2, h/2, particles[i][j], radiants[i] + radiantPart, radiants[i], true); ctx.closePath(); ctx.fill(); if(particles[i][j] <= minValue && Math.random() < .1){ particles[i][j] = w/2; } } }
}
anim();
function update(){ for(var i = 0; i < total; ++i){ for(var j = 0; j < particlesParRow; ++j){ var particle = particles[i][j]; particles[i][j] -= particle/70; if(particles[i][j] <= minValue && Math.random() < .1){ particles[i][j] = w/2; } } }
}
alpha.addEventListener('click', function(){ if(alphaValue){ alphaValue = false; repaintColor = 'black'; alpha.textContent = 'solid'; } else { alphaValue = true; repaintColor = 'rgba(0, 0, 0, .04)'; alpha.textContent = 'alpha'; }
})
Rotating tunnel of rainbowness - Script Codes
Rotating tunnel of rainbowness - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded June 12, 2022
Rating 4.5
Size 2,885 Kb
Views 28,336
Do you need developer help for Rotating tunnel of rainbowness?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matei Copot (towc) Script Codes
Name
Hexagonical retro tiles
Binary spiral
Turret of Order
Plasma background
Webgl fireworks
Superimpositional garden
Progression of ideas through willpower and motivation
Organic lines of staring-atness
Eiffel Tower
JS canvas 3d tree generator
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!