I think need to implement a declaration of visible orbit lines or dots or not in canvas (like 1 or 0), to leave only orbits or dots visible. output fully integrated code:
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const numOrbits = 10;
const dotsPerOrbit = 80;
const maxOrbitRadius = Math.min(canvas.width, canvas.height) / 2;
const orbitInterchangeProbability = 0.8;
const orbitTransitionSpeed = 0.5;
const dotInterchangeProbability = 0.01;
const dotInterchangeSpeed = 0.01;
const dotExchangeDirection = 'linear'; // Can be 'linear' or 'random'

let orbits = [];

function getDotColors() {
    let dotColors = [];
    for (let i = 0; i < dotsPerOrbit; i++) {
        const hue = 360 * (i / dotsPerOrbit);
        dotColors.push('hsl(' + hue + ', 100%, 50%)');
    }
    return dotColors;
}

for (let i = 0; i < numOrbits; i++) {
    let distance = maxOrbitRadius * (i + 1) / numOrbits;
    let rotationSpeed = 0.005 + Math.random() * 0.005;
    let rotationDirection = Math.random() < 0.5 ? 1 : -1;
    let color = 'hsl(' + (i * 360 / numOrbits) + ', 100%, 50%)';
    let dotColors = getDotColors();
    let dots = [];
    for (let j = 0; j < dotsPerOrbit; j++) {
        let angle = (j / dotsPerOrbit) * Math.PI * 2;
        dots.push({
            currentAngle: angle,
            targetAngle: angle,
            currentRadius: distance,
            targetRadius: distance,
            color: dotColors[j],
            orbitIndex: i // Each dot knows which orbit it belongs to
        });
    }
    orbits.push({
        dots: dots,
        currentRadius: distance,
        targetRadius: distance,
        color: color,
        rotationSpeed: rotationSpeed,
        rotationDirection: rotationDirection
    });
}

function drawDot(dot, orbit, centerX, centerY) {
    const x = centerX + dot.currentRadius * Math.cos(dot.currentAngle);
    const y = centerY + dot.currentRadius * Math.sin(dot.currentAngle);
    ctx.fillStyle = dot.color;
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, false);
    ctx.fill();
}

function drawOrbit(orbit, centerX, centerY) {
    // Draw orbit path
    ctx.beginPath();
    ctx.arc(centerX, centerY, orbit.currentRadius, 0, Math.PI * 2, false);
    ctx.strokeStyle = orbit.color;
    ctx.stroke();

    orbit.dots.forEach(dot => {
        drawDot(dot, orbit, centerX, centerY);
    });
}

function updateOrbit(orbit) {
    // Update the orbit's current radius towards its target for a smooth transition.
    let radiusDifference = orbit.targetRadius - orbit.currentRadius;
    orbit.currentRadius += radiusDifference * orbitTransitionSpeed;

    orbit.dots.forEach(dot => {
        // Update the dot's angle based on the orbit's rotation speed and direction.
        dot.currentAngle += orbit.rotationSpeed * orbit.rotationDirection;
        
        // Smooth transition of dot's angle towards its target.
        let angleDifference = dot.targetAngle - dot.currentAngle;
        if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
        if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
        dot.currentAngle += angleDifference * dotInterchangeSpeed;

        // Smooth transition of dot's radius towards its target for inter-orbit movement.
        let radiusDifference = dot.targetRadius - dot.currentRadius;
        dot.currentRadius += radiusDifference * dotInterchangeSpeed;
    });
}

function dotInterchange() {
    orbits.forEach((orbit, orbitIndex) => {
        orbit.dots.forEach((dot, index) => {
            if (Math.random() < dotInterchangeProbability) {
                let targetOrbit = orbits[orbitIndex];
                let targetIndex = (index + 1) % dotsPerOrbit;

                if (dotExchangeDirection === 'random') {
                    targetOrbit = orbits[Math.floor(Math.random() * numOrbits)];
                    targetIndex = Math.floor(Math.random() * dotsPerOrbit);
                }

                let targetDot = targetOrbit.dots[targetIndex];
                // Set the target position for smooth transition
                dot.targetRadius = targetOrbit.currentRadius;
                dot.targetAngle = targetDot.currentAngle;
                // Preserve and swap colors
                let tempColor = dot.color;
                dot.color = targetDot.color;
                targetDot.color = tempColor;
            }
        });
    });
}

function swapOrbits() {
    if (Math.random() < orbitInterchangeProbability) {
        let orbitIndex1 = Math.floor(Math.random() * orbits.length);
        let orbitIndex2 = Math.floor(Math.random() * orbits.length);
        while (orbitIndex1 === orbitIndex2) {
            orbitIndex2 = Math.floor(Math.random() * orbits.length);
        }
        // Swap the target radii of orbits
        let tempRadius = orbits[orbitIndex1].targetRadius;
        orbits[orbitIndex1].targetRadius = orbits[orbitIndex2].targetRadius;
        orbits[orbitIndex2].targetRadius = tempRadius;
    }
}


function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    orbits.forEach(orbit => {
        drawOrbit(orbit, centerX, centerY);
        updateOrbit(orbit);
    });

    swapOrbits();
    dotInterchange();

    requestAnimationFrame(animate);
}

animate();