better code for purple ring, working on gray planes rotation

src/components/GrayPlanes/GrayPlanes.tsx

@@ -3,12 +3,17 @@ import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import { a, useSpring } from "@react-spring/three";
 import { useRecoilValue } from "recoil";
-import { grayPlanesPosYAtom, grayPlanesVisibleAtom } from "./GrayPlanesAtom";
+import {
+  grayPlanesPosYAtom,
+  grayPlanesRotYAtom,
+  grayPlanesVisibleAtom,
+} from "./GrayPlanesAtom";
 
 const GrayPlanes = memo(() => {
   const grayPlaneGroupRef = useRef<THREE.Object3D>();
 
   const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
+  const grayPlaneRotY = useRecoilValue(grayPlanesRotYAtom);
   const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
 
   const grayPlanePoses = [
@@ -34,6 +39,7 @@ const GrayPlanes = memo(() => {
 
   const grayPlaneState = useSpring({
     grayPlanePosY: grayPlanePosY,
+    grayPlaneRotY: grayPlaneRotY,
     config: { duration: 1200 },
   });
 
@@ -42,6 +48,7 @@ const GrayPlanes = memo(() => {
       position={[0.1, 0, -2]}
       position-y={grayPlaneState.grayPlanePosY}
       rotation={[0, 0, 0]}
+      rotation-y={grayPlaneState.grayPlaneRotY}
       ref={grayPlaneGroupRef}
       visible={grayPlanesVisible}
     >

src/components/GrayPlanes/GrayPlanesAtom.tsx

@@ -5,6 +5,11 @@ export const grayPlanesPosYAtom = atom({
   default: 0,
 });
 
+export const grayPlanesRotYAtom = atom({
+  key: "grayPlanesRotYAtom",
+  default: 0,
+});
+
 export const grayPlanesVisibleAtom = atom({
   key: "grayPlanesVisibleAtom",
   default: false,

src/components/InputHandler.tsx

@@ -27,7 +27,10 @@ import {
   orthoCamPosYAtom,
   orthoCamRotYAtom,
 } from "./OrthoCamera/OrthoCameraAtom";
-import { grayPlanesPosYAtom } from "./GrayPlanes/GrayPlanesAtom";
+import {
+  grayPlanesPosYAtom,
+  grayPlanesRotYAtom,
+} from "./GrayPlanes/GrayPlanesAtom";
 import {
   middleRingNoiseAtom,
   middleRingPosYAtom,
@@ -57,7 +60,9 @@ type LainAnimations = {
 };
 
 const InputHandler = () => {
-  const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(currentBlueOrbAtom);
+  const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(
+    currentBlueOrbAtom
+  );
 
   const [lainMoving, setLainMoving] = useRecoilState(lainMovingAtom);
   const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
@@ -77,6 +82,7 @@ const InputHandler = () => {
   const setLainPosY = useSetRecoilState(lainPosYAtom);
 
   const setGrayPlanePosY = useSetRecoilState(grayPlanesPosYAtom);
+  const setGrayPlaneRotY = useSetRecoilState(grayPlanesRotYAtom);
 
   const setStarfieldPosY = useSetRecoilState(starfieldPosYAtom);
   const setStarfieldRotY = useSetRecoilState(starfieldRotYAtom);
@@ -120,8 +126,9 @@ const InputHandler = () => {
       setCamRotY((prev: number) => prev + val);
       setStarfieldRotY((prev: number) => prev - val);
       setOrthoCamRotY((prev: number) => prev - val);
+      setGrayPlaneRotY((prev: number) => prev - val);
     },
-    [setCamRotY, setStarfieldRotY, setOrthoCamRotY]
+    [setCamRotY, setStarfieldRotY, setOrthoCamRotY, setGrayPlaneRotY]
   );
 
   const getMove = (currentLoc: string, key: string): string => {

src/components/PurpleRing.tsx

@@ -72,14 +72,11 @@ const PurpleRing = memo((props: PurpleRingProps) => {
     }
 
     // frag color
-    vec4 color(vec2 vUv, float step, bool textureexists, int quadnum) {
+    vec4 color(vec2 vUv, float step, bool textureexists) {
         if (!textureexists) {
             return vec4(0.325,0.325,0.698, 1);
-        } else if (quadnum == 1) {
-            float dist = 1.0-tolocal(1.0-vUv.x+0.5, 6, step);
-            return texture2D(siteA, vec2(dist, vUv.y));
         } else {
-            float dist = 1.0-tolocal(1.0-vUv.x, 6, step);
+            float dist = 1.0-tolocal(0.5 - mod(vUv.x, 0.5), 6, step);
             return texture2D(siteA, vec2(dist, vUv.y));
         } 
     }
@@ -91,67 +88,59 @@ const PurpleRing = memo((props: PurpleRingProps) => {
       float thick = 1.0;
       float slopefactor = 1.0;
       
+      int halfc = int(step)/2;
+      
       // segment within circle
       int segment = int(floor(vUv.x * step));
+      int thinperiod = halfc-8;
      
-      int quadlen = int(step)/2;
+     int halfel = segment % halfc;
      
-      // segment within circle's quad
+      if (halfel < thinperiod-1 && istop(vUv.y, thin)) {
-      int quadel = int(segment) % quadlen;
-      
-      // which quad
-      int quadnum = int(segment) / quadlen;
-      
-      int thinperiod = 48;
-     
-      if (quadel < thinperiod-1 && istop(vUv.y, thin)) {
           // thin line top
-          gl_FragColor = color(vUv, step, false, quadnum);
+          gl_FragColor = color(vUv, step, false);
-      } else if (quadel == thinperiod - 1) {
+      } else if (halfel == thinperiod - 1) {
           // thin line and corner
           float dist = tolocal(vUv.x, 1, step);
           float val = 1.0-slope(1.0-dist, thin);
-          if (istop(vUv.y, thin) || (dist > 1.0-thin*slopefactor && 1.0-vUv.y < val-(1.0-thin*slopefactor))) {
+          if (istop(vUv.y, thin) || (1.0-vUv.y < val-(1.0-thin*slopefactor))) {
-              gl_FragColor = color(vUv, step, false, quadnum);
+              gl_FragColor = color(vUv, step, false);
           } else {
               gl_FragColor = vec4(0, 0, 0, 0);
           }
-      } else if (quadel == thinperiod) {
+      } else if (halfel == thinperiod) {
           // slope down
           float dist = tolocal(vUv.x, 1, step);
           float val = 1.0-slope(dist, thin);
           if (vUv.y < val && vUv.y > val-thin*slopefactor) {
-              gl_FragColor = color(vUv, step, false, quadnum);
+              gl_FragColor = color(vUv, step, false);
           } else {
               gl_FragColor = vec4(0, 0, 0, 0);
           }
-      } else if (quadel == thinperiod+1 && isbottom(vUv.y, thin)) {
+      } else if (halfel == thinperiod+1 && isbottom(vUv.y, thin)) {
           // thin line bottom
           gl_FragColor = vec4(0.325,0.325,0.698, 1);
-      } else if (quadel == thinperiod + 2) {
+      } else if (halfel == thinperiod + 2) {
           // slope up
           float dist = tolocal(vUv.x, 1, step);
           float val = 1.0-slope(1.0-dist, thin);
           if ((isbottom(vUv.y, thin) && dist < thin*slopefactor) || (vUv.y < val)) {
-              gl_FragColor = color(vUv, step, true, quadnum);
+              gl_FragColor = color(vUv, step, true);
           } else {
               gl_FragColor = vec4(0, 0, 0, 0);
           }        
-      } else if (quadel > thinperiod + 2 && quadel < thinperiod+7) {
+      } else if (halfel > thinperiod + 2 && halfel < thinperiod+7) {
           // thick part
-          gl_FragColor = color(vUv, step, true, quadnum);
+          gl_FragColor = color(vUv, step, true);
-      } else if (quadel == thinperiod+7) {
+      } else if (halfel == thinperiod+7) {
           // slope up
           float dist = tolocal(vUv.x, 1, step);
           float val = slope(dist, thin);
           if (vUv.y > val) {
-              gl_FragColor = color(vUv, step, true, quadnum);
+              gl_FragColor = color(vUv, step, true);
           } else {
               gl_FragColor = vec4(0, 0, 0, 0);
           }        
-      } else if (quadel > thinperiod+7 && istop(vUv.y, thin)) {
-          // thin line top
-          gl_FragColor = color(vUv, step, false, quadnum);
       } else {
           // transparent
           gl_FragColor = vec4(0, 0, 0, 0);
@@ -159,9 +148,9 @@ const PurpleRing = memo((props: PurpleRingProps) => {
   }
     `;
 
-  // useFrame(() => {
+  useFrame(() => {
-  //   purpleRingRef.current!.rotation.y += 0.01;
+    purpleRingRef.current!.rotation.y += 0.005;
-  // });
+  });
 
   return (
     <mesh

src/components/Site.tsx

@@ -17,25 +17,25 @@ const Site = memo(() => {
         <GrayRing grayRingPosY={1.59} />
         <PurpleRing purpleRingPosY={0.4} />
         <GrayRing grayRingPosY={-0.28} />
-        {/*{Object.values(blue_orbs).map((sprite) => {*/}
+        {Object.values(blue_orbs).map((sprite) => {
-        {/*  return (*/}
+          return (
-        {/*    <BlueOrb*/}
+            <BlueOrb
-        {/*      position={sprite.position as [number, number, number]}*/}
+              position={sprite.position as [number, number, number]}
-        {/*      scale={sprite.scale as [number, number, number]}*/}
+              scale={sprite.scale as [number, number, number]}
-        {/*      rotation={*/}
+              rotation={
-        {/*        sprite.rotation as [*/}
+                sprite.rotation as [
-        {/*          number,*/}
+                  number,
-        {/*          number,*/}
+                  number,
-        {/*          number,*/}
+                  number,
-        {/*          (string | undefined)?*/}
+                  (string | undefined)?
-        {/*        ]*/}
+                ]
-        {/*      }*/}
+              }
-        {/*      sprite={sprite.sprite}*/}
+              sprite={sprite.sprite}
-        {/*      key={sprite.id}*/}
+              key={sprite.id}
-        {/*      active={sprite.id === currentBlueOrb}*/}
+              active={sprite.id === currentBlueOrb}
-        {/*    />*/}
+            />
-        {/*  );*/}
+          );
-        {/*})}*/}
+        })}
       </Suspense>
     </>
   );

src/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
-import { RecoilRoot } from "recoil";
 
 ReactDOM.render(
   <React.StrictMode>