Dot Grid Scale

by smombartz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Dots</title>
    <style>
        canvas {
            display: block;
        }
        #controls {
            position: fixed;
            top: 10px;
            left: 10px;
            background: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="controls">
        <label>
            Dot Radius:
            <input type="number" id="dotRadius" value="2" step="1">
        </label><br>
        <label>
            Gap:
            <input type="number" id="gap" value="10" step="1">
        </label><br>
        <label>
            Scale Factor:
            <input type="number" id="scaleFactor" value="3" step="1">
        </label><br>
        <label>
            Gradient Factor:
            <input type="number" id="gradientFactor" value="0.2" step="0.1">
        </label><br>
        <label>
            Max Distance:
            <input type="number" id="maxDistance" value="10" step="1">
        </label><br>
        <label>
            Dot Color:
            <input type="color" id="dotColor" value="#CCCCCC">
        </label><br>
        <label>
            Shrink:
            <input type="checkbox" id="allowShrink">
        </label>
    </div>
    <div id="dots" style="width: 100%; height: 100vh;">
        <canvas id="dotCanvas"></canvas>
    </div>

    <script>
        const container = document.getElementById('dots');
        const canvas = document.getElementById('dotCanvas');
        const ctx = canvas.getContext('2d');

        // Get device pixel ratio (DPI)
        const dpi = window.devicePixelRatio;

        // Fix canvas DPI to prevent blurriness
        function fixDPI() {
            const styleHeight = +getComputedStyle(canvas).getPropertyValue("height").slice(0,...