Page writing clean up & style tweaks

Reworked a few pages writing for content and general presentation.
_Added more AI Dev media to help show GAT networks and a better visual of my ESN

Author: ProcStack

README.md

@@ -1,73 +1,41 @@
 # procstack.github.io / pxlNav
-### Javascript player controller & framework for three.js
+### A few examples of using pxlNav for Three.js
 
 #### Metown USA, baby!
 
 Kevin Edzenga's web dev & shader resume site
 <br/>&nbsp;&nbsp;Made as a way to show off `pxlNav`
+
+ - Using the web page elements to drive `pxlNav` through trigger events
+ - Listening to 'pxlNav' using callbacks to have the page elements respond to `pxlNav` events
 ### 
 
 <img src="_show/procstack.github.io_2024-12-12.jpg" alt="procstack.github.io pxlNav environment" style="margin-left:auto;margin-right:auto;"/>
 <div style="margin-left:auto;margin-right:auto;"><a href="https://procstack.github.io/" target="_blank">procstack.github.io</a></div>
 
 
 ### The Good Bits -
-*Wanna see the template or example rooms using 3d fbx files?*
-<br/>&nbsp; `./Source/pxlRooms`
-
-<br/>&nbsp;&nbsp;For `pxlNav` Documentation -
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;[pxlNav Documentation](https://github.com/ProcStack/pxlNav/tree/main/docs)
 
-<br/>&nbsp;&nbsp;For `pxlNav` Repo with Source & Info -
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;[pxlNav Repo ](https://github.com/ProcStack/pxlNav)
-
-<br/>&nbsp;&nbsp;Minified pxlNav, style, & assets *(if desired)* -
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;`./Build`
-
-<br/>&nbsp;&nbsp;`pxlNav` dev entry point is -
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;`./Source/js/pxlNav.js`
-
-<br/>&nbsp;&nbsp;`procstack.github.io` public site -
+&nbsp;&nbsp;`procstack.github.io` public site -
 <br/>&nbsp;&nbsp;&nbsp;&nbsp;`./docs`
 
+*Wanna see the template or example rooms using 3d fbx files?*
+<br/>&nbsp; `./docs/js/pxlRooms`
 
-##
-
-#### Note about `pxlNav` -<br/>&nbsp;&nbsp;&nbsp;&nbsp;*November 16th, 2023*
-
-I decided to release the `pxlNav` framework for `three.js` I wrote for use in the virtual event website `Antib0dy.club`,
-<br/>&nbsp;&nbsp;A site used during the height of the pandemic to throw multiplayer avitar filled virtual parties & dj album drops.
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;With live video feeds of our house dj and event dj, switched dynamically durring events.
-
-
-<img src="_show/AntibodyClub_chatImplemented.jpg" alt="Antib0dy.club, using pxlNav with Three.js" style="margin-left:auto;margin-right:auto;"/>
-<div style="margin-left:auto;margin-right:auto;">(Antib0dy.Club, networking has been removed though)</div>
-
-
-For `pxlNav` I wrote a first person navigation system, collision detection, camera animation sequencer,
-<br/>&nbsp;&nbsp;An in-browser opengl vert/frag shader code text editor & compiler/refresher with keyboard shortcut regex commands,
-<br/>&nbsp;&nbsp;FBX 3d scene structure to allow for Maya/Blender directly into pxlNav with complete scene comprehension.
-
-All as a framework using `three.js` with differed render passes to allow for in-environment items
-<br/>&nbsp;&nbsp;Which could alter the screens appearance through post processing,
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;Or added screen effects when using teleportation pads
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Between like-named collider+object pairs in the FBX scene file
+<br/>For a simpler example of pxlNav -
+<br/>[The Void; procstack.github.io/Void.htm](https://procstack.github.io/Void.htm)'s room -
+<br/>&nbsp; `./docs/js/pxlRooms/VoidEnvironment`
 
-But I did remove the `Jitsi` integration of users webcams and mics
-<br/>&nbsp;&nbsp;Implemented as their video visual avitar & audio with distance fall off attenuation.
-<br/>This is too much of a separate intergration to include in this repo, nor the `pxlNav` repo (when its created)
-<br/>It will need to have a docker script, websocket settings,
-<br/>&nbsp;&nbsp;Port forwarding, sip controlling, handshake handling,
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;Room management overhaul, more asset & user managament checks, added security;
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;An entire environment to set up
-<br/>&nbsp;&nbsp;So I'll likely make a pxlVideoAvitar repo in the future,
-<br/>&nbsp;&nbsp;&nbsp;&nbsp;But there are no plans for that at the moment.
+<br/>For more feature rich examples of pxlNav -
+<br/>[procstack.github.io](https://procstack.github.io/)'s room -
+<br/>&nbsp; `./docs/js/pxlRooms/CampfireEnvironment`
+<br/>[The Outlet; procstack.github.io/Outlet.htm](https://procstack.github.io/Outlet.htm)'s room -
+<br/>&nbsp; `./docs/js/pxlRooms/OutletEnvironment`
 
-Realistically, I should add Universal Scene Description (USD) support for future advancements to the system.
 
-But heck with it, for now I'm making a rabbit druid dude poke a fire and look at a stick for my website!
-<br/> - *Kevin Edzenga*
+<br/>&nbsp;&nbsp;For `pxlNav` Documentation -
+<br/>&nbsp;&nbsp;&nbsp;&nbsp;[pxlNav Documentation](https://github.com/ProcStack/pxlNav/tree/main/docs)
 
+<br/>&nbsp;&nbsp;Main `pxlNav` Repo with Source, Info, & Examples -
+<br/>&nbsp;&nbsp;&nbsp;&nbsp;[pxlNav Repo ](https://github.com/ProcStack/pxlNav)
 
-*Temporary holdover for `pxlNav` until I implement the third-person controller & code clean up / commenting,*
-<br/>&nbsp;&nbsp;*I'll created a `pxlNav` repo when complete*

docs/js/pxlPages/ProcPage.js

@@ -749,10 +749,6 @@ export class ProcPage {
       sectionTitleDiv.classList.add('procPagesButtonStyle');
       sectionTitleDiv.classList.add('procPagesSectionNavColor');
 
-      let styleType = "navStyle";
-      if( sectionData.hasOwnProperty( styleType ) && Array.isArray( sectionData[ styleType ] ) ){
-        sectionData[ styleType ].forEach(( style )=>{ style!=''&&sectionTitleDiv.classList.add(style) });
-      }
 
       sectionTitleDiv.innerHTML = sectionData.name;
 
@@ -761,9 +757,21 @@ export class ProcPage {
         let buttonBgObj = document.createElement('div');
         buttonBgObj.classList.add('procPagesSectionNavButtonBackground');
         this.applyPageStyle( 'sectionNavButtonBackground', buttonBgObj );
+
+        let styleType = "navStyle";
+        if( sectionData.hasOwnProperty( styleType ) && Array.isArray( sectionData[ styleType ] ) ){
+          sectionData[ styleType ].forEach(( style )=>{ style!=''&&buttonBgObj.classList.add(style) });
+        }
+
         buttonBgObj.appendChild( sectionTitleDiv );
         sectionList.appendChild( buttonBgObj );
       }else{
+
+        let styleType = "navStyle";
+        if( sectionData.hasOwnProperty( styleType ) && Array.isArray( sectionData[ styleType ] ) ){
+          sectionData[ styleType ].forEach(( style )=>{ style!=''&&sectionTitleDiv.classList.add(style) });
+        }
+
         sectionList.appendChild( sectionTitleDiv );
       }
 

docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

@@ -237,9 +237,16 @@ export class CampfireEnvironment extends RoomEnvironment{
     if( this.mobile ) return;
 
     // -- -- --
-  
+    
     let systemName = "floatingDust";
     let dustSystem = new FloatingDust( this, systemName );
+    
+    // -- -- --
+
+    // Request the settings object from the particle system
+    //   If you log this object, you can see all the settings you can adjust
+    // This is optional, as the default settings is created for you
+    //   If you don't pass one to the `build()` function
     let dustSystemSettings = dustSystem.getSettings();
     dustSystemSettings["vertCount"] = 900; // Point Count
     dustSystemSettings["pScale"] = 8.5;  // Point Base Scale
@@ -261,8 +268,22 @@ export class CampfireEnvironment extends RoomEnvironment{
       ...dustSystem.dupeArray([0.0,0.75],3), ...dustSystem.dupeArray([0.25,0.75],3)
     ];
 
-    // Use a texture from the internal `pxlAsset` folder; ( RGB, Alpha )
-    //dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
+    // -- -- --
+
+    // Texturing the particles -
+
+    // For a RGB + Alpha texture, use the second parameter for the Alpha map -
+    //  dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
+    // For a RGBA texture, leave the second parameter empty -
+    //  dustSystem.setAtlasPath( "sprite_dustLiquid.png" );
+
+    // When no pathing, just a name, is passed to `setAtlasPath()`
+    //   It will read the texture from the internal `./pxlAsset` folder
+    //     Set on your `pxlOptions` object when building `new pxlNav( pxlOptions, ... )`
+    // If you pass a path, it will look in the path you provide, like the room's asset folder -
+    //  dustSystem.setAtlasPath( this.assetPath + "/customSpriteAtlas.png" );
+
+    // -- -- --
 
     // Generate geometry and load texture resources
     dustSystem.build( dustSystemSettings );

docs/js/pxlRooms/OutletEnvironment/OutletEnvironment.js

@@ -90,7 +90,14 @@ buildDust(){
   let systemName = "floatingDust";
   let dustSystem = new FloatingDust( this, systemName );
 
+  // -- -- --
+
+  // Request the settings object from the particle system
+  //   If you log this object, you can see all the settings you can adjust
+  // This is optional, as the default settings is created for you
+  //   If you don't pass one to the `build()` function
   let dustSystemSettings = dustSystem.getSettings();
+  
   dustSystemSettings["vertCount"] = vertexCount;
   dustSystemSettings["pScale"] = pScale;
   dustSystemSettings["pOpacity"] = particleOpacity;
@@ -109,8 +116,22 @@ buildDust(){
     ...dustSystem.dupeArray([0.0,0.75],3), ...dustSystem.dupeArray([0.25,0.75],3)
   ];
 
-  // Use a texture from the internal `pxlAsset` folder; ( RGB, Alpha )
-  //dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
+  // -- -- --
+
+  // Texturing the particles -
+
+  // For a RGB + Alpha texture, use the second parameter for the Alpha map -
+  //  dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
+  // For a RGBA texture, leave the second parameter empty -
+  //  dustSystem.setAtlasPath( "sprite_dustLiquid.png" );
+
+  // When no pathing, just a name, is passed to `setAtlasPath()`
+  //   It will read the texture from the internal `./pxlAsset` folder
+  //     Set on your `pxlOptions` object when building `new pxlNav( pxlOptions, ... )`
+  // If you pass a path, it will look in the path you provide, like the room's asset folder -
+  //  dustSystem.setAtlasPath( this.assetPath + "/customSpriteAtlas.png" );
+  
+  // -- -- --
 
   // Generate geometry and load texture resources
   dustSystem.build( dustSystemSettings );

docs/js/pxlRooms/VoidEnvironment/VoidEnvironment.js

@@ -60,25 +60,47 @@ export class VoidEnvironment extends RoomEnvironment{
   buildDust(){
     let vertexCount = 800; // Point Count
     let particleScale = 9.5;  // Point Base Scale
+    let particleOpacity = .5;  // Point Transparency
     let proxDistance = 315; // Distance particles are visible
     let windDir = new Vector3( 0, -10, 0 ); // Wind Direction
 
+    // -- -- --
 
     let systemName = "floatingDust";
     let dustSystem = new FloatingDust( this, systemName, true );
 
+    // -- -- --
+
+    // Request the settings object from the particle system
+    //   If you log this object, you can see all the settings you can adjust
+    // This is optional, as the default settings is created for you
+    //   If you don't pass one to the `build()` function
     let dustData = dustSystem.getSettings();
+
     dustData["vertCount"] = vertexCount;
     dustData["pScale"] = particleScale;
     dustData["proxDist"] = proxDistance;
     dustData["windDir"] = windDir;
     dustData["additiveBlend"] = true;
-    dustData["pOpacity"] = .5;
+    dustData["pOpacity"] = particleOpacity;
+
+    // -- -- --
+
+    // Texturing the particles -
+
+    // For a RGB + Alpha texture, use the second parameter for the Alpha map -
+    //  dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
+    // For a RGBA texture, leave the second parameter empty -
+    //  dustSystem.setAtlasPath( "sprite_dustLiquid.png" );
 
-    // Use a texture from the internal `pxlAsset` folder
-    //dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
-    //dustSystem.setAtlasPath( "sprite_dustLiquid.png" );
+    // When no pathing, just a name, is passed to `setAtlasPath()`
+    //   It will read the texture from the internal `./pxlAsset` folder
+    //     Set on your `pxlOptions` object when building `new pxlNav( pxlOptions, ... )`
+    // If you pass a path, it will look in the path you provide, like the room's asset folder -
+    //  dustSystem.setAtlasPath( this.assetPath + "/customSpriteAtlas.png" );
 
+    // -- -- --
+
     // Generate geometry and load texture resources
     dustSystem.build( dustData );