WhatAmI, CoW, Dwitter Updates

What Am I Skills updated to display Websocket and Nginx, and resize a LITTLE better, but not much better.
Dwitter Comment CSS
CoW Normal Map Python Tool Info

Author: ProcStack

docs/AboutMe/What_am_I.htm

@@ -153,7 +153,7 @@
       <span class="ppamSkillListing">GLSL</span>
       <span class="ppamSkillListing">JavaScript</span>
 
-      <span class="ppamSkillListing" style="display: inherit;" id="ppamOverflowListing">Nginx</span>
+      <span class="ppamSkillListing" style="display: inherit;" id="ppamOverflowListing">WebSocket</span>
 
     </div>
 

docs/AboutMe/What_am_I.htm.md

@@ -12,7 +12,7 @@ Technical Artist; particles, shaders, asset optimization, & pipeline
       GLSL
       JavaScript
 
-      Nginx
+      WebSocket
 
       New York Metropolitan Area
       [email](mailto:trancor@metal-asylum.net)

docs/ProjectsLinks/Dwitter.htm

@@ -56,15 +56,15 @@ Hmmm, see how messy that looks?
 
          x.arc( // Define a circle path to draw
       
-     j*4 + S(t*3+r) * r, // Horizontal movement 
+     j*4 + S( t*3+r ) * r, // Horizontal movement 
       
-     T(t)*r + r*5, // Vertical 'random' animation + perspective
+     T( t )*r + r*5, // Vertical 'random' animation + perspective
       
      S( t+=j&6 ) * r/5 + r,  // Make 'time' unique per + radius 
       
-     0,7), // Circle arc, draw a full circle
+     0, 7), // Circle arc, draw a full circle
 
-         x.fill(), // Draw the circle
+         x.fill(), // --- Draw the circle ---
 
          r>2 && (  // Stop making circles when r gets low enough
       
@@ -80,7 +80,7 @@ Hmmm, see how messy that looks?
 
       d( // Start Recursion 
       
-   w=(c.width=999)/2, // Sets resolution & X placement
+   w=( c.width=999 )/2, // Sets resolution & X placement
 
    600 // Circle generation count + seed 
 

docs/ProjectsLinks/Dwitter.htm.md

@@ -139,7 +139,7 @@
               <div id="pxlPagesContentParent" class="pxlPagesContentParentStyle"><div class="gpcpVisibleStyle procPagesContentStyle procPagesPlacementTripleStyle gitProjectsPageStyle pagesFader pagesVisOn"><div class="procPagesInnerBeforeBase procPagesInnerBefore"></div><div class="procPagesInnerStyle procPagesParentStyle gitProjectsPageParentStyle procPagesLayoutTripleStyle" id="pxlPage_ProjectsLinks"><div class="procPageHeader procPagesHeaderStyle">My Repos / Projects / Socials</div><div class="procPagesHeaderLine gitProjectsPage-headerLine"></div><nav role="navigation" aria-label="Page sections" class="procPageSectionList gitProjectsPage-sectionNavListStyle"><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to procstack.github.io&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: this.&lt;/span&gt; section">procstack.github.io<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: this.</span></div></div><div class="hideOnMobile" style="height: 0px; user-select: none;"></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle procPagesNavActive gitProjectsPage-sectionNavButtonActiveStyle" role="button" tabindex="0" aria-label="Navigate to Currents of War&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: Unity Game&lt;/span&gt; section">Currents of War<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: Unity Game</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle textNudge"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to Pxlmancer&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: Drawing App&lt;/span&gt; section">Pxlmancer<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: Drawing App</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to procPromo&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: Shader Pack&lt;/span&gt; section">procPromo<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: Shader Pack</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to pxlTextGenerator&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: PyQt&lt;/span&gt; section">pxlTextGenerator<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: PyQt</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to Neurous&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;.Net :: Particles App&lt;/span&gt; section">Neurous<span class="hideOnMobile textDrinkMeAlice textBottom">.Net :: Particles App</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to pxlCam&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: Filter App&lt;/span&gt; section">pxlCam<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: Filter App</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle hideOnMobile"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to pxlVisualizer&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: GLSL&lt;/span&gt; section">pxlVisualizer<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: GLSL</span></div></div><div class="hideOnMobile" style="height: 3px; user-select: none;"></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to Shadertoy&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: GLSL&lt;/span&gt; section">Shadertoy<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: GLSL</span></div></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to Dwitter&lt;span class=&quot;hideOnMobile textDrinkMeAlice textBottom&quot;&gt;&amp;nbsp;:: JS Golfing&lt;/span&gt; section">Dwitter<span class="hideOnMobile textDrinkMeAlice textBottom">&nbsp;:: JS Golfing</span></div></div><div class="hideOnMobile" style="height: 3px; user-select: none;"></div><div class="procPagesSectionNavButtonBackground gitProjectsPage-sectionNavButtonBackgroundStyle hideOnMobile"><div class="procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor gitProjectsPage-sectionNavButtonStyle" role="button" tabindex="0" aria-label="Navigate to Misc. section">Misc.</div></div></nav><section class="procPageMediaView gitProjectsPageScrollbarStyle" role="region" aria-label="Media gallery for ProjectsLinks page sections" aria-describedby="Dynamic media content that changes based on selected section"><div class="procPagesMediaListStyle procPagesSectionActive pagesVisOn"><div class="procPagesImageContainer procPagesImageStyle"><div class="procPagesImageFullScreenButtonParent"><button class="procPagesImageFullScreenButton">⛶</button></div><img src="../pages/projects/images/CoW_ShopScene.webp" alt="Currents of War screenshot" loading="lazy" class="procPagesMediaImage"></div><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">Currents of War!!<br>You are the shopkeeper!<br>Its Action Packed Money Making Action!!!</div></div><div class="procPagesImageContainer procPagesImageStyle"><div class="procPagesImageFullScreenButtonParent"><button class="procPagesImageFullScreenButton">⛶</button></div><img src="../pages/projects/images/TechDev_characterColorAnim_dataNormal_sm.webp" alt="Character Color Animation Data Texture" loading="lazy" class="procPagesMediaImage"></div><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">Character Color Data, Light Normals, &amp; Animation Atlases<br>Each row is a different armor/class type.<br>Each column is a frame of Idle, Walk, or Talk animations.</div></div><video src="../pages/projects/images/CharacterRenderer_liveUpdate_2025-05-16_mod.webm" loop="" controls="" preload="metadata" class="procPagesImageStyle"></video><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">Changing character's look &amp; colors in Unity's Editor real-time!</div></div><video src="../pages/projects/images/CoW_AnimatedCursor_2025-06-02_mod.webm" loop="" controls="" preload="metadata" class="procPagesImageStyle"></video><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">Why not an animated cursor?</div></div><video src="../pages/projects/images/ShopWindowLight_2025-05-11_mod.webm" loop="" controls="" preload="metadata" class="procPagesImageStyle"></video><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">Gotta show the time of day somehow!</div></div><video src="../pages/projects/images/WindowLightHoudini_2025-05-11_mod.webm" loop="" controls="" preload="metadata" class="procPagesImageStyle"></video><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">The sunlight rig to make a data texture in Houdini<br>Using a mesh, I can shape the light on 'walls' in the scene easier.</div></div><div class="procPagesImageContainer procPagesImageStyle"><div class="procPagesImageFullScreenButtonParent"><button class="procPagesImageFullScreenButton">⛶</button></div><img src="../pages/projects/images/FEEESSHHH.webp" alt="FEEEEESSSSHHH" loading="lazy" class="procPagesMediaImage"></div><div class="procPagesMediaCaptionParentStyle gitProjectsPage-sectionCaptionStyle"><div class="procPagesMediaCaptionStyle">Fish Armor is not for sale!<br>FEEEEESSSSHHH!</div></div></div></section><section class="procPageContentView gitProjectsPageScrollbarStyle" role="main" aria-label="Primary content area for ProjectsLinks page" aria-describedby="Main content that updates dynamically based on selected section navigation"><div class="procPageSectionContentStyle procPagesSectionActive pagesVisOn" id="2"><div class="procPagesInnerContentStyle procPagesSectionActive pagesVisOn">
     <a href="https://store.steampowered.com/app/4072230/Currents_of_War/" class="procPagesRepoLinkStyle" target="_blank">Currents of War</a> <span class="textDrinkMeAlice textItalic">2025</span>
     <br><span class="textShrink textItalic textName ">Engine - <span class="textBold">Unity</span></span>
-    <br><span class="textShrink textItalic textName ">Languages - <span class="textBold">C#, some Python for tools</span></span>
+    <br><span class="textShrink textItalic textName ">Languages - <span class="textBold">C#, HLSL, &amp; Python for tools</span></span>
     <br><span class="textNudge">A 'NPC Simulator' game made in <span class="textName">Unity</span> for the April 2025 itch.io gamejam 'Indie Game Clinic COLLAB JAM '25'</span>
     <br>&nbsp;&nbsp; Since then, we've expanded it quite a bit!
     <br> 
@@ -182,13 +182,19 @@
     <br> I wanted to create a semi 'tacky' weapons shop for the style.
     <br>&nbsp;&nbsp; To give some room for gags &amp; chicanery!
 
+    <br><br> <span class="textShrink textItalic">No AI used in the creation of the art assets</span>
+    <br>&nbsp;&nbsp; <span class="textDrinkMeAlice textItalic">The Fish Armor is not for sale!</span>
+
     <br><div class="textSpacer"></div> 
     <br><div class="pppHBar"></div>
 
-    <br> I drew up most of the shop assets &amp; many items done in a single night,
+    <br> I drew up most of the shop assets &amp; many items in a single night,
     <br>&nbsp;&nbsp; Just had some <a href="https://ex-lyd.bandcamp.com/album/till-sunrise" target="_blank">chiptune fusion</a> blasting and my huion screen-table going in photoshop.
     <br>&nbsp;&nbsp;&nbsp;&nbsp; Yes... I realize my age, but old habbits!
-    <br>&nbsp;&nbsp; Felt good getting into pixel art, I've never done much of it before.
+    <br>&nbsp;&nbsp; The animations blocked in another night
+    <br>&nbsp;&nbsp;&nbsp;&nbsp; Everything in total, 3-4 days of art and asset prep for the game jam.
+    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Besides tonal tweaks &amp;&amp; end screens
+    <br>&nbsp;&nbsp; Felt good getting into pixel art, I really haven't done much of it before.
     <br>&nbsp;&nbsp;&nbsp;&nbsp; Was like my highschool photoshop exploration years all over again,
     <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; But a new musician this time.
 
@@ -198,12 +204,24 @@
 
     <br><br><br> Then I isolated all the limbs &amp; body parts of the characters on different layers in photoshop,
     <br>&nbsp;&nbsp; And used the <span class="textNudge">Puppet Tool</span> in <span class="textName">After Effects</span> to animate the idle breathe, walking, &amp; talking cycles.
+    <br>&nbsp;&nbsp;&nbsp;&nbsp; Puppeting each body part as Pre-Comps,
+    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Toggling Layer visibility of each armor type
+    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Animating 4 characters at once!
+    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="textItalic textDrinkMeAlice"><a href="https://www.youtube.com/watch?v=cd4-UnU8lWY" target="_blank">It's free Real Estate</a></span>
     <br>&nbsp;&nbsp;&nbsp;&nbsp; Exporting in Draft mode to keep the pixel aliasing on the art.
-    <br>&nbsp;&nbsp; <span class="textNudge">After Effects</span> let me quickly animate &amp; adjust without drawing out each frame.
+    <br>&nbsp;&nbsp; <span class="textNudge">After Effects</span> let me quickly animate &amp; adjust without re-drawing each frame.
 
     <div class="textSpacer"></div> 
     <div class="pppHBar"></div>
 
+    Made a tool in python to process a kernel around pixels in an image;
+    <br>&nbsp;&nbsp; Helping me make normal maps for the face, hair, &amp; armor for the character's shader.
+    <br>&nbsp;&nbsp;&nbsp;&nbsp; So now I got a little B/W to Normal Map converter tool!
+    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="textName">Numpy</span> feels like a super power sometimes...
+
+    <br> <div class="textSpacer"></div> 
+    <div class="pppHBar"></div>
+
     <br> One of the challenges was making sure the character's displayed with custom colors for their hair, face, armor, gloves/boots, and leggings.
     <br>&nbsp;&nbsp; I wrote a shader to handle the colorization of the character's face, hair, and armor.
     <br>&nbsp;&nbsp; Along with the sprite animation system to handle the character's idle, walk, and talk animations.
@@ -214,7 +232,7 @@
     <div class="textSpacer"></div> 
     <br><div class="pppHBar"></div>
 
-    <br> Among other fun things like adding an animated cursor, outlines around items on hover, ui borders that auto size to the text and stay pixel perfect, among other things
+    <br> Among other fun things like adding an animated cursor, outlines around items on hover, ui borders that auto size to the text and stay pixel perfect, etc.
 
     <div class="textSpacer"></div> 
     <div class="pppHBar"></div>
@@ -223,7 +241,7 @@
     <br>&nbsp;&nbsp; Try to make as much money as you can off these heroes coming to your shop!
     <br>
     <br>Play the <a href="https://procstack.itch.io/currentsofwar" class="procPagesRepoLinkStyle" target="_blank">Game Jam Release</a> in your browser!
-    <br> Or support us with a purchase, <a href="https://ellipsis9.itch.io/currents-of-war" class="procPagesRepoLinkStyle" target="_blank">Currents of War!</a>
+    <br> Or support us with a purchase on <a href="https://store.steampowered.com/app/4072230/Currents_of_War/" class="procPagesRepoLinkStyle" target="_blank">Steam</a> -or- <a href="https://ellipsis9.itch.io/currents-of-war" class="procPagesRepoLinkStyle" target="_blank">Itch.io</a>
     <br>
     <br>
   </div></div></section><div class="procPageContentAfterStyle">