Skip to content

Commit 14cf640

Browse files
authored
Merge pull request #11 from Absulit/dev
select song message, ngon and no webgpu message
2 parents 0444e39 + 96ec05c commit 14cf640

4 files changed

Lines changed: 108 additions & 49 deletions

File tree

index.html

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66

77
<head>
88
<title>Gravity Pull Audio Visualizer by absulit</title>
9-
<meta name="Description"
10-
content="Audio Visualizer made with WebGPU and JavaScript">
9+
<meta name="Description" content="Audio Visualizer made with WebGPU and JavaScript">
1110

1211
<meta property="og:title" content="Gravity Pull Audio Visualizer by absulit" />
1312
<meta property="og:type" content="website" />
@@ -23,31 +22,31 @@
2322
<meta name="twitter:image" content="https://absulit.github.io/Gravity-Pull/docs/example1.webp" />
2423

2524
<script type="importmap">
26-
{
27-
"imports": {
28-
"points": "./src/points/absulit.points.module.js",
25+
{
26+
"imports": {
27+
"points": "./src/points/absulit.points.module.js",
2928

30-
"datasize": "./src/points/data-size.js",
31-
"renderpass": "./src/points/RenderPass.js",
32-
"shadertype": "./src/points/ShaderType.js",
29+
"datasize": "./src/points/data-size.js",
30+
"renderpass": "./src/points/RenderPass.js",
31+
"shadertype": "./src/points/ShaderType.js",
3332

34-
"animation": "./src/points/core/animation.js",
35-
"audio": "./src/points/core/audio.js",
36-
"color": "./src/points/core/color.js",
37-
"debug": "./src/points/core/debug.js",
38-
"effects": "./src/points/core/effects.js",
39-
"image": "./src/points/core/image.js",
40-
"math": "./src/points/core/math.js",
41-
"noise2d": "./src/points/core/noise2d.js",
42-
"classicnoise2d": "./src/points/core/classicnoise2d.js",
43-
"random": "./src/points/core/random.js",
44-
"renderpasses": "./src/points/RenderPasses.js",
45-
"sdf": "./src/points/core/sdf.js",
33+
"animation": "./src/points/core/animation.js",
34+
"audio": "./src/points/core/audio.js",
35+
"color": "./src/points/core/color.js",
36+
"debug": "./src/points/core/debug.js",
37+
"effects": "./src/points/core/effects.js",
38+
"image": "./src/points/core/image.js",
39+
"math": "./src/points/core/math.js",
40+
"noise2d": "./src/points/core/noise2d.js",
41+
"classicnoise2d": "./src/points/core/classicnoise2d.js",
42+
"random": "./src/points/core/random.js",
43+
"renderpasses": "./src/points/RenderPasses.js",
44+
"sdf": "./src/points/core/sdf.js",
4645

47-
"datgui": "./src/points/vendor/datgui/dat.gui.module.js"
48-
}
49-
}
50-
</script>
46+
"datgui": "./src/points/vendor/datgui/dat.gui.module.js"
47+
}
48+
}
49+
</script>
5150

5251
<link rel="stylesheet" type="text/css" href="style.css">
5352

@@ -58,11 +57,16 @@
5857
</head>
5958

6059
<body>
60+
<div id="nowebgpu">
61+
<div>
62+
WebGPU is only available on Chrome, <a target="_blank" rel="noopener"
63+
href="https://www.mozilla.org/en-US/firefox/nightly/notes/">Firefox Nightly</a>, and <a target="_blank"
64+
rel="noopener" href="https://developer.apple.com/safari/technology-preview/">Safary Technology Preview</a>.
65+
</div>
66+
</div>
6167
<canvas id="canvas" width="800" height="800">
6268
Oops ... your browser doesn't support the HTML5 canvas element
6369
</canvas>
64-
65-
6670
</body>
6771

6872
</html>

src/main.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ folderOptions.add(selectedScheme, 'Color Scheme', colorSchemes).onChange(v => {
4242
});
4343

4444
function clickSong() {
45-
playSong(this)
45+
points.setUniform('showMessage', 0);
46+
playSong(this);
4647
}
4748

4849
function playSong(song) {
@@ -318,21 +319,29 @@ points.setTexture2d('feedbackTexture', true);
318319

319320
audio = points.setAudio('audio', './../80s-pulse-synthwave-dude-212407.mp3', options.volume, loop, false);
320321

322+
points.setUniform('showMessage', 1);
321323
points.setUniform('rand', 0);
322324
points.setUniform('progress', 0);
323325
points.setUniform('artworkLoaded', 0);
324326
// points.setUniform('somecolor', colors.color2, 'vec3f');
325327
points.setStorageMap('chars', [15, 14, 8, 13, 19, 18], 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
328+
points.setStorageMap('message', strToCodes('Select a song to Play'), 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
326329
points.setStorageMap('artworkColors', Array(16).fill(1), 'array<vec4f>');
327330
points.setStorage('variables', 'Variables');
328331
await points.setTextureImage('font', './src/img/inconsolata_regular_8x22.png');
329332
const renderPasses = [
330333
new RenderPass(vert, frag0, null),
331334
];
332335

333-
await points.init(renderPasses);
336+
if (await points.init(renderPasses)) {
337+
points.fitWindow = true;
338+
update();
339+
} else {
340+
const el = document.getElementById('nowebgpu');
341+
el.classList.toggle('show');
342+
}
343+
334344

335-
points.fitWindow = true;
336345

337346
points.canvas.addEventListener('click', _ => {
338347
if (pauseClickTimeout) {

src/renderpasses/renderpass0/frag.js

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { fnusin, fusin } from 'animation';
22
import { GREEN, layer, RED, WHITE } from 'color';
33
import { sprite, texturePosition } from 'image';
4-
import { PI, rotateVector, TAU } from 'math';
4+
import { PI, rotateVector } from 'math';
55
import { sdfCircle, sdfLine2, sdfSquare, sdfSegment } from 'sdf';
66
import { structs } from './structs.js';
77

@@ -16,7 +16,7 @@ ${sdfCircle}
1616
${sdfSquare}
1717
${rotateVector}
1818
${sprite}
19-
${TAU}
19+
2020
${PI}
2121
${layer}
2222
${fusin}
@@ -102,14 +102,27 @@ fn sdRectangle1(position:vec2f, size:vec2f, feather:f32, uv:vec2f) -> f32 {
102102
return st;
103103
}
104104
105+
fn sdfngon(position:vec2f, numSides:f32, radius:f32, feather:f32, uv:vec2f) -> f32 {
106+
let uv2 = uv - position;
107+
let angle = atan2(uv2.y, uv2.x);
108+
let distance = length(uv2);
109+
110+
let border = -.05;
111+
112+
let sector = TAU / numSides;
113+
let d = 1 - cos(floor(0.5 + angle / sector) * sector - angle) * length(uv2) - radius;
114+
return mix(0,1, step(border, d) * step(d, border + feather));
115+
}
116+
105117
fn sdRectangle2(position0:vec2f, position1:vec2f, uv:vec2f) -> f32 {
106118
let d = max(position0 - uv, uv - position1);
107119
// If the point is inside the rectangle, return the negative distance to the closest edge
108120
return length(max(d, vec2f())) + min(max(d.x, d.y), 0.0);
109121
}
110122
111123
112-
124+
const TAU = PI * 2; // TODO: fix on main library
125+
const TAUQUARTER = TAU * .25;
113126
const NUMCHARS = 128;
114127
const MAXBITS = 256;
115128
const CHLEN = 0.125;
@@ -226,18 +239,25 @@ fn main(
226239
stringMask2 += sprite(font, textImageSampler, space + fontPosition + charPosition, textUVR + .0005, charIndex - charOffset, charSize).x;
227240
}
228241
242+
var messageStringMask = 0.;
243+
let messagePosition = vec2(.15, .19) * ratio;
244+
for (var index = 0; index < 21; index++) {
245+
let charIndex = u32(message[index]);
246+
let charPosition = charSizeF32 * vec2(f32(index), sin(params.time + f32(index) * .1));
247+
let space = spaceRatio * vec2(f32(index), 0);
248+
messageStringMask += sprite(font, textImageSampler, space + messagePosition + charPosition, textUVR, charIndex - charOffset, charSize).x;
249+
}
229250
230251
231-
232-
233-
var equiTriUV = uvr_minus_center / .156; // .31
234-
let c2Visible = step(.001, c2); // to revert value only if c2 (triangle) is visible
252+
let minNumSides = 3.;
253+
let numSides = minNumSides + floor(5 * c7);
254+
var equiTriUV = uvr_minus_center / .156 * minNumSides / numSides; // .31
255+
let c2Visible = step(.001, c2); // to revert value only if c2 (poligon) is visible
235256
variables.triRotation += TRIROTATION * c7 * c6 + c5 * TRIROTATION; // rotate gradually
236257
variables.triRotation -= .000001 * step(0., variables.triRotation) * c2Visible;
237258
variables.triRotation = variables.triRotation % TAU; // cap rotation to avoid it getting stuck
238-
equiTriUV = rotateVector(equiTriUV, variables.triRotation);
239-
let equiTriMask = sdfEquiTriangle2(vec2f(), 1 - c2 * .5, .007, equiTriUV) * c2Visible;
240-
259+
equiTriUV = rotateVector(equiTriUV, variables.triRotation + TAUQUARTER);
260+
let poliMask = sdfngon(vec2f(), numSides, .5 + (c7 * .5), .01, equiTriUV) * c2Visible;
241261
242262
let progressBarMask = sdfLine2(vec2(), vec2(params.progress,0) * ratio, .005, uvr);
243263
@@ -251,7 +271,7 @@ fn main(
251271
var audioWave = vec4f();
252272
var audioWave2 = vec4f();
253273
var progressBar = vec4f();
254-
var triangle = vec4f();
274+
var poligon = vec4f();
255275
var stringColor = vec4f();
256276
var stringColor2 = vec4f();
257277
@@ -262,23 +282,23 @@ fn main(
262282
audioWave = vec4f(lineMask, lineMask*audioX, lineMask*uvrRotate.x, 1);
263283
audioWave2 = vec4f(lineMask2, lineMask2*audioX2, lineMask2*uvrRotate.x, 1);
264284
progressBar = vec4f(1,audioX,uvrRotate.x,1) * progressBarMask;
265-
triangle = vec4f(1,.4 + .1 * c4, step(.5, c2) * .4,1) * equiTriMask;
266-
stringColor = stringMask * mix(vec4(1 * fusin(.132) , 1 * fusin(.586) ,0,1), vec4(1,.5, 1 * fusin(.7589633), 1), c0);
267-
stringColor2 = stringMask2 * mix( vec4( 1-vec3(1 * fusin(.132) , 1 * fusin(.586), 0), 1), vec4(1-vec3(1,.5, 1 * fusin(.7589633)), 1), c0);
285+
poligon = vec4f(1,.4 + .1 * c4, step(.5, c2) * .4,1) * poliMask;
286+
stringColor = stringMask * mix(vec4(fusin(.132) , fusin(.586) ,0,1), vec4(1,.5, fusin(.7589633), 1), c0);
287+
stringColor2 = stringMask2 * mix( vec4( 1-vec3(fusin(.132) , fusin(.586), 0), 1), vec4(1-vec3(1,.5, fusin(.7589633)), 1), c0);
268288
}
269289
case 1 { // matrix
270290
audioWave = vec4f( vec3f(.129,.145,.039) * lineMask, 1);
271291
audioWave2 = vec4f( vec3f(.231,.274,.117) * lineMask2, 1);
272292
progressBar = vec4f( vec3f(.2,.282,.152) * progressBarMask, 1);
273-
triangle = vec4f( vec3f(.309,.4,.290) * equiTriMask, 1);
293+
poligon = vec4f( vec3f(.309,.4,.290) * poliMask, 1);
274294
stringColor = vec4f( .572,.717,.549, 1) * stringMask;
275295
stringColor2 = stringMask2 * GREEN;
276296
}
277297
case 2 { // artwork
278298
audioWave = vec4f( mix(artworkColors[9].rgb, artworkColors[0].rgb, audioX) * lineMask, 1);
279299
audioWave2 = vec4f( mix(artworkColors[8].rgb, artworkColors[1].rgb,audioX) * lineMask2, 1);
280300
progressBar = vec4f( mix(artworkColors[7].rgb, artworkColors[2].rgb, uvrRotate.x) * progressBarMask, 1);
281-
triangle = vec4f( mix(artworkColors[6].rgb, artworkColors[3].rgb, c4) * equiTriMask, 1);
301+
poligon = vec4f( mix(artworkColors[6].rgb, artworkColors[3].rgb, c4) * poliMask, 1);
282302
stringColor = mix(artworkColors[5], artworkColors[4], c0) * stringMask;
283303
stringColor2 = stringMask2 * WHITE;
284304
}
@@ -287,23 +307,24 @@ fn main(
287307
audioWave = vec4f( B * (1-lineMask), lineMask);
288308
audioWave2 = vec4f( B * (1-lineMask2), lineMask2);
289309
progressBar = vec4f( B * (1-progressBarMask), progressBarMask);
290-
triangle = vec4f( B * (1-equiTriMask), equiTriMask);
310+
poligon = vec4f( B * (1-poliMask), poliMask);
291311
stringColor = vec4f(vec3f(1-stringMask), stringMask);
292312
stringColor2 = stringMask2 * WHITE;
293313
}
294314
}
295315
296316
297317
298-
var finalColor = layer(audioWave2 + audioWave + progressBar + triangle + feedbackColor, layer(stringColor2, stringColor));
318+
var finalColor = layer(audioWave2 + audioWave + progressBar + poligon + feedbackColor, layer(stringColor2, stringColor));
299319
if(colorScheme == 3){
300320
finalColor = layer(bg, finalColor);
301321
}
302322
// let finalColor = layer(bg, audioWave);
303323
// let finalColor = vec4f(1,s,0,1);
304324
305-
return finalColor;
306-
// return vec4(st, 0, 1);
325+
return finalColor + (messageStringMask * WHITE * params.showMessage * .1);
326+
// return finalColor + (poliMask * WHITE * params.showMessage * .1);
327+
// return poliMask * WHITE;
307328
}
308329
`;
309330

style.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,29 @@ body {
55
width: 100%;
66
height: 100%;
77
position: absolute;
8+
}
9+
10+
#nowebgpu a,
11+
#info a {
12+
color: #488553;
13+
}
14+
15+
16+
#nowebgpu {
17+
display : none;
18+
position : absolute;
19+
width : 100%;
20+
height : 800px;
21+
align-items : center;
22+
justify-content: center;
23+
color : white;
24+
z-index : 100;
25+
}
26+
27+
#nowebgpu>div {
28+
width: 50%;
29+
}
30+
31+
#nowebgpu.show {
32+
display: flex;
833
}

0 commit comments

Comments
 (0)