Neurals #146

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron-like Interactive Art</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #0F4C81; font-family: 'Arial', sans-serif; }
        canvas { position: absolute; }
        #colorButtons { position: absolute; bottom: 10px; width: 100%; text-align: center; }
        .colorButton { padding: 10px 20px; margin: 0 10px; border: 2px solid white; background: none; color: white; font-size: 18px; cursor: pointer; transition: 0.3s; }
        .colorButton:hover { background: white; color: black; }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="colorButtons">
    <button class="colorButton" onclick="shuffleColors()">Groovy Pink Mix</button>
    <button class="colorButton" onclick="shuffleColors()">Funky Yellow Mix</button>
</div>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const colors = ["#B163A3", "#0F4C81", "#FFC857", "#6B4226", "#D32F2F", "#1976D2", "#388E3C", "#FBC02D", "#8E24AA", "#F57C00",
                    "#0288D1", "#7B1FA2", "#C2185B", "#7B1FA2", "#0097A7", "#C2185B", "#689F38", "#FBC02D", "#1976D2", "#512DA8"];

    let mouseX, mouseY;

    window.addEventListener('mousemove', function(event) {
        mouseX = event.x;
        mouseY = event.y;
    });

    function shuffleColors() {
        for (const circle of circlesArray) {
            circle.color = colors[Math.floor(Math.random() * colors.length)];  // Assign a random color from the array
        }
    }

    class Circle {
        constructor(x, y, radius, dx, dy) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.dx = dx;
            this.dy = dy;
            this.color = colors[Math.floor(Math.random() * colors.length)];  // Assign a random color from the array
        }

        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            ctx.strokeStyle = this.color;
            ctx.stroke();
            ctx.fillStyle = this.color;
            ctx.fill();
        }

        update() {
            if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                this.dx = -this.dx;
            }

            if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
                this.dy = -this.dy;
            }

            this.x += this.dx;
            this.y += this.dy;

            // Interaction with the mouse
            if (mouseX - this.x < 50 && mouseX - this.x > -50 && mouseY - this.y < 50 && mouseY - this.y > -50) {
                if (this.radius < 60) {
                    this.radius += 2;
                }
            } else if (this.radius > 15) {
                this.radius -= 2;
            }

            this.draw();
        }
    }

    function connectDots(dots) {
        for (let i = 0; i < dots.length; i++) {
            for (let j = 0; j < dots.length; j++) {
                const dx = dots[i].x - dots[j].x;
                const dy = dots[i].y - dots[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < 150) {
                    ctx.beginPath();
                    ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)];
                    ctx.lineWidth = 0.2;
                    ctx.moveTo(dots[i].x, dots[i].y);
                    ctx.lineTo(dots[j].x, dots[j].y);
                    ctx.stroke();
                }
            }
        }
    }

    const circlesArray = [];
    for (let i = 0; i < 250; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * 30 + 10;
        const dx = (Math.random() - 0.5) * 4;
        const dy = (Math.random() - 0.5) * 4;
        circlesArray.push(new Circle(x, y, radius, dx, dy));
    }

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

        for (const circle of circlesArray) {
            circle.update();
        }

        connectDots(circlesArray);
    }

    animate();

</script>
</body>
</html>


Neurals #63

Neurals #34

Neurals #37

Inscription #28735885

More from this Collection