Grammar, Wordy-ness, & Button Style

The block buttons when in wide screen mode of the main site was bothering me.  It still bothers me, but they look better as rounded buttons at all times.

Author: ProcStack

docs/js/ProckStackGitio.js

@@ -104,7 +104,7 @@ const enableStaticCamera = true;
 
 // If using static cameras, allow the user to rotate the camera
 //  Default is `false`
-const allowStaticRotation = false;
+const allowStaticRotation = true;
 
 // Visual effect for the sky
 //  Options are - OFF, VAPOR

docs/js/pxlNav.esm.js

@@ -217,14 +217,14 @@ export class CampfireEnvironment extends RoomEnvironment{
     let bSmoke = new BillowSmoke( this, systemName );
     //
     bSmoke.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
-    bSmoke.setPosition( particleSourcePos );
 
     let bSmokeSettings = bSmoke.getSettings();
     bSmokeSettings["vertCount"] = 600;
     bSmokeSettings["pScale"] = 56;
     bSmokeSettings["pOpacity"] = .4;
     //bSmokeSettings["fadeOutScalar"] = opacityRolloff;
     bSmokeSettings["additiveBlend"] = false;
+    bSmokeSettings["offsetPos"] = particleSourcePos; // Offset center of the system
 
     bSmokeSettings["windDir"].x = -14.6;
     bSmokeSettings["windDir"].z = 13.6;
@@ -267,8 +267,10 @@ export class CampfireEnvironment extends RoomEnvironment{
     let emberSettings = eWisps.getSettings();
     emberSettings["vertCount"] = 30;
     emberSettings["pScale"] = 10;
+    emberSettings["offsetPos"] = particleSourcePos; // Offset center of the system
     //emberSettings["fadeOutScalar"] = opacityRolloff;
     emberSettings["additiveBlend"] = true;
+
 
     emberSettings["windDir"].x = -0.14;
     emberSettings["windDir"].z = 0.15;

docs/js/pxlRooms/CampfireEnvironment/Assets/CampfireEnvironment.fbx

@@ -138,7 +138,7 @@ export const pageListingData = {
       <br>
       <br>It should be self-taught discrimination of attention between neurons;
       <br>&nbsp;&nbsp; Like in the human brain.
-      <br><div class="textSkew">&nbsp;&nbsp;&nbsp;&nbsp; (When the purple circles go red in the GAT video above)</div>
+      <br><div class="textSkew">&nbsp;&nbsp;&nbsp;&nbsp; (When the purple circles go red in the GAT video, first vid)</div>
       
       <br>
       <br><div class='procPagesAboutMeBar'></div>
@@ -156,9 +156,10 @@ export const pageListingData = {
       <br>
         <div class='procPagesAboutMeSpacer'></div>
         Currently I'm not using my ESN's predicted movement for anything in python,
-        <br>The next step would be introducing a base image to motion-transfer / reference.
+        <br>&nbsp;&nbsp; The next step would be introducing a base image to motion-transfer / reference.
+        <br>However did build a simple version in Unity to learn player combos + movement over time.
         <div class='procPagesAboutMeSpacer'></div>
-        So I'm just learnin' while watching my ai learnin'!
+        So I'm mostly just learnin' while watching my ai learnin'!
         <div class='procPagesAboutMeSpacer'></div>
         
         <br>In the videos, I had the "reservoir" set to 15 times steps, you'll notice about every 15 frames the brain shifts.
@@ -173,17 +174,6 @@ export const pageListingData = {
       
       <br><br><div class='procPagesAboutMeBar'></div>
       
-      <br>Since I didn't have a good use case for the ESN in Python,
-      <br>&nbsp;&nbsp; I built a similar ESN through C# in Unity to operate NPC's ability to learning player habits.
-      <br>The logic is pretty simple, so running by CPU is fine for now,
-      <br>&nbsp;&nbsp; I'll likely look to move it to GPU in the future, if need be.
-      <br>I set it up to learn less often when the player is in another area of the map.
-      <br>&nbsp;&nbsp; Thinking that I'd want to set up a "data transfer" between characters,
-      <br>&nbsp;&nbsp;&nbsp;&nbsp; Gossip about the player.
-      <br>&nbsp;&nbsp; But its just cubes and spheres in Unity at the moment.
-
-      <br><br><div class='procPagesAboutMeBar'></div>
-      
       <br>
       <br>If you couldn't tell, I'm training my AIs on my own works.
       <br>A personally made AI trained on personally made images / videos / photos / code / writing.

docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

@@ -16,17 +16,17 @@ export const pageListingData = {
       
       <div class='procPagesAboutMeSpacer'></div>
       
-      &nbsp;&nbsp;<span class="textNudge">Character Simulation</span> for hair & clothing sims on -
+      &nbsp;&nbsp;<span class="textInblockBox">Character Simulation Technical Director (TD)</span> for hair / clothing sims & tools in <span class="textName">Maya</span> on -
       <br>&nbsp;&nbsp;&nbsp;&nbsp; <span class="textName">Epic</span>, <span class="textName">Rio 1</span> & <span class="textName">Rio 2</span>
       
       <div class='procPagesSpacer'></div>
 
-      &nbsp;&nbsp;<span class="textNudge">Effects</span> doing volume sims, particles, & some RBDs on -
+      &nbsp;&nbsp;<span class="textInblockBox">Effects TD</span> doing volume sims (snow & dust plumes), particles, some RBDs, & tools in <span class="textName">Houdini</span> & <span class="textName">Maya</span> on -
       <br>&nbsp;&nbsp;&nbsp;&nbsp; <span class="textName">Ice Age 4</span>
       
       <div class='procPagesSpacer'></div>
 
-      &nbsp;&nbsp;<span class="textNudge">Crowds</span> development/navigation/sims in Houdini for 5 years on -
+      &nbsp;&nbsp;<span class="textInblockBox">Crowds TD</span> navigation, sims, & tools in <span class="textName">Houdini</span> on -
       <br>&nbsp;&nbsp;&nbsp;&nbsp; <span class="textName">Ferdinand</span>, <span class="textName">Rio 2</span>, <span class="textName">Peanuts</span>, <span class="textName">Ice Age 5</span>, & <span class="textName">Spies In Disguise</span>
       
       
@@ -38,20 +38,21 @@ export const pageListingData = {
 
       <br><div class='ppamHBar'></div>
       
-      <br>For <span class="textName">Crowds</span>,
-      <br>&nbsp;&nbsp; I built tools for placement, pathing, obstacle detection, and all the usual crowd navigation logic itself in Houdini.
+      <br>While working in <span class="textName">Crowds</span>,
+      <br>&nbsp;&nbsp; I built all the navigation tools, placement, pathing, obstacle detection, and all the usual crowd/boid navigation logic itself in Houdini for Birds & Land critters.
+      
+      <br>
+      <br>I wrote systems to understand the terrain and how to follow the flow of the ground,
+      <br>&nbsp;&nbsp; Multi-limb IK for the people & animals to walk over uneven terrain, and a 'lookAt' system for the characters to look around with multiple neck joints smoothly.
+      <br>&nbsp;&nbsp; While calculating the linear algebra to limit joint rotation in the neck to determine if the agent could look at their target or not.
 
       <br>
       <br>One of the personality traits I gave the crowd agents was 'rudeness';
       <br>&nbsp;&nbsp; This allowed some agents to push past each other, while others would slow/stop and wait for them to pass.
       <br>&nbsp;&nbsp; This gave the crowd a more natural feel, as if a few had "somewhere to be".
 
       <br>
-      <br>I also added a multi-joint 'lookAt' which would blend their neck joints to look at a target smoothly.
-      <br>&nbsp;&nbsp; I added in joint rotation limits and calculated the linear algebra (target-to-joint space) to determine if the agent could look at their target or not.
-
-      <br>
-      <br>I could talk about the horse-and-jockey system I helped build, or the post-simulation joint editing tools, or the multi-limb IK with heel offsets & foot locking,
+      <br>I could talk about the horse-and-jockey system I helped build, or the post-simulation joint editing tools, or the IK heel offsets & foot locking,
       <br>&nbsp;&nbsp; But I think I'll save that for another time.
 
       <br>

docs/pages/aboutMe/aidev.js

@@ -32,12 +32,6 @@ export const pageListingData = {
       <span><a href="mailto:[email protected]" alt="Email me!">email</a></span>
     </div>
     
-    <div class='procPagesAboutMe-subHeaderStyle'>
-      <span>Note : 'JavaScript', I'm better with modules, middleware, & backends.
-      <br>&nbsp;&nbsp; Like, I wrote this site's single-page system in 'vanilla' JS for the fun of it.</span>
-    </div>
-
-
     <br><div class='ppamHBar'></div>
 
     <br>
@@ -46,7 +40,7 @@ export const pageListingData = {
       <br>&nbsp;&nbsp; or '<span class="textNudge">Technical Director</span>' (<span class="textItalic">on films</span>)
       <br>&nbsp;&nbsp;&nbsp;&nbsp; or '<span class="textNudge">Creative Technologist</span>' (<span class="textItalic">for immersive</span>)
       <br>It's all the same types of mental challenges though,
-      <br>&nbsp;&nbsp; Just different mediums.
+      <br>&nbsp;&nbsp; Just in different mediums of digital graphics.
     </div>
     
 

docs/pages/aboutMe/filmWork.js

@@ -35,7 +35,7 @@ export const pageListingData = {
 
     <br>
     <br> This is the 'dwitter' for the top video,
-    <br>&nbsp;&nbsp; Falling Circles [139/140 chars.]
+    <br>&nbsp;&nbsp; <span class="textName">Falling Circles</span> <span class="textItalic">[139/140 chars.]</span>
     
     <div class="procPagesSpacer"></div>
     

docs/pages/aboutMe/whatAmI.js

@@ -27,7 +27,7 @@ export const pageListingData = {
   ],
   'content' : `
     <a href='https://github.com/ProcStack/procPromo_ShaderPack' class='procPagesRepoLinkStyle' target='_blank'>procPromo Shader Pack</a> <span class="textDrinkMeAlice textItalic">2022-2025</span>
-    <br><span class="textBump">A shader pack for Minecraft, used through Optifine.</span>
+    <br><span class="textBump">A Minecraft shader pack for Optifine.</span>
     <br><span class="textShrink textItalic textName ">Language - <span class="textBold">GLSL 1.2, 3.2, & 4.5+</span></span>
     <br><span class="textShrink textItalic textName ">File Count - <span class="textBold">177</span></span>
     <div class="pppHBar"></div>

docs/pages/projects/dwitter.js

@@ -25,7 +25,8 @@ export const pageListingData = {
     <div class="pppHBar"></div>
     
     Created to capture the personality of one of my characters, Diece; the very one who lives in the cabin of Metal-Asylum.net.
-    <br>Letting them write the very words written in the tome perched upon the desk.
+    <br>&nbsp;&nbsp; Letting them write the very words written in the tome perched upon the desk.
+    <br>
     <br>A segmenter, labeler, and scripting language was written to allow saving individual characters, variants, and written pages, with text effects like opacity, scale, and kearning.
     
     <br>

docs/pages/projects/procPromo.js

@@ -66,7 +66,7 @@ export const pageListingData = {
       <div class='procPagesSpacer'></div>
       Bump <span class="textBoldBox">G</span> to open <span class="textName">Graphics</span> settings
       <br>Nudge <span class="textBoldBox">H</span> for the <span class="textName">Help</span> menu
-      <br>Bop the <span class="textBoldBox">I</span> to squeek an <span class="textName">Info</span> screen
+      <br>Bop <span class="textBoldBox">I</span> to squeek an <span class="textName">Info</span> screen
       <br>
       <br>
     </div>

docs/pages/projects/pxlTextGenerator.js

@@ -18,7 +18,7 @@
   color: rgba(237, 237, 237, 0.9);
   text-shadow: 1.5px 1.5px 4px rgba(37, 37, 37, 0.632);
   background-color: rgba(86, 86, 86, 0.37);
-  border-color: rgba(213, 213, 213, 0.5);
+  border-color: rgba(192, 192, 192, 0.85) rgba(144, 144, 144, 0.29);
   border-style: solid;
 }
 .gitAboutMePage-sectionNavButtonStyle:hover{
@@ -65,7 +65,7 @@
 
 .gitAboutMePageParentStyle{
   width: min(100vw, 1100px);
-  height: calc(92vh - 36px);
+  height: calc(90vh - 40px);
   display: grid;
   grid-auto-flow: row;
   border-radius: 2px;
@@ -74,38 +74,34 @@
   pointer-events: auto;
   overflow: hidden;
   text-wrap: auto;
-  background-image: radial-gradient(200% 35% ellipse at top, rgba(100, 100, 100, 0.35), rgba(100, 100, 100, 0.0)),
-                    radial-gradient(200% 35% ellipse at bottom, rgba(100, 100, 100, 0.35), rgba(100, 100, 100, 0.0));
+  background-image: radial-gradient(200% 35% ellipse at top, rgba(100, 100, 100, 0.3), rgba(100, 100, 100, 0.10)),
+                    radial-gradient(200% 35% ellipse at bottom, rgba(100, 100, 100, 0.35), rgba(100, 100, 100, 0.15));
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
 
 .gitAboutMePageStyle .procPagesInnerBefore {
   content : '';
-  border-radius: 5px 5px 0px 0px;
+  border-radius: var(--inner-before-after-radiusBefore);
   background: transparent;
-  border-width: 0px 1px 1px 1px;
+  border-width: 0px 2px 2px 2px;
   border-color: #5d5d5d;
   border-style: solid;
   height: var(--inner-before-after-height);
-  width: 99%;
+  width: 99.8%;
   margin-bottom: var(--inner-before-after-margin);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .gitAboutMePageStyle .procPagesInnerAfter {
   content : '';
-  border-radius: 0px 0px 5px 5px;
+  border-radius: var(--inner-before-after-radiusAfter);
   background: transparent;
-  border-width: 1px 1px 0px 1px;
+  border-width: 2px 2px 0px 2px;
   border-color: #5d5d5d;
   border-style: solid;
   height: var(--inner-before-after-height);
-  width: 99%;
+  width: 99.8%;
   margin-top: var(--inner-before-after-margin);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 /* -- -- -- */

docs/pages/pxlNav/explore.js

@@ -15,7 +15,7 @@
   color: rgba(80, 210, 90, 0.8);
   text-shadow: 1.5px 1.5px 4px #252525;
   background-color: rgba(15, 79, 20, 0.37);
-  border-color: rgba(25, 220, 30, 0.5);
+  border-color: rgba(25, 220, 30, 0.85) rgba(20, 168, 25, 0.29);
 }
 .gitBlogPage-sectionNavButtonStyle:hover{
   color: rgba(80, 210, 90, 0.9);
@@ -104,30 +104,26 @@
 
 .gitBlogPageStyle .procPagesInnerBefore {
   content : '';
-  border-radius: 5px 5px 0px 0px;
+  border-radius: var(--inner-before-after-radiusBefore);
   background: transparent;
-  border-width: 0px 1px 1px 1px;
+  border-width: 0px 2px 2px 2px;
   border-color: #2b0967;
   border-style: solid;
   height: var(--inner-before-after-height);
-  width: 99%;
+  width: 99.8%;
   margin-bottom: var(--inner-before-after-margin);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .gitBlogPageStyle .procPagesInnerAfter {
   content : '';
-  border-radius: 0px 0px 5px 5px;
+  border-radius: var(--inner-before-after-radiusAfter);
   background: transparent;
-  border-width: 1px 1px 0px 1px;
+  border-width: 2px 2px 0px 2px;
   border-color: #2b0967;
   border-style: solid;
   height: var(--inner-before-after-height);
-  width: 99%;
+  width: 99.8%;
   margin-top: var(--inner-before-after-margin);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 /* -- -- -- */

docs/style/procPages/procPages_aboutMeStyle.css

@@ -36,24 +36,22 @@
   border-radius: 5px;
   overflow: hidden;
   background: linear-gradient(155deg, rgba(67, 55, 4, 0.407), rgba(52, 35, 3, 0), rgba(52, 35, 3, 0), rgba(52, 35, 3, 0));
-  background-image: radial-gradient(150% 50% ellipse at top left, rgba(52, 35, 3, 0.52), rgba(52, 35, 3, 0.0));
+  background-image: radial-gradient(150% 50% ellipse at top left, rgba(52, 35, 3, 0.652), rgba(52, 35, 3, 0.12), rgba(52, 35, 3, 0.0));
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
 
 .gitInitPageStyle .procPagesInnerBefore {
   content : '';
   padding-left: 8px;
-  border-radius: 5px 5px 0px 0px;
+  border-radius: var(--inner-before-after-radiusBefore);
   background: transparent;
-  border-width: 0px 1px 1px 1px;
+  border-width: 0px 2px 2px 2px;
   border-color: #483107;
   border-style: solid;
   height: var(--inner-before-after-height);
-  width: 99%;
+  width: 99.8%;
   margin-bottom: var(--inner-before-after-margin);
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .gitInitPageStyle .procPagesInnerAfter {

docs/style/procPages/procPages_blogStyle.css

@@ -1,7 +1,9 @@
 :root {
   --aspect-ratio: calc(100vw / 100vh);
-  --inner-before-after-height: 5px;
+  --inner-before-after-height: 12px;
   --inner-before-after-margin: 5px;
+  --inner-before-after-radiusBefore: 15px 15px 0px 0px;
+  --inner-before-after-radiusAfter: 0px 0px 15px 15px;
   --inner-padding: 5px 0px;
   --inner-height-half-reduce: 20px; /* before-after-height + before-after-margin + pad */
   --inner-height-reduce: 40px; /* before-after-height + before-after-margin + pad x 2 */
@@ -65,6 +67,7 @@ BODY {
   top: 0px;
   width: 100%;
   height: 100%;
+  pointer-events: none;
   z-index: 200;
 }
 
@@ -84,6 +87,7 @@ BODY {
   left: 0px;
   width: 100vw;
   z-index: 310;
+  pointer-events: auto;
 }
 
 /*  -- -- -- -- -- -- -- -- -- -- -- -- */
@@ -246,16 +250,7 @@ text-shadow: 1px 1.5px 4px #252525;
 
 @media screen and (min-width: 1000px) {
   .procPagesNavSectionStyle{
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: center;
-    padding: 5px 7px 5px 7px;
-    max-width: 950px;
-    font-size: 1.1em;
-    font-weight: 600;
-    border-radius: 0px;
-    overflow: hidden;
-    border-width: 1px 0px 1px 0px;
+    margin: 0px 1px;
   }
 }