<div class="controls"> <button id="randomizeBtn">🎲 RANDOMIZE LUT</button> <button id="smoothBtn">🌀 SMOOTH (3x3 blur)</button> <button id="gradientBtn">🌈 GRADIENT DIAGONAL</button> <button id="clearBtn">❄️ CLEAR (ZERO)</button> <div class="slider-container"> <label>🔮 EDIT STRENGTH</label> <input type="range" id="editStrength" min="0" max="1" step="0.01" value="0.35"> </div> </div> <div class="controls"> <button id="sinusoidalBtn">🌊 SINUSOIDAL RIPPLE</button> <button id="checkerBtn">◩ CHECKERBOARD 8x8</button> <button id="invertBtn">◐ INVERT LUT</button> </div> <div class="footer-note"> ✦ 16x16 programmable LUT | Click / Drag on cells to paint values | Each cell = 32x32px ✦ </div> </div>

function checkerboardPattern() const block = 8; // 8x8 checkerboard inside 16x16 => 2x2 blocks each cell size for (let i = 0; i < LUT_SIZE; i++) for (let j = 0; j < LUT_SIZE; j++) const check = (Math.floor(i / (LUT_SIZE/block)) + Math.floor(j / (LUT_SIZE/block))) % 2; lut[i][j] = check === 0 ? 0.2 : 0.85;

</style>

/* main instrument panel */ .lut-container background: rgba(22, 28, 38, 0.85); backdrop-filter: blur(2px); border-radius: 3rem; padding: 1.8rem 2rem 2rem 2rem; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05); border: 1px solid rgba(72, 187, 255, 0.2);