Merge pull request #33 from Absulit/dev

CDN and texture updates

Author: Absulit

index.html

@@ -25,34 +25,27 @@
   <script type="importmap">
       {
         "imports": {
-          "points": "./src/points/src/absulit.points.module.js",
+            "points": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/points.min.js",
 
-          "datasize": "./src/points/src/data-size.js",
-          "renderpass": "./src/points/src/RenderPass.js",
-          "shadertype": "./src/points/src/ShaderType.js",
+            "points/animation": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/animation.min.js",
+            "points/audio": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/audio.min.js",
+            "points/color": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/color.min.js",
+            "points/debug": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/debug.min.js",
+            "points/effects": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/effects.min.js",
+            "points/image": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/image.min.js",
+            "points/math": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/math.min.js",
+            "points/noise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/noise2d.min.js",
+            "points/classicnoise2d": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/classicnoise2d.min.js",
+            "points/random": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/random.min.js",
+            "points/sdf": "https://cdn.jsdelivr.net/gh/absulit/points@0.1.0-alpha.3/build/core/sdf.min.js",
 
-          "animation": "./src/points/src/core/animation.js",
-          "audio": "./src/points/src/core/audio.js",
-          "color": "./src/points/src/core/color.js",
-          "debug": "./src/points/src/core/debug.js",
-          "effects": "./src/points/src/core/effects.js",
-          "image": "./src/points/src/core/image.js",
-          "math": "./src/points/src/core/math.js",
-          "noise2d": "./src/points/src/core/noise2d.js",
-          "classicnoise2d": "./src/points/src/core/classicnoise2d.js",
-          "random": "./src/points/src/core/random.js",
-          "renderpasses": "./src/points/src/RenderPasses.js",
-          "sdf": "./src/points/src/core/sdf.js",
-
-          "datgui": "./src/points/src/vendor/datgui/dat.gui.module.js"
+            "datgui": "https://cdn.jsdelivr.net/gh/dataarts/dat.gui@0.7.9/build/dat.gui.module.js"
         }
       }
   </script>
 
   <link rel="stylesheet" type="text/css" href="style.css">
 
-  <script src="./src/points/src/vendor/stats.js"></script>
-  <script src="./src/points/src/vendor/ccapture/CCapture.all.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
   <script type="module" src="src/main.js"></script>
 </head>

jsconfig.json

@@ -1,5 +1,4 @@
-import Points from 'points';
-import RenderPass from 'renderpass';
+import Points, { RenderPass } from 'points';
 import frag0 from './renderpasses/renderpass0/frag.js';
 import vert from './renderpasses/renderpass0/vert.js';
 import * as dat from 'datgui';

src/main.js

@@ -1,8 +1,8 @@
-import { fnusin, fusin } from 'animation';
-import { GREEN, layer, RED, RGBAFromHSV, WHITE } from 'color';
-import { sprite, texturePosition } from 'image';
-import { PHI, PI, rotateVector, TAU } from 'math';
-import { sdfCircle, sdfLine2, sdfSquare, sdfSegment } from 'sdf';
+import { fnusin, fusin } from 'points/animation';
+import { GREEN, layer, RED, RGBAFromHSV, WHITE } from 'points/color';
+import { sprite, texture } from 'points/image';
+import { PHI, PI, rotateVector, TAU } from 'points/math';
+import { sdfCircle, sdfLine2, sdfSquare, sdfSegment } from 'points/sdf';
 import { structs } from './structs.js';
 
 const frag = /*wgsl*/`
@@ -11,7 +11,7 @@ ${structs}
 ${fnusin}
 ${sdfSegment}
 ${sdfLine2}
-${texturePosition}
+${texture}
 ${sdfCircle}
 ${sdfSquare}
 ${rotateVector}
@@ -213,7 +213,7 @@ fn main(
     // let uvrRotate = mix(uvrRotateMix0, uvrRotateMix1, step(.2, c7));
 
     let feedbackUV = ((uvrRotate + center) / fadeRotate) - center;
-    var feedbackColor = texturePosition(feedbackTexture, imageSampler, vec2(), feedbackUV / ratioWidth, false);
+    var feedbackColor = texture(feedbackTexture, imageSampler, feedbackUV, false);
     feedbackColor = mix(feedbackColor, vec4f(), FEEDBACKFADEN);
     feedbackColor = feedbackColor * step(.01, feedbackColor.a);
 
@@ -227,21 +227,27 @@ fn main(
     let charSizeF32 = vec2(f32(charSize.x) / params.screen.x, f32(charSize.y) / params.screen.y);
 
 
+    // let textScale = 2.476 + c0;
     let textScale = 2.476 + c0;
-    let textUVR = uvr / textScale / ratioWidth;
-    let stringMask = texturePosition(songName, textImageSampler, fontPosition, textUVR, false).r;
-    let stringMask2 = texturePosition(songName, textImageSampler, fontPosition, textUVR + .001 / ratioWidth, false).r;
+    let textUVR = (uvr / textScale / ratioWidth) - fontPosition;
+    let stringMask = texture(songName, textImageSampler, textUVR, false).r;
+    let stringMask2 = texture(songName, textImageSampler, textUVR + .001 / ratioWidth, false).r;
+
+    //
+    var debug = sdfLine2(fontPosition, fontPosition + vec2f(0,.1) * ratio, .005, uvr) * RED;
+    //
 
     var messageStringMask = 0.;
     if(params.showMessage == 1.){
-        let messageScale = mix(textScale, ratioWidth, isPortrait);
-        let dims:vec2u = textureDimensions(messageString, 0);
-        let dimsF32 = vec2f(dims) * messageScale;
-        let dimWidth = dimsF32.x / params.screen.x * messageScale;
+        let messageScale = mix(textScale, 1/ratioWidth, isPortrait);
+        let dims = vec2f(textureDimensions(messageString, 0)) * messageScale;
+
+        let imageWidth = dims / params.screen * ratio; // if you are using uvr you have to multiply by ratio
+        let halfImageWidth = imageWidth * .5;
 
-        var messageUVR = ( (uvr - center) + vec2f(dimWidth * .5, 0));
+        var messageUVR = (uvr) - (center - halfImageWidth);
         messageUVR = vec2f(messageUVR.x, messageUVR.y + sin(params.time + messageUVR.x * 10 ) * .01) / messageScale;
-        messageStringMask = texturePosition(messageString, textImageSampler, vec2f(), messageUVR, false).r;
+        messageStringMask = texture(messageString, textImageSampler, messageUVR, false).r;
     }
 
     let numSides = minNumSides + floor(5 * c7);