Merge pull request #30 from Absulit/points_update

Points update

Author: Absulit

src/main.js

@@ -4,7 +4,7 @@ import frag0 from './renderpasses/renderpass0/frag.js';
 import vert from './renderpasses/renderpass0/vert.js';
 import * as dat from 'datgui';
 import { Dexie } from 'https://unpkg.com/dexie/dist/modern/dexie.mjs';
-import { countImageColors, loadImage, readTags, sprite, strToCodes, strToImage } from './utils.js';
+import { countImageColors, readTags } from './utils.js';
 
 /**
  * @type {Points}
@@ -14,7 +14,7 @@ const gui = new dat.GUI({ name: 'Points GUI' });
 const folderOptions = gui.addFolder('options');
 const folderControls = gui.addFolder('controls');
 const folderSongs = gui.addFolder('songs');
-const MAXCHARS = 30;
+const size = { x: 8, y: 22 }, offset = -32, atlasPath = 'src/img/inconsolata_regular_8x22.png';
 
 let audio = null;
 let loop = false;
@@ -79,10 +79,7 @@ async function playSong(song) {
     audio && audio.pause() && (audio = null);
     audio = points.setAudio('audio', audioUrl, options.volume, false, false);
 
-    points.setUniform('numChars', title.length < MAXCHARS ? title.length : MAXCHARS);
-
-    const songNameImg = strToImage(title, atlas, size);
-    await points.setTextureImage('songName', songNameImg);
+    await points.setTextureString('songName', title, atlasPath, size, offset);
 
     let artworkLoaded = 0;
     song?.artworkColors && points.setStorageMap('artworkColors', song?.artworkColors.flat());
@@ -191,11 +188,8 @@ async function onCompleteTags(result) {
     }
 
     folderSongs.add(song, 'fn').name(song.name);
-    points.setUniform('numChars', title.length < MAXCHARS ? title.length : MAXCHARS);
-    // points.setStorageMap('chars', strToCodes(title));
 
-    const songNameImg = strToImage(title, atlas, size);
-    await points.setTextureImage('songName', songNameImg);
+    await points.setTextureString('songName', title, atlasPath, size, offset);
 }
 
 async function onErrorTags(response) {
@@ -375,25 +369,13 @@ points.setUniform('showMessage', 1);
 points.setUniform('rand', 0);
 points.setUniform('progress', 0);
 points.setUniform('artworkLoaded', 0);
-// points.setUniform('somecolor', colors.color2, 'vec3f');
-points.setUniform('numChars', 12);
 // points.setStorageMap('chars', strToCodes('Gravity Pull'), 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
 points.setStorageMap('artworkColors', Array(16).fill(1), 'array<vec4f>');
 points.setStorage('variables', 'Variables');
-await points.setTextureImage('font', './src/img/inconsolata_regular_8x22.png');
-
-
-
-const size = { x: 8, y: 22 };
-const atlas = await loadImage('src/img/inconsolata_regular_8x22.png');
-const messageStringImg = strToImage('Select a song to Play', atlas, size);
-await points.setTextureImage('messageString', messageStringImg);
-
-
 
-const songNameImg = strToImage('Gravity Pull', atlas, size);
-await points.setTextureImage('songName', songNameImg);
 
+await points.setTextureString('messageString', 'Select a song to Play', atlasPath, size, offset);
+await points.setTextureString('songName', 'Gravity Pull', atlasPath, size, offset);
 
 const renderPasses = [
     new RenderPass(vert, frag0, null),

src/points

@@ -1,7 +1,3 @@
-export function strToCodes(str) {
-    return Array.from(str).map(char => char.charCodeAt(0))
-}
-
 export function readTags(song) {
     return new Promise((resolve, reject) => {
         jsmediatags.read(song.file, {
@@ -60,52 +56,3 @@ export async function countImageColors(src) {
 
     });
 }
-
-/**
- *
- * @param {Image} atlas Image atlas to parse
- * @param {CanvasRenderingContext2D} ctx Canvas context
- * @param {Number} index index in the atlas, so 0 is the first char
- * @param {Object} size cell dimensions
- * @param {Number} finalIndex final positional index in the canvas
- */
-export function sprite(atlas, ctx, index, size, finalIndex) {
-    const { width } = atlas;
-    const numColumns = width / size.x
-
-    const x = index % numColumns;
-    const y = Math.floor(index / numColumns);
-
-    ctx.drawImage(
-        atlas,
-        x * size.x,
-        y * size.y,
-        size.x,
-        size.y,
-
-        size.x * finalIndex,
-        0,
-
-        size.x,
-        size.y);
-}
-
-export function strToImage(str, atlasImg, size){
-    const chars = strToCodes(str);
-    const canvas = document.createElement('canvas');
-    canvas.width = chars.length * size.x;
-    canvas.height = size.y;
-    const ctx = canvas.getContext('2d');
-
-    chars.forEach((c, i) => sprite(atlasImg, ctx, c - 32, size, i));
-    return canvas.toDataURL('image/png');
-}
-
-export async function loadImage(src) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.src = src;
-        img.onload = () => resolve(img);
-        img.onerror = err => reject(err);
-    });
-}