Skip to content

Commit ef8f9b4

Browse files
AbsulitAbsulit
authored
Merge pull request #49 from Absulit/update_points
updating POINTS to v0.8.0
2 parents c1dc763 + 236d9a4 commit ef8f9b4

2 files changed

Lines changed: 33 additions & 31 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,19 @@
2525
<script type="importmap">
2626
{
2727
"imports": {
28-
"points": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/points.min.js",
28+
"points": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/points.min.js",
2929

30-
"points/animation": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/animation.min.js",
31-
"points/audio": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/audio.min.js",
32-
"points/color": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/color.min.js",
33-
"points/debug": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/debug.min.js",
34-
"points/effects": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/effects.min.js",
35-
"points/image": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/image.min.js",
36-
"points/math": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/math.min.js",
37-
"points/noise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/noise2d.min.js",
38-
"points/classicnoise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/classicnoise2d.min.js",
39-
"points/random": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/random.min.js",
40-
"points/sdf": "https://cdn.jsdelivr.net/gh/absulit/points@0.7.0/build/core/sdf.min.js",
30+
"points/animation": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/animation.min.js",
31+
"points/audio": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/audio.min.js",
32+
"points/color": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/color.min.js",
33+
"points/debug": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/debug.min.js",
34+
"points/effects": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/effects.min.js",
35+
"points/image": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/image.min.js",
36+
"points/math": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/math.min.js",
37+
"points/noise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/noise2d.min.js",
38+
"points/classicnoise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/classicnoise2d.min.js",
39+
"points/random": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/random.min.js",
40+
"points/sdf": "https://cdn.jsdelivr.net/gh/absulit/points@0.8.0/build/core/sdf.min.js",
4141

4242
"datgui": "https://cdn.jsdelivr.net/gh/dataarts/dat.gui@0.7.9/build/dat.gui.module.js"
4343
}

‎src/main.js‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const folderControls = gui.addFolder('controls');
1515
const folderSongs = gui.addFolder('songs');
1616
const size = { x: 8, y: 22 }, offset = -32, atlasPath = 'src/img/inconsolata_regular_8x22.png';
1717

18+
const { uniforms, storages } = points;
19+
1820
points.debug = false;
1921

2022
let audio = null;
@@ -32,7 +34,7 @@ const options = {
3234
const selectedScheme = {
3335
'Color Scheme': 0, // Default value
3436
};
35-
points.setUniform('colorScheme', 0);
37+
uniforms.colorScheme = 0;
3638
const colorSchemes = {
3739
Default: 0,
3840
Matrix: 1,
@@ -42,7 +44,7 @@ const colorSchemes = {
4244
Cycle: 5
4345
}
4446
folderOptions.add(selectedScheme, 'Color Scheme', colorSchemes).onChange(v => {
45-
points.setUniform('colorScheme', v)
47+
uniforms.colorScheme = +v;
4648
saveOption('scheme', v);
4749
});
4850

@@ -70,7 +72,7 @@ async function playSong(song) {
7072
const { file } = song;
7173
currentSong = song;
7274
saveOption('currentSongId', currentSong.id);
73-
points.setUniform('showMessage', 0);
75+
uniforms.showMessage = 0;
7476
const name = song?.name || file.name;
7577
const title = name;
7678

@@ -82,9 +84,9 @@ async function playSong(song) {
8284

8385
let artworkLoaded = 0;
8486

85-
song?.artworkColors && points.setStorageMap('artworkColors', song?.artworkColors.flat());
87+
song?.artworkColors && (points.storages.artworkColors = song?.artworkColors.flat());
8688
song?.artworkColors && (artworkLoaded = 1);
87-
points.setUniform('artworkLoaded', artworkLoaded);
89+
uniforms.artworkLoaded = artworkLoaded;
8890
audio.id = song?.id;
8991

9092
assingMediaSession(song);
@@ -95,8 +97,7 @@ async function playSong(song) {
9597
}
9698

9799
function onTimeUpdate() {
98-
const progress = audio.currentTime / audio.duration;
99-
points.setUniform('progress', progress);
100+
uniforms.progress = audio.currentTime / audio.duration;
100101
}
101102

102103
function loadSong() {
@@ -160,8 +161,8 @@ async function onCompleteTags(result) {
160161
artworkColors = await countImageColors(artworkImageUrl);
161162
song.artworkImageUrl = artworkImageUrl;
162163
song.artworkColors = artworkColors;
163-
points.setStorageMap('artworkColors', artworkColors.flat());
164-
points.setUniform('artworkLoaded', 1);
164+
storages.artworkColors = artworkColors.flat();
165+
uniforms.artworkLoaded = 1;
165166

166167
} else {
167168
console.log('No album art found.');
@@ -306,7 +307,7 @@ console.log(currentSongId);
306307

307308
if (scheme) {
308309
selectedScheme['Color Scheme'] = scheme;
309-
points.setUniform('colorScheme', scheme)
310+
uniforms.colorScheme = +scheme;
310311
folderOptions.updateDisplay();
311312
}
312313

@@ -336,7 +337,7 @@ songsFromDB.forEach(item => {
336337

337338
let volumeSlider = null;
338339
Object.keys(options).forEach(key => {
339-
points.setUniform(key, options[key]);
340+
uniforms[key] = options[key];
340341
if (key == 'volume') {
341342
volumeSlider = folderOptions.add(options, key, 0, 1, .0001).name(key);
342343
} else {
@@ -365,13 +366,14 @@ points.setTexture2d('feedbackTexture', true);
365366

366367
audio = points.setAudio('audio', '', options.volume, loop, false); // TODO returl null if empty or null is passed
367368

368-
points.setUniform('showMessage', 1);
369-
points.setUniform('rand', 0);
370-
points.setUniform('progress', 0);
371-
points.setUniform('artworkLoaded', 0);
369+
uniforms.showMessage = 1;
370+
uniforms.rand = 0;
371+
uniforms.progress = 0;
372+
uniforms.artworkLoaded = 0;
373+
372374
// points.setStorageMap('chars', strToCodes('Gravity Pull'), 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
373-
points.setStorageMap('artworkColors', Array(40).fill(1), 'array<vec4f, 10>');
374-
points.setStorage('variables', 'Variables', false, GPUShaderStage.FRAGMENT);
375+
storages.artworkColors.setType('array<vec4f, 10>').setValue(Array(40).fill(1))
376+
storages.variables.setType('Variables').setShaderStage(GPUShaderStage.FRAGMENT);
375377

376378

377379
await points.setTextureString('messageString', 'Select a song to Play', atlasPath, size, offset);
@@ -417,13 +419,13 @@ points.canvas.addEventListener('dblclick', _ => {
417419

418420
setInterval(_ => {
419421
console.log('---- 10s');
420-
points.setUniform('rand', Math.random());
422+
uniforms.rand = Math.random();
421423
}, 10000)
422424

423425

424426
// call `points.update()` methods to render a new frame
425427
function update() {
426-
Object.keys(options).forEach(key => points.setUniform(key, options[key]));
428+
Object.keys(options).forEach(key => uniforms[key] = options[key]);
427429
// points.setUniform('somecolor', colors.color2.map(i => i / 255))
428430
}
429431

0 commit comments

Comments
 (0)