Impossible Colors - by Agent700.ai
Prototype impossible color generatorunknown
html
a month ago
5.2 kB
63
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>
Leave a Comment