PixelSwirl/tv-snow.html at main · LockMan007/PixelSwirl · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: sans-serif;
            color: #ccc;
        }
        canvas {
            display: block;
            background-color: #000;
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .controls {
            position: relative;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 15px 25px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: auto; /* Push controls to the bottom */
            margin-bottom: 20px; /* Space from the bottom */
        }
        .control-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        input[type="range"] {
            width: 150px;
            -webkit-appearance: none;
            height: 8px;
            background: #444;
            border-radius: 5px;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
        }
        label {
            min-width: 80px;
        }
    </style>
</head>
<body>
    <canvas id="tvSnowCanvas"></canvas>

    <div class="controls">
        <div class="control-group">
            <label for="pixelSize">Pixel Size:</label>
            <input type="range" id="pixelSize" min="1" max="40" value="20">
            <span id="pixelSizeValue">20</span>
        </div>
        <div class="control-group">
            <label for="animationSpeed">Delay:</label>
            <input type="range" id="animationSpeed" min="1" max="200" value="1">
            <span id="animationSpeedValue">1</span>
        </div>
        <div class="control-group">
            <label for="colorMode">Colors:</label>
            <select id="colorMode">
                <option value="custom">Custom Grayscale</option>
                <option value="bw">Black & White</option>
                <option value="green">Monochrome Green</option>
                <option value="blue">Monochrome Blue</option>
                <option value="red">Monochrome Red</option>
                <option value="rgb_only">Red/Green/Blue Only</option>
                <option value="rgb_bw">Red/Green/Blue/Black/White Only</option>
                <option value="all_colors">All Colors</option>
            </select>
        </div>
    </div>

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

        let animationFrameId;
        let pixelSize = parseInt(document.getElementById('pixelSize').value);
        let animationSpeed = parseInt(document.getElementById('animationSpeed').value);
        let colorMode = document.getElementById('colorMode').value;

        const pixelSizeSlider = document.getElementById('pixelSize');
        const pixelSizeValueSpan = document.getElementById('pixelSizeValue');
        const animationSpeedSlider = document.getElementById('animationSpeed');
        const animationSpeedValueSpan = document.getElementById('animationSpeedValue');
        const colorModeSelect = document.getElementById('colorMode');

        let lastFrameTime = 0;

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drawSnow(); // Redraw immediately on resize
        }

        function drawSnow(currentTime) {
            if (!lastFrameTime) lastFrameTime = currentTime;
            const elapsed = currentTime - lastFrameTime;

            if (elapsed > animationSpeed) { // Control redraw speed
                ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

                for (let y = 0; y < canvas.height; y += pixelSize) {
                    for (let x = 0; x < canvas.width; x += pixelSize) {
                        const randomValue = Math.random();
                        let color;

                        switch (colorMode) {
                            case 'bw':
                                color = randomValue < 0.5 ? 'black' : 'white';
                                break;
                            case 'green':
                                const greenShade = Math.floor(randomValue * 256);
                                color = `rgb(0, ${greenShade}, 0)`;
                                break;
                            case 'blue':
                                const blueShade = Math.floor(randomValue * 256);
                                color = `rgb(0, 0, ${blueShade})`;
                                break;
                            case 'red':
                                const redShade = Math.floor(randomValue * 256);
                                color = `rgb(${redShade}, 0, 0)`;
                                break;
                            case 'custom':
                                const grayShade = Math.floor(randomValue * 256);
                                color = `rgb(${grayShade}, ${grayShade}, ${grayShade})`;
                                break;
                            case 'rgb_only':
                                // Randomly pick one of Red, Green, or Blue
                                const rgbColors = ['red', 'green', 'blue'];
                                color = rgbColors[Math.floor(randomValue * rgbColors.length)];
                                break;
                            case 'rgb_bw':
                                // Randomly pick one of Red, Green, Blue, Black, or White
                                const rgbBwColors = ['red', 'green', 'blue', 'black', 'white'];
                                color = rgbBwColors[Math.floor(randomValue * rgbBwColors.length)];
                                break;
                            case 'all_colors':
                                // Full random RGB color
                                const r = Math.floor(randomValue * 256);
                                const g = Math.floor(Math.random() * 256);
                                const b = Math.floor(Math.random() * 256);
                                color = `rgb(${r}, ${g}, ${b})`;
                                break;
                        }

                        ctx.fillStyle = color;
                        ctx.fillRect(x, y, pixelSize, pixelSize);
                    }
                }
                lastFrameTime = currentTime; // Update last frame time
            }
            animationFrameId = requestAnimationFrame(drawSnow);
        }

        // Event Listeners for sliders and select
        pixelSizeSlider.addEventListener('input', (event) => {
            pixelSize = parseInt(event.target.value);
            pixelSizeValueSpan.textContent = pixelSize;
            cancelAnimationFrame(animationFrameId); // Stop current animation
            drawSnow(performance.now()); // Restart animation immediately with new size
        });

        animationSpeedSlider.addEventListener('input', (event) => {
            animationSpeed = parseInt(event.target.value);
            animationSpeedValueSpan.textContent = animationSpeed;
            // No need to restart animation, the drawSnow function will naturally adjust
        });

        colorModeSelect.addEventListener('change', (event) => {
            colorMode = event.target.value;
            cancelAnimationFrame(animationFrameId); // Stop current animation
            drawSnow(performance.now()); // Restart animation with new color mode
        });

        // Initial setup
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas(); // Set initial canvas size
        drawSnow(performance.now()); // Start the animation
    </script>
</body>
</html>