-
Notifications
You must be signed in to change notification settings - Fork 0
/
defrag.html
135 lines (119 loc) · 4.7 KB
/
defrag.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defrag Sound-Reactive Visualizer</title>
<style>
body, html {
margin: 0;
overflow: hidden;
height: 100%;
background-color: #000000; /* OLED black */
font-family: 'Courier New', monospace;
color: #00FF00; /* Old-school green text */
}
#canvas {
display: block;
}
#defragText {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
font-size: 20px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="defragText">Defragmenting Drive C:</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
const rows = 30;
const cols = 40;
const blockWidth = canvas.width / cols;
const blockHeight = canvas.height / rows;
const blocks = [];
let idleAnimationTime = 0.0; // Idle state timer for defragmentation effects
let idleColorShift = 0;
// Initialize grid with random colors
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
blocks.push({
x: j * blockWidth,
y: i * blockHeight,
color: `hsl(${Math.random() * 360}, 100%, 50%)`,
sizeModifier: 1.0
});
}
}
let analyser;
let audioDataArray = [];
let idleState = true;
async function setupAudio() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
analyser = audioContext.createAnalyser();
analyser.fftSize = 64; // Small for faster reactions
audioDataArray = new Uint8Array(analyser.frequencyBinCount);
source.connect(analyser);
getAudioData();
} catch (err) {
console.error("Error capturing audio: ", err);
}
}
function getAudioData() {
requestAnimationFrame(getAudioData);
analyser.getByteFrequencyData(audioDataArray);
idleState = audioDataArray.reduce((sum, value) => sum + value, 0) === 0; // Idle if all audio data is zero
}
function drawBlocks() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
blocks.forEach((block, index) => {
const frequency = audioDataArray[index % audioDataArray.length] / 255.0; // Normalize frequency
block.sizeModifier = frequency * 2; // Adjust block size based on frequency data
if (idleState) {
// If idle, perform defragmentation-style rearrangement of blocks
idleAnimationTime += 0.005;
const idleEffect = Math.sin(idleAnimationTime + index * 0.1);
block.sizeModifier = 1.0 + idleEffect * 0.2; // Small fluctuations
block.color = `hsl(${(idleColorShift + index) % 360}, 100%, 50%)`; // Gradual color shift
} else {
const colorMod = Math.floor(frequency * 360); // Adjust block color based on frequency data
block.color = `hsl(${colorMod}, 100%, 50%)`;
}
const adjustedWidth = blockWidth * block.sizeModifier;
const adjustedHeight = blockHeight * block.sizeModifier;
ctx.fillStyle = block.color;
ctx.fillRect(block.x, block.y, adjustedWidth, adjustedHeight);
});
idleColorShift += 1; // Slow color shift during idle state
}
function defragTextAnimation() {
const text = document.getElementById('defragText');
if (text.innerHTML.endsWith("...")) {
text.innerHTML = "Defragmenting Drive C:";
} else {
text.innerHTML += ".";
}
}
function defragLoop() {
drawBlocks();
defragTextAnimation();
requestAnimationFrame(defragLoop);
}
setupAudio();
defragLoop();
</script>
</body>
</html>