@@ -152,73 +152,75 @@ function restoreImage(imgId, originalSrc) {
152152<!-- Wave Visualizer Script -->
153153<script >
154154 const canvas = document .getElementById (' visualizer' );
155- const ctx = canvas .getContext (' 2d' );
156- let time = 0 ;
157- let waveData = Array (8 ).fill (0 ).map (() => ({
158- value: Math .random () * 0.5 + 0.1 ,
159- targetValue: Math .random () * 0.15 + 0.1 ,
160- speed: Math .random () * .02 + 0.01
161- }));
162-
163- function resizeCanvas () {
164- canvas .width = window .innerWidth ;
165- canvas .height = window .innerHeight ;
155+ if (canvas) {
156+ const ctx = canvas .getContext (' 2d' );
157+ let time = 0 ;
158+ let waveData = Array (8 ).fill (0 ).map (() => ({
159+ value: Math .random () * 0.5 + 0.1 ,
160+ targetValue: Math .random () * 0.15 + 0.1 ,
161+ speed: Math .random () * .02 + 0.01
162+ }));
163+
164+ function resizeCanvas () {
165+ canvas .width = window .innerWidth ;
166+ canvas .height = window .innerHeight ;
167+ }
168+
169+ function updateWaveData () {
170+ waveData .forEach (data => {
171+ if (Math .random () < 0.01 ) {
172+ data .targetValue = Math .random () * 0.7 + 0.1 ;
173+ }
174+ const diff = data .targetValue - data .value ;
175+ data .value += diff * data .speed ;
176+ });
177+ }
178+
179+ function draw () {
180+ ctx .fillStyle = ' black' ;
181+ ctx .fillRect (0 , 0 , canvas .width , canvas .height );
182+
183+ for (let i = 0 ; i < 8 ; i++ ) {
184+ const freq = waveData[i].value * 7.0 ;
185+ ctx .beginPath ();
186+
187+ for (let x = 0 ; x < canvas .width ; x += 1 ) {
188+ const normalizedX = (x / canvas .width ) * 2 - 1 ;
189+ let px = normalizedX + i * 0.04 + freq * 0.03 ;
190+ let py = Math .sin (px * 10 + time) * Math .cos (px * 2 ) * freq * 0.1 * ((i + 1 ) / 8 );
191+ const canvasY = (py + 1 ) * canvas .height / 2 ;
192+
193+ if (x === 0 ) {
194+ ctx .moveTo (x, canvasY);
195+ } else {
196+ ctx .lineTo (x, canvasY);
197+ }
198+ }
199+
200+ const intensity = Math .min (1 , freq * 0.3 );
201+ const r = 255 + intensity * 100 ;
202+ const g = 243 + intensity * 130 ;
203+ const b = 197 ;
204+
205+ ctx .lineWidth = .1 + (i * 0.3 );
206+ ctx .strokeStyle = ` rgba(${ r} , ${ g} , ${ b} , 0.6)` ;
207+ ctx .shadowColor = ` rgba(${ r} , ${ g} , ${ b} , 0.5)` ;
208+ ctx .shadowBlur = 5 ;
209+ ctx .stroke ();
210+ ctx .shadowBlur = 0 ;
211+ }
212+ }
213+
214+ function animate () {
215+ time += 0.02 ;
216+ updateWaveData ();
217+ draw ();
218+ requestAnimationFrame (animate);
219+ }
220+
221+ window .addEventListener (' resize' , resizeCanvas);
222+ resizeCanvas ();
223+ animate ();
166224 }
167-
168- function updateWaveData () {
169- waveData .forEach (data => {
170- if (Math .random () < 0.01 ) {
171- data .targetValue = Math .random () * 0.7 + 0.1 ;
172- }
173- const diff = data .targetValue - data .value ;
174- data .value += diff * data .speed ;
175- });
176- }
177-
178- function draw () {
179- ctx .fillStyle = ' black' ;
180- ctx .fillRect (0 , 0 , canvas .width , canvas .height );
181-
182- for (let i = 0 ; i < 8 ; i++ ) {
183- const freq = waveData[i].value * 7.0 ;
184- ctx .beginPath ();
185-
186- for (let x = 0 ; x < canvas .width ; x += 1 ) {
187- const normalizedX = (x / canvas .width ) * 2 - 1 ;
188- let px = normalizedX + i * 0.04 + freq * 0.03 ;
189- let py = Math .sin (px * 10 + time) * Math .cos (px * 2 ) * freq * 0.1 * ((i + 1 ) / 8 );
190- const canvasY = (py + 1 ) * canvas .height / 2 ;
191-
192- if (x === 0 ) {
193- ctx .moveTo (x, canvasY);
194- } else {
195- ctx .lineTo (x, canvasY);
196- }
197- }
198-
199- const intensity = Math .min (1 , freq * 0.3 );
200- const r = 255 + intensity * 100 ;
201- const g = 243 + intensity * 130 ;
202- const b = 197 ;
203-
204- ctx .lineWidth = .1 + (i * 0.3 );
205- ctx .strokeStyle = ` rgba(${ r} , ${ g} , ${ b} , 0.6)` ;
206- ctx .shadowColor = ` rgba(${ r} , ${ g} , ${ b} , 0.5)` ;
207- ctx .shadowBlur = 5 ;
208- ctx .stroke ();
209- ctx .shadowBlur = 0 ;
210- }
211- }
212-
213- function animate () {
214- time += 0.02 ;
215- updateWaveData ();
216- draw ();
217- requestAnimationFrame (animate);
218- }
219-
220- window .addEventListener (' resize' , resizeCanvas);
221- resizeCanvas ();
222- animate ();
223225 </script >
224226 <!-- Wave Visualizer Script -->
0 commit comments