colormaticwebsite/js/bg.js

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.getElementById('particle-container').appendChild(canvas);


function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

var dark_theme = false;

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark_theme = true;
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    dark_theme = event.matches;
    gradientsArray.forEach((gradient) => {
        gradient.color = getRandomColor();
    });
});

let particlesArray = [];

const clamp = (val, min, max) => Math.min(Math.max(val, min), max)

class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = (Math.random() * 5 + 1) * 1.5;
        this.originalSize = this.size;
        this.speedX = (Math.random() - 0.5) * 0.2;
        this.speedY = (Math.random() - 0.5) * 0.2;
        this.growthSpeed = (Math.random() * 0.02) + 0.01; // Growth speed for breathing effect
        this.shape = ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)]; // Randomly decide shape
        this.angle = Math.random() * 360; // Initial rotation angle for squares and triangles
        this.rotationSpeed = Math.random() * 2 - 1; // Random rotation speed
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;

        // Reverse direction if particle hits edge
        if (this.x <= 0 || this.x >= canvas.width) {
            this.speedX = -this.speedX;
        }
        this.x = clamp(0, this.x, canvas.width);
        if (this.y <= 0 || this.y >= canvas.height) {
            this.speedY = -this.speedY;
        }
        this.y = clamp(0, this.y, canvas.height);

        // Breathing effect: oscillate size
        this.size += this.growthSpeed;
        if (this.size >= this.originalSize * 1.5 || this.size <= this.originalSize * 0.5) {
            this.growthSpeed = -this.growthSpeed; // Reverse growth direction
        }

        // Update rotation angle for squares and triangles
        if (this.shape !== 'circle') {
            this.angle += this.rotationSpeed;
        }
    }

    draw() {
        ctx.fillStyle = dark_theme ? "#333" : '#bbb';
        ctx.save();
        ctx.translate(this.x, this.y);
        if (this.shape === 'circle') {
            ctx.beginPath();
            ctx.arc(0, 0, this.size/2, 0, Math.PI * 2);
            ctx.closePath();
        } else if (this.shape === 'square') {
            ctx.rotate(this.angle * Math.PI / 180); // Rotate square
            ctx.beginPath();
            this.roundRect(ctx, -this.size / 2, -this.size / 2, this.size, this.size, this.size/5); // Draw rounded square
            ctx.closePath();
        } else if (this.shape === 'triangle') {
            ctx.rotate(this.angle * Math.PI / 180); // Rotate triangle
            ctx.beginPath();
            this.roundTriangle(ctx, this.size*2, this.size/5); // Draw rounded triangle
            ctx.closePath();
        }
        ctx.fill();
        ctx.restore();
    }

    roundRect(ctx, x, y, width, height, radius) {
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
    }

    roundTriangle(ctx, size, radius) {
        const x1 = 0, y1 = 0;
        const x2 = size, y2 = 0;
        const x3 = size / 2, y3 = size / 1.375;
        const midX1 = (x1 + x2) / 2;
        const midY1 = (y1 + y2) / 2;
        const midX2 = (x2 + x3) / 2;
        const midY2 = (y2 + y3) / 2;
        const midX3 = (x3 + x1) / 2;
        const midY3 = (y3 + y1) / 2;
        ctx.arcTo(x2, y2, midX2, midY2, radius);
        ctx.arcTo(x3, y3, midX3, midY3, radius);
        ctx.arcTo(x1, y1, midX1, midY1, radius);
    }
}

class Gradient {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.radius = (Math.random() * 500) + 300;
        this.color = getRandomColor();
        this.speedX = Math.random() - 0.5;
        this.speedY = Math.random() - 0.5;
        this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
        this.dAlpha = (Math.random() - 0.5) * 0.01;
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.alpha += this.dAlpha;

        // Reverse the direction of alpha change to keep it within 0.5 and 1
        if (this.alpha <= 0.5 || this.alpha >= 1) {
            this.dAlpha = -this.dAlpha;
        }

        // Bounce off the edges
        if (this.x > canvas.width || this.x < 0) {
            this.speedX = -this.speedX;
        }
        this.x = clamp(0, this.x, canvas.width);
        if (this.y > canvas.height || this.y < 0) {
            this.speedY = -this.speedY;
        }
        this.y = clamp(0, this.y, canvas.height);
    }

    draw() {
        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
        gradient.addColorStop(0, this.color);
        if (dark_theme) {
            gradient.addColorStop(1, `rgba(0, 0, 0, 0)`);
        }
        else {
            gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
        }

        ctx.globalAlpha = this.alpha;
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        ctx.globalAlpha = 1.0;
    }
}

let gradientsArray = [];

function getRandomColor() {
    if (dark_theme) {
        const r = Math.floor((Math.random() * 255) - 100);
        const b = Math.floor((Math.random() * 255) - 100);
        const g = Math.floor((Math.random() * 255) - 100);
        return `rgb(${r}, ${g}, ${b})`;
    }
    else {
        const r = Math.floor((Math.random() * 100) + 155);
        const g = Math.floor((Math.random() * 100) + 155);
        const b = Math.floor((Math.random() * 100) + 155);
        return `rgb(${r}, ${g}, ${b})`;
    }
}

function init() {
    particlesArray = [];
    for (let i = 0; i < 100; i++) {
        particlesArray.push(new Particle());
    }
    gradientsArray = [];
    for (let i = 0; i < 10; i++) {
        gradientsArray.push(new Gradient());
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    gradientsArray.forEach((gradient) => {
        gradient.update();
        gradient.draw();
    });

    particlesArray.forEach((particle) => {
        particle.update();
        particle.draw();
    });

    requestAnimationFrame(animate);
}

resize();
init();
animate();

window.addEventListener('resize', resize);