circles

by vetlesen

HTML

<canvas id="canvas" height="900" width="1550">

CSS

body{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100svh;
  background: black;
}

canvas{
  border: 1px black solid;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var circles = [];
    var numCircles = 200;
    var radius = 20; // Fixed radius for all circles

    var colors = ["#C22303", "#EE9C34", "#F3BE26", "#E88D14", "#DB4E18", "#E88D14", "#F3BE26", "#EE9C34", "#C22303"];
    var transitionDuration = 100000; // Transition duration in milliseconds
    var startTime = performance.now();

    // Initialize circles with random properties
    for (let i = 0; i < numCircles; i++) {
        circles.push({
            x: Math.random() * (canvas.width - radius * 2) + radius,
            y: Math.random() * (canvas.height - radius * 2) + radius,
            vx: Math.random() * 4 - 2,  // Random velocity between -2 and 2
            vy: Math.random() * 4 - 2
        });
    }

    function draw(now) {
        var timeElapsed = now - startTime;
        var progress = (timeElapsed % transitionDuration) / transitionDuration;
        var index = Math.floor(progress * (colors.length - 1));
        var nextIndex = (index + 1) % colors.length;
        var colorProgress = (progress * (colors.length - 1)) % 1;

        // Calculate the background color by interpolating between two color stops
        var backgroundColor = interpolateColor(colors[index], colors[nextIndex], colorProgress);

        // Set the background color
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw circles
        circles.forEach(circle => {
            // Update circle position
            circle.x += circle.vx;
            circle.y += circle.vy;

            // Check for boundary collisions and reverse velocity if necessary
            if (circle.x + radius > canvas.width || circle.x - radius < 0) {
                circle.vx = -circle.vx;
            }
            if (circle.y + radius > canvas.height || circle.y - radius < 0) {
               ...