diff --git a/src/components/KeyPressHandler.tsx b/src/components/KeyPressHandler.tsx
index 30f19db..e98568a 100644
--- a/src/components/KeyPressHandler.tsx
+++ b/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
diff --git a/src/components/MainScene/Lain.tsx b/src/components/MainScene/Lain.tsx
index 512f57c..8abf3f4 100644
--- a/src/components/MainScene/Lain.tsx
+++ b/src/components/MainScene/Lain.tsx
@@ -68,7 +68,7 @@ export const LainConstructor = (props: LainConstructorProps) => {
);
diff --git a/src/components/MainScene/YellowOrb.tsx b/src/components/MainScene/YellowOrb.tsx
index 3ab1998..303228d 100644
--- a/src/components/MainScene/YellowOrb.tsx
+++ b/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();
+ const idleStarting = useStore((state) => state.idleStarting);
+ // ref for the object itself
+ const orbRef = useRef(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;
diff --git a/src/core/setters/main/idleManager.ts b/src/core/setters/main/idleManager.ts
index 3975c83..ec1bb5b 100644
--- a/src/core/setters/main/idleManager.ts
+++ b/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) };
diff --git a/src/store.ts b/src/store.ts
index 2a624ca..2899ab2 100644
--- a/src/store.ts
+++ b/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);
};