diff --git a/src/components/GrayPlanes/GrayPlanes.tsx b/src/components/GrayPlanes/GrayPlanes.tsx index ab420ab..d57f986 100644 --- a/src/components/GrayPlanes/GrayPlanes.tsx +++ b/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(); 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} > diff --git a/src/components/GrayPlanes/GrayPlanesAtom.tsx b/src/components/GrayPlanes/GrayPlanesAtom.tsx index 9a0adcf..beeeae8 100644 --- a/src/components/GrayPlanes/GrayPlanesAtom.tsx +++ b/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, diff --git a/src/components/InputHandler.tsx b/src/components/InputHandler.tsx index 8a2e869..e685b1b 100644 --- a/src/components/InputHandler.tsx +++ b/src/components/InputHandler.tsx @@ -22,12 +22,15 @@ import { starfieldPosYAtom, starfieldRotYAtom, } from "./Starfield/StarfieldAtom"; -import { BlueOrbHuds} from "./HUD/HUDElement"; +import { BlueOrbHuds } from "./HUD/HUDElement"; 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 => { diff --git a/src/components/PurpleRing.tsx b/src/components/PurpleRing.tsx index 50c0622..7c793aa 100644 --- a/src/components/PurpleRing.tsx +++ b/src/components/PurpleRing.tsx @@ -72,16 +72,13 @@ 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)); - } + } } void main() { @@ -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 quadlen = int(step)/2; - - // segment within circle's quad - int quadel = int(segment) % quadlen; - - // which quad - int quadnum = int(segment) / quadlen; - - int thinperiod = 48; + int thinperiod = halfc-8; - if (quadel < thinperiod-1 && istop(vUv.y, thin)) { + int halfel = segment % halfc; + + if (halfel < thinperiod-1 && istop(vUv.y, thin)) { // thin line top - gl_FragColor = color(vUv, step, false, quadnum); - } else if (quadel == thinperiod - 1) { + gl_FragColor = color(vUv, step, false); + } 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))) { - gl_FragColor = color(vUv, step, false, quadnum); + if (istop(vUv.y, thin) || (1.0-vUv.y < val-(1.0-thin*slopefactor))) { + 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); - } else if (quadel == thinperiod+7) { + gl_FragColor = color(vUv, step, true); + } 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(() => { - // purpleRingRef.current!.rotation.y += 0.01; - // }); + useFrame(() => { + purpleRingRef.current!.rotation.y += 0.005; + }); return ( { - {/*{Object.values(blue_orbs).map((sprite) => {*/} - {/* return (*/} - {/* */} - {/* );*/} - {/*})}*/} + {Object.values(blue_orbs).map((sprite) => { + return ( + + ); + })} ); diff --git a/src/index.tsx b/src/index.tsx index f495b2c..2afc29b 100644 --- a/src/index.tsx +++ b/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(