Hugging Face's logo

Spaces:
terminallylazy
/
anycoder-3e798e34
Running

App Files Community
terminallylazy commited on
Commit
7904f92
·
verified ·
1 Parent(s): 2b09529

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +127 -106
index.html CHANGED
@@ -1,113 +1,127 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover" />
6
- <title>Space-X Debris Explosion Shader</title>
7
- <style>
8
- :root {
9
- color-scheme: dark;
10
- }
11
- html, body {
12
- margin: 0;
13
- height: 100%;
14
- background: #000;
15
- overflow: hidden;
16
- font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
17
- }
18
- #wrap {
19
- position: relative;
20
- width: 100vw;
21
- height: 100vh;
22
- background: radial-gradient(1200px 800px at 50% 60%, #04060a 0%, #020307 55%, #010205 75%, #000 100%);
23
- }
24
- canvas {
25
- position: absolute;
26
- inset: 0;
27
- width: 100%;
28
- height: 100%;
29
- display: block;
30
- }
31
- #overlay {
32
- position: absolute;
33
- top: 12px;
34
- left: 12px;
35
- right: 12px;
36
- display: flex;
37
- justify-content: space-between;
38
- align-items: center;
39
- gap: 12px;
40
- z-index: 10;
41
- pointer-events: none;
42
- }
43
- #title {
44
- font-size: clamp(12px, 2vw, 16px);
45
- letter-spacing: .08em;
46
- text-transform: uppercase;
47
- opacity: .8;
48
- color: #a9b7d1;
49
- pointer-events: auto;
50
- }
51
- #title a {
52
- color: #9ad4ff;
53
- text-decoration: none;
54
- border-bottom: 1px dashed rgba(154,212,255,.35);
55
- }
56
- #controls {
57
- pointer-events: auto;
58
- display: flex;
59
- gap: 8px;
60
- }
61
- button {
62
- background: rgba(255,255,255,.06);
63
- color: #d9e3ff;
64
- border: 1px solid rgba(255,255,255,.12);
65
- border-radius: 10px;
66
- padding: 8px 12px;
67
- font-size: 12px;
68
- cursor: pointer;
69
- backdrop-filter: blur(6px);
70
- transition: all .2s ease;
71
- }
72
- button:hover {
73
- background: rgba(255,255,255,.1);
74
- transform: translateY(-1px);
75
- }
76
- #hint {
77
- position: absolute;
78
- bottom: 12px;
79
- right: 12px;
80
- color: #b9c6e6;
81
- opacity: .65;
82
- font-size: 12px;
83
- padding: 6px 10px;
84
- border: 1px solid rgba(255,255,255,.08);
85
- border-radius: 8px;
86
- background: rgba(0,0,0,.25);
87
- backdrop-filter: blur(6px);
88
- pointer-events: none;
89
- }
90
- </style>
 
 
 
 
 
 
 
 
 
 
 
91
  </head>
 
92
  <body>
93
- <div id="wrap">
94
- <canvas id="gl"></canvas>
95
- <div id="overlay">
96
- <div id="title">
97
- Debris After a Space-X Rocket Explosion
98
- &nbsp;|&nbsp; Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">anycoder</a>
99
- </div>
100
- <div id="controls">
101
- <button id="btn-explode" title="Spawn a new explosion (E)">Explode</button>
102
- <button id="btn-toggle" title="Pause/Resume (Space)">Pause</button>
103
- <button id="btn-reset" title="Reset particles (R)">Reset</button>
 
 
104
  </div>
 
105
  </div>
106
- <div id="hint">Click or press E to explode • Space to pause • R to reset</div>
107
- </div>
108
 
109
- <script>
110
- (function(){
111
  const canvas = document.getElementById('gl');
112
  const gl = canvas.getContext('webgl', { antialias: false, alpha: false, preserveDrawingBuffer: false });
113
  if (!gl) {
@@ -256,6 +270,8 @@
256
 
257
  uniform vec2 u_resolution;
258
  uniform float u_time;
 
 
259
 
260
  uniform int u_starCount;
261
  uniform vec2 u_starPos[1200];
@@ -331,11 +347,11 @@
331
  col += stars * 0.7;
332
 
333
  // Shockwave ring
334
- if (u_time < ${shockDuration.toFixed(1)}) {
335
- float radius = (u_time - shockStart) * 0.9; // world units to NDC
336
  // convert center
337
  vec2 c = vec2(0.0); // origin in NDC
338
- float ringv = ring(ndc, c, radius, ${shockThickness.toFixed(2)});
339
  vec3 ringCol = mix(vec3(0.5,0.8,1.0), vec3(1.0,0.9,0.6), smoothstep(0.0, 1.0, radius));
340
  col += ringCol * ringv * 1.2;
341
  }
@@ -407,6 +423,8 @@
407
  u_decay: gl.getUniformLocation(compositeProg, 'u_decay'),
408
  u_resolution: gl.getUniformLocation(compositeProg, 'u_resolution'),
409
  u_time: gl.getUniformLocation(compositeProg, 'u_time'),
 
 
410
  u_starCount: gl.getUniformLocation(compositeProg, 'u_starCount'),
411
  u_starPos: gl.getUniformLocation(compositeProg, 'u_starPos'),
412
  u_starPhase: gl.getUniformLocation(compositeProg, 'u_starPhase'),
@@ -724,6 +742,8 @@
724
  gl.uniform1f(compositeLoc.u_decay, 0.965); // trail persistence
725
  gl.uniform2f(compositeLoc.u_resolution, W, H);
726
  gl.uniform1f(compositeLoc.u_time, time);
 
 
727
 
728
  gl.uniform1i(compositeLoc.u_starCount, STAR_COUNT);
729
  gl.uniform2fv(compositeLoc.u_starPos, starPos);
@@ -761,6 +781,7 @@
761
  // Auto explode after a moment for dramatic entrance
762
  setTimeout(()=>explode(), 900);
763
  })();
764
- </script>
765
  </body>
 
766
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover" />
7
+ <title>Space-X Debris Explosion Shader</title>
8
+ <style>
9
+ :root {
10
+ color-scheme: dark;
11
+ }
12
+
13
+ html,
14
+ body {
15
+ margin: 0;
16
+ height: 100%;
17
+ background: #000;
18
+ overflow: hidden;
19
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
20
+ }
21
+
22
+ #wrap {
23
+ position: relative;
24
+ width: 100vw;
25
+ height: 100vh;
26
+ background: radial-gradient(1200px 800px at 50% 60%, #04060a 0%, #020307 55%, #010205 75%, #000 100%);
27
+ }
28
+
29
+ canvas {
30
+ position: absolute;
31
+ inset: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ display: block;
35
+ }
36
+
37
+ #overlay {
38
+ position: absolute;
39
+ top: 12px;
40
+ left: 12px;
41
+ right: 12px;
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ gap: 12px;
46
+ z-index: 10;
47
+ pointer-events: none;
48
+ }
49
+
50
+ #title {
51
+ font-size: clamp(12px, 2vw, 16px);
52
+ letter-spacing: .08em;
53
+ text-transform: uppercase;
54
+ opacity: .8;
55
+ color: #a9b7d1;
56
+ pointer-events: auto;
57
+ }
58
+
59
+ #title a {
60
+ color: #9ad4ff;
61
+ text-decoration: none;
62
+ border-bottom: 1px dashed rgba(154, 212, 255, .35);
63
+ }
64
+
65
+ #controls {
66
+ pointer-events: auto;
67
+ display: flex;
68
+ gap: 8px;
69
+ }
70
+
71
+ button {
72
+ background: rgba(255, 255, 255, .06);
73
+ color: #d9e3ff;
74
+ border: 1px solid rgba(255, 255, 255, .12);
75
+ border-radius: 10px;
76
+ padding: 8px 12px;
77
+ font-size: 12px;
78
+ cursor: pointer;
79
+ backdrop-filter: blur(6px);
80
+ transition: all .2s ease;
81
+ }
82
+
83
+ button:hover {
84
+ background: rgba(255, 255, 255, .1);
85
+ transform: translateY(-1px);
86
+ }
87
+
88
+ #hint {
89
+ position: absolute;
90
+ bottom: 12px;
91
+ right: 12px;
92
+ color: #b9c6e6;
93
+ opacity: .65;
94
+ font-size: 12px;
95
+ padding: 6px 10px;
96
+ border: 1px solid rgba(255, 255, 255, .08);
97
+ border-radius: 8px;
98
+ background: rgba(0, 0, 0, .25);
99
+ backdrop-filter: blur(6px);
100
+ pointer-events: none;
101
+ }
102
+ </style>
103
  </head>
104
+
105
  <body>
106
+ <div id="wrap">
107
+ <canvas id="gl"></canvas>
108
+ <div id="overlay">
109
+ <div id="title">
110
+ Debris After a Space-X Rocket Explosion
111
+ &nbsp;|&nbsp; Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
112
+ rel="noopener noreferrer">anycoder</a>
113
+ </div>
114
+ <div id="controls">
115
+ <button id="btn-explode" title="Spawn a new explosion (E)">Explode</button>
116
+ <button id="btn-toggle" title="Pause/Resume (Space)">Pause</button>
117
+ <button id="btn-reset" title="Reset particles (R)">Reset</button>
118
+ </div>
119
  </div>
120
+ <div id="hint">Click or press E to explode • Space to pause • R to reset</div>
121
  </div>
 
 
122
 
123
+ <script>
124
+ (function(){
125
  const canvas = document.getElementById('gl');
126
  const gl = canvas.getContext('webgl', { antialias: false, alpha: false, preserveDrawingBuffer: false });
127
  if (!gl) {
 
270
 
271
  uniform vec2 u_resolution;
272
  uniform float u_time;
273
+ uniform float u_shockStart;
274
+ uniform float u_shockDuration;
275
 
276
  uniform int u_starCount;
277
  uniform vec2 u_starPos[1200];
 
347
  col += stars * 0.7;
348
 
349
  // Shockwave ring
350
+ if (u_time < u_shockDuration) {
351
+ float radius = (u_time - u_shockStart) * 0.9; // world units to NDC
352
  // convert center
353
  vec2 c = vec2(0.0); // origin in NDC
354
+ float ringv = ring(ndc, c, radius, 0.06);
355
  vec3 ringCol = mix(vec3(0.5,0.8,1.0), vec3(1.0,0.9,0.6), smoothstep(0.0, 1.0, radius));
356
  col += ringCol * ringv * 1.2;
357
  }
 
423
  u_decay: gl.getUniformLocation(compositeProg, 'u_decay'),
424
  u_resolution: gl.getUniformLocation(compositeProg, 'u_resolution'),
425
  u_time: gl.getUniformLocation(compositeProg, 'u_time'),
426
+ u_shockStart: gl.getUniformLocation(compositeProg, 'u_shockStart'),
427
+ u_shockDuration: gl.getUniformLocation(compositeProg, 'u_shockDuration'),
428
  u_starCount: gl.getUniformLocation(compositeProg, 'u_starCount'),
429
  u_starPos: gl.getUniformLocation(compositeProg, 'u_starPos'),
430
  u_starPhase: gl.getUniformLocation(compositeProg, 'u_starPhase'),
 
742
  gl.uniform1f(compositeLoc.u_decay, 0.965); // trail persistence
743
  gl.uniform2f(compositeLoc.u_resolution, W, H);
744
  gl.uniform1f(compositeLoc.u_time, time);
745
+ gl.uniform1f(compositeLoc.u_shockStart, shockStart);
746
+ gl.uniform1f(compositeLoc.u_shockDuration, shockDuration);
747
 
748
  gl.uniform1i(compositeLoc.u_starCount, STAR_COUNT);
749
  gl.uniform2fv(compositeLoc.u_starPos, starPos);
 
781
  // Auto explode after a moment for dramatic entrance
782
  setTimeout(()=>explode(), 900);
783
  })();
784
+ </script>
785
  </body>
786
+
787
  </html>