Bot image for Claude-3.5-Sonnet

Shared conversation

Claude-3.5-Sonnet ·

Certainly! I'll modify the code to display the color number (hex code) of the mixed color when the two colors collide. Here's the updated code with this enhancement:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Large Color Collider</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Orbitron', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #1a1a2e;
            color: #fff;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        h1 {
            font-size: 3em;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
            margin-bottom: 20px;
        }
        #gameCanvas {
            border: 5px solid #0f3460;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
        }
        #controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
        }
        input[type="color"] {
            width: 70px;
            height: 70px;
            border: none;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s;
            -webkit-appearance: none;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }
        input[type="color"]:hover {
            transform: scale(1.1);
        }
        button {
            padding: 12px 25px;
            font-size: 1.2em;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Orbitron', sans-serif;
        }
        #collideBtn {
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            color: #fff;
        }
        #cleanBtn {
            background: linear-gradient(45deg, #4ecdc4, #45b7aa);
            color: #fff;
        }
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        #mixedColorDisplay {
            margin-top: 20px;
            font-size: 1.5em;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <h1>Large Color Collider</h1>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <div id="controls">
        <input type="color" id="color1" value="#ffff00">
        <input type="color" id="color2" value="#00ffff">
        <button id="collideBtn">Collide Colors!</button>
        <button id="cleanBtn">Clean</button>
    </div>
    <div id="mixedColorDisplay"></div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const color1Input = document.getElementById('color1');
        const color2Input = document.getElementById('color2');
        const collideBtn = document.getElementById('collideBtn');
        const cleanBtn = document.getElementById('cleanBtn');
        const mixedColorDisplay = document.getElementById('mixedColorDisplay');

        let animatedSplatters = [];
        let staticSplatters = [];
        let particles = [];
        let animationId = null;
        let collisionPoint = null;
        let collisionTime = 0;

        function drawTube(x, y, width, height, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, width, height);
            
            const gradient = ctx.createLinearGradient(x, y, x + width, y);
            gradient.addColorStop(0, 'rgba(255,255,255,0.3)');
            gradient.addColorStop(1, 'rgba(255,255,255,0)');
            ctx.fillStyle = gradient;
            ctx.fillRect(x, y, width, height);
        }

        function drawParticle(x, y, color, size) {
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
            
            ctx.shadowBlur = 20;
            ctx.shadowColor = color;
            ctx.fill();
            ctx.shadowBlur = 0;
        }

        function createSplatters(x, y, color1, color2) {
            const mixedColor = mixColors(color1, color2);
            
            // Display the mixed color
            mixedColorDisplay.textContent = `Mixed Color: ${mixedColor.toUpperCase()}`;
            mixedColorDisplay.style.color = mixedColor;
            
            // Animated splatters
            for (let i = 0; i < 300; i++) {
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 20 + 10;
                const size = Math.random() * 12 + 2;
                animatedSplatters.push({
                    x: x,
                    y: y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    size: size * 0.8,
                    targetSize: size,
                    color: Math.random() < 0.7 ? mixedColor : (Math.random() < 0.5 ? color1 : color2),
                    life: 150 + Math.random() * 100,
                    appearDelay: Math.random() * 5
                });
            }
            
            // Static splatters
            for (let i = 0; i < 100; i++) {
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * canvas.width / 2;
                staticSplatters.push({
                    x: x + Math.cos(angle) * distance,
                    y: y + Math.sin(angle) * distance,
                    size: Math.random() * 20 + 5,
                    color: Math.random() < 0.6 ? mixedColor : (Math.random() < 0.5 ? color1 : color2),
                    appearDelay: Math.random() * 10
                });
            }
        }

        function mixColors(color1, color2) {
            const r1 = parseInt(color1.slice(1, 3), 16);
            const g1 = parseInt(color1.slice(3, 5), 16);
            const b1 = parseInt(color1.slice(5, 7), 16);
            const r2 = parseInt(color2.slice(1, 3), 16);
            const g2 = parseInt(color2.slice(3, 5), 16);
            const b2 = parseInt(color2.slice(5, 7), 16);
            
            const r = Math.round((r1 + r2) / 2);
            const g = Math.round((g1 + g2) / 2);
            const b = Math.round((b1 + b2) / 2);
            
            return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
        }

        function updateAndDrawSplatters(deltaTime) {
            // Update and draw animated splatters
            animatedSplatters = animatedSplatters.filter(splat => splat.life > 0);
            
            animatedSplatters.forEach(splat => {
                if (splat.appearDelay > 0) {
                    splat.appearDelay -= deltaTime;
                    return;
                }
                
                splat.x += splat.vx;
                splat.y += splat.vy;
                splat.vy += 0.2; // Gravity effect
                splat.life--;

                splat.size = Math.min(splat.size + deltaTime * 0.5, splat.targetSize);

                ctx.globalAlpha = splat.life / 150;
                ctx.beginPath();
                ctx.arc(splat.x, splat.y, splat.size, 0, Math.PI * 2);
                ctx.fillStyle = splat.color;
                ctx.fill();
            });
            
            // Draw static splatters
            staticSplatters.forEach(splat => {
                if (splat.appearDelay > 0) {
                    splat.appearDelay -= deltaTime;
                    return;
                }
                
                ctx.globalAlpha = 0.8;
                ctx.beginPath();
                ctx.arc(splat.x, splat.y, splat.size, 0, Math.PI * 2);
                ctx.fillStyle = splat.color;
                ctx.fill();
            });
            
            ctx.globalAlpha = 1;
        }

        function animateCollision() {
            if (animationId) {
                cancelAnimationFrame(animationId);
            }
            
            const color1 = color1Input.value;
            const color2 = color2Input.value;
            particles = [
                { x: 50, y: canvas.height / 2, color: color1, speed: 12 },
                { x: canvas.width - 50, y: canvas.height / 2, color: color2, speed: -12 }
            ];

            collisionPoint = null;
            collisionTime = 0;
            let lastTime = performance.now();

            function animate(currentTime) {
                const deltaTime = (currentTime - lastTime) / 16; // Normalize to ~60fps
                lastTime = currentTime;
                
                ctx.fillStyle = 'rgba(10, 10, 35, 0.1)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                if (collisionPoint) {
                    collisionTime += deltaTime;
                }
                updateAndDrawSplatters(deltaTime);

                drawTube(0, 150, 50, 100, '#2a2a5a');
                drawTube(canvas.width - 50, 150, 50, 100, '#2a2a5a');

                if (!collisionPoint) {
                    particles.forEach(particle => {
                        const size = 10 + Math.sin(Date.now() / 100) * 3;
                        drawParticle(particle.x, particle.y, particle.color, size);
                        particle.x += particle.speed * deltaTime;

                        if (!collisionPoint && 
                            particles[0].x >= canvas.width / 2 - 10 && 
                            particles[1].x <= canvas.width / 2 + 10) {
                            collisionPoint = { x: canvas.width / 2, y: canvas.height / 2 };
                            createSplatters(collisionPoint.x, collisionPoint.y, color1, color2);
                        }
                    });
                }

                animationId = requestAnimationFrame(animate);
            }

            animate(performance.now());
        }

        function cleanCanvas() {
            if (animationId) {
                cancelAnimationFrame(animationId);
            }
            animatedSplatters = [];
            staticSplatters = [];
            collisionPoint = null;
            ctx.fillStyle = '#0a0a23';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            drawTube(0, 150, 50, 100, '#2a2a5a');
            drawTube(canvas.width - 50, 150, 50, 100, '#2a2a5a');
            mixedColorDisplay.textContent = ''; // Clear the mixed color display
        }

        collideBtn.addEventListener('click', animateCollision);
        cleanBtn.addEventListener('click', cleanCanvas);

        // Initial canvas setup
        cleanCanvas();
    </script>
</body>
</html>

Here are the key changes made to display the mixed color number:

  1. Added a new div element with id "mixedColorDisplay" in the HTML body.

  2. Added CSS for the new element:

    css
    #mixedColorDisplay {
        margin-top: 20px;
        font-size: 1.5em;
        text-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
    
  3. Modified the createSplatters function to display the mixed color:

    javascript
    function createSplatters(x, y, color1, color2) {
        const mixedColor = mixColors(color1, color2);
        
        // Display the mixed color
        mixedColorDisplay.textContent = `Mixed Color: ${mixedColor.toUpperCase()}`;
        mixedColorDisplay.style.color = mixedColor;
        
        // ... rest of the function
    }
    
  4. Updated the cleanCanvas function to clear the mixed color display:

    javascript
    function cleanCanvas() {
        // ... existing code
        mixedColorDisplay.textContent = ''; // Clear the mixed color display
    }
    

Now, when the colors collide, the mixed color's hex code will be displayed below the buttons. The text will also be colored with the mixed color for a visual representation. When the canvas is cleaned, this display will be cleared.

This conversation may have been edited by the sharer.

Bot image for Claude-3.5-Sonnet
Talk to Claude-3.5-Sonnet on Poe