Impossible Colors - by Agent700.ai

Prototype impossible color generator
unknown
html
a month ago
5.2 kB
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impossible Colors - by Agent700.ai</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            /* Removed border */
        }
        .controls {
            margin-bottom: 20px;
        }
        .controls > * {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <select id="pattern-type">
            <option value="blocks">Blocks</option>
            <option value="horizontal-stripes">Horizontal Stripes</option>
            <option value="vertical-stripes">Vertical Stripes</option>
            <option value="alternate-stripes">Alternate Stripes</option>
        </select>
        <select id="color-combo">
            <option value="blue-yellow">Blue and Yellow</option>
            <option value="red-green">Red and Green</option>
            <option value="cyan-red">Cyan and Red</option>
            <option value="magenta-green">Magenta and Green</option>
            <option value="blue-orange">Blue and Orange</option>
        </select>
        <label for="block-size">Block/Stripe Size:</label>
        <input type="number" id="block-size" value="4" min="1">
        <label for="frame-delay">Frame Delay (ms):</label>
        <input type="number" id="frame-delay" value="100" min="1">
    </div>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const colorCombo = document.getElementById('color-combo');
        const patternType = document.getElementById('pattern-type');
        const blockSizeInput = document.getElementById('block-size');
        const frameDelayInput = document.getElementById('frame-delay');

        let colors = {
            'blue-yellow': ['#1E90FF', '#FFD700'],
            'red-green': ['#FF4500', '#32CD32'],
            'cyan-red': ['#00CED1', '#FF4500'],
            'magenta-green': ['#FF00FF', '#32CD32'],
            'blue-orange': ['#1E90FF', '#FFA500']
        };

        let frame = 0;

        function drawPattern() {
            const selectedColors = colors[colorCombo.value];
            const [color1, color2] = selectedColors;
            const size = parseInt(blockSizeInput.value, 10);
            const frameDelay = parseInt(frameDelayInput.value, 10);

            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

            if (patternType.value === 'blocks') {
                for (let y = 0; y < canvas.height; y += size) {
                    for (let x = 0; x < canvas.width; x += size) {
                        if (frame % 2 === 0) {
                            ctx.fillStyle = (x / size + y / size) % 2 === 0 ? color1 : color2;
                        } else {
                            ctx.fillStyle = (x / size + y / size) % 2 === 0 ? color2 : color1;
                        }
                        ctx.fillRect(x, y, size, size);
                    }
                }
            } else if (patternType.value === 'horizontal-stripes') {
                for (let y = 0; y < canvas.height; y += size) {
                    ctx.fillStyle = (y / size + frame) % 2 === 0 ? color1 : color2;
                    ctx.fillRect(0, y, canvas.width, size);
                }
            } else if (patternType.value === 'vertical-stripes') {
                for (let x = 0; x < canvas.width; x += size) {
                    ctx.fillStyle = (x / size + frame) % 2 === 0 ? color1 : color2;
                    ctx.fillRect(x, 0, size, canvas.height);
                }
            } else if (patternType.value === 'alternate-stripes') {
                if (frame % 2 === 0) {
                    for (let y = 0; y < canvas.height; y += size) {
                        ctx.fillStyle = (y / size + frame) % 2 === 0 ? color1 : color2;
                        ctx.fillRect(0, y, canvas.width, size);
                    }
                } else {
                    for (let x = 0; x < canvas.width; x += size) {
                        ctx.fillStyle = ((x + size) / size + frame) % 2 === 0 ? color1 : color2;
                        ctx.fillRect(x, 0, size, canvas.height);
                    }
                }
            }

            frame++;
            setTimeout(() => requestAnimationFrame(drawPattern), frameDelay);
        }

        colorCombo.addEventListener('change', () => {
            frame = 0; // Reset frame to start fresh
        });

        patternType.addEventListener('change', () => {
            frame = 0; // Reset frame to start fresh
        });

        blockSizeInput.addEventListener('input', () => {
            frame = 0; // Reset frame to start fresh
        });

        frameDelayInput.addEventListener('input', () => {
            frame = 0; // Reset frame to start fresh
        });

        drawPattern();
    </script>
</body>
</html>