fixed lain alpha mask, yellow orb synced with idle media

src/components/KeyPressHandler.tsx

@@ -101,9 +101,11 @@ const KeyPressHandler = () => {
       //   // after one idle animation plays, the second comes sooner than it would after a regular keypress
       //   lainIdleCounter.current = now - 2500;
       // }
-      // if (now > idleSceneCounter.current + 15000) {
+      // if (now > idleSceneCounter.current + 5000) {
       //   idleManager(getRandomIdleMedia());
-      //   sceneManager({ event: "play_idle_media" });
+      //   setTimeout(() => {
+      //     sceneManager({ event: "play_idle_media" });
+      //   }, 1200);
       //   // put it on lock until the next action, since while the idle media plays, the
       //   // Date.now() value keeps increasing, which can result in another idle media playing right after one finishes
       //   // one way to work around this would be to modify the value depending on the last played idle media's duration

src/components/MainScene/Lain.tsx

@@ -68,7 +68,7 @@ export const LainConstructor = (props: LainConstructorProps) => {
     <spriteMaterial
       attach="material"
       map={lainSpriteTexture}
-      alphaTest={0.01}
+      alphaTest={0.665}
       color={0xffffff}
     />
   );

src/components/MainScene/YellowOrb.tsx

@@ -2,16 +2,21 @@ import React, { memo, useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import orbSprite from "../../static/sprite/orb.png";
+import { useStore } from "../../store";
 
 type YellowOrbProps = {
   visible: boolean;
 };
 
 const YellowOrb = memo((props: YellowOrbProps) => {
-  const orbRef = useRef<THREE.Object3D>();
+  const idleStarting = useStore((state) => state.idleStarting);
+  // ref for the object itself
+  const orbRef = useRef<THREE.Object3D>(new THREE.Mesh());
+  // position on the curve
   const idxRef = useRef(0);
+  // how many times the orb changed direction
   const directionChangeCountRef = useRef(0);
-  // left or right (0/1)
+  // current direction - left or right (0/1)
   const directionRef = useRef(0);
   // first curve and second curve (0/1)
   const curveIdxRef = useRef(0);
@@ -36,30 +41,23 @@ const YellowOrb = memo((props: YellowOrbProps) => {
     []
   );
 
+  const bigOrbScale = useMemo(() => new THREE.Vector3(2, 2, 2), []);
+
   useFrame(() => {
     if (props.visible) {
       const orbPosFirst = curves[0].getPoint(idxRef.current / 250);
       const orbPosSecond = curves[1].getPoint(idxRef.current / 250);
 
       if (orbPosFirst.x < -1.4) {
-        if (curveIdxRef.current === 0) {
-          directionRef.current = 1;
-          if (orbRef.current) orbRef.current.renderOrder = 0;
-        } else {
-          directionRef.current = 0;
-        }
-        if (directionChangeCountRef.current) directionChangeCountRef.current++;
+        if (curveIdxRef.current === 0) orbRef.current.renderOrder = 0;
+        directionRef.current = Number(!curveIdxRef.current);
+        directionChangeCountRef.current++;
       }
 
       if (orbPosFirst.x > 1.4) {
-        if (curveIdxRef.current === 0) {
-          directionRef.current = 0;
-        } else {
-          directionRef.current = 1;
-
-          if (orbRef.current) orbRef.current.renderOrder = -1;
-        }
-        if (directionChangeCountRef.current) directionChangeCountRef.current++;
+        if (curveIdxRef.current === 1) orbRef.current.renderOrder = -1;
+        directionRef.current = curveIdxRef.current;
+        directionChangeCountRef.current++;
       }
 
       if (directionRef.current === 0) {
@@ -77,7 +75,7 @@ const YellowOrb = memo((props: YellowOrbProps) => {
       }
 
       if (
-        directionChangeCountRef.current % 6 === 0 &&
+        directionChangeCountRef.current % 3 === 0 &&
         directionChangeCountRef.current !== 0
       ) {
         directionChangeCountRef.current = 0;
@@ -91,7 +89,19 @@ const YellowOrb = memo((props: YellowOrbProps) => {
         directionRef.current = 0;
       }
 
-      if (orbRef.current) {
+      if (idleStarting) {
+        orbRef.current.scale.lerp(bigOrbScale, 0.01);
+        orbRef.current.position.x = THREE.MathUtils.lerp(
+          orbRef.current.position.x,
+          0,
+          0.01
+        );
+        orbRef.current.position.y = THREE.MathUtils.lerp(
+          orbRef.current.position.y,
+          0,
+          0.01
+        );
+      } else {
         if (curveIdxRef.current === 0) {
           orbRef.current.position.x = orbPosFirst.x;
           orbRef.current.position.y = orbPosFirst.y;

src/core/setters/main/idleManager.ts

@@ -1,13 +1,23 @@
 import { useStore } from "../../../store";
 
 const idleManager = (eventState: any) => {
+  const setIdleStarting = useStore.getState().setIdleStarting;
   const setIdleScene = useStore.getState().setIdleScene;
 
   const dispatchAction = (eventState: {
     media: string;
     images: { "1": string; "2": string; "3": string } | undefined;
     nodeName: string | undefined;
-  }) => ({ action: () => setIdleScene(eventState) });
+  }) => ({
+    action: () => {
+      setIdleStarting(true);
+      setIdleScene(eventState);
+
+      setTimeout(() => {
+        setIdleStarting(false);
+      }, 6000);
+    },
+  });
 
   const { action } = { ...dispatchAction(eventState) };
 

src/store.ts

@@ -6,7 +6,6 @@ import { NodeDataType } from "./components/MainScene/Site";
 import { getNodeById } from "./utils/node-utils";
 import site_a from "./resources/site_a.json";
 
-
 type State = {
   currentScene: string;
 
@@ -61,6 +60,7 @@ type State = {
   wordSelected: boolean;
 
   // idle scene
+  idleStarting: boolean;
   idleMedia: string;
   idleImages: { "1": string; "2": string; "3": string } | undefined;
   idleNodeName: string | undefined;
@@ -192,6 +192,7 @@ export const useStore = create(
       wordSelected: false,
 
       // idle scene
+      idleStarting: false,
       idleMedia: site_a["00"]["0000"].media_file,
       idleNodeName: site_a["00"]["0000"].node_name,
       // this may be undefined depending on whether or not the media is audio or not
@@ -348,6 +349,7 @@ export const useStore = create(
       setWordSelected: (to: boolean) => set(() => ({ wordSelected: to })),
 
       // idle media setters
+      setIdleStarting: (to: boolean) => set(() => ({ idleStarting: to })),
       setIdleScene: (to: {
         images: { "1": string; "2": string; "3": string } | undefined;
         media: string | undefined;
@@ -539,11 +541,11 @@ export const playAudio = (audio: HTMLAudioElement) => {
 };
 
 export const createAudioAnalyser = () => {
-    const mediaElement = document.getElementById("media") as HTMLMediaElement;
-    const listener = new THREE.AudioListener();
-    const audio = new THREE.Audio(listener);
+  const mediaElement = document.getElementById("media") as HTMLMediaElement;
+  const listener = new THREE.AudioListener();
+  const audio = new THREE.Audio(listener);
 
-    audio.setMediaElementSource(mediaElement);
+  audio.setMediaElementSource(mediaElement);
 
-    return new THREE.AudioAnalyser(audio, 2048);
+  return new THREE.AudioAnalyser(audio, 2048);
 };