mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

better code for purple ring, working on gray planes rotation

Browse source
This commit is contained in:
ad044 2020-09-20 22:52:50 +04:00
parent 6ea6f36722
commit a91b5093b7
6 changed files with 68 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/GrayPlanes/GrayPlanes.tsx
View file

@ -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}
>

5
src/components/GrayPlanes/GrayPlanesAtom.tsx
View file

@ -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,

15
src/components/InputHandler.tsx
View file

@ -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 => {

57
src/components/PurpleRing.tsx
View file

@ -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
int quadel = int(segment) % quadlen;
// which quad
int quadnum = int(segment) / quadlen;
int thinperiod = 48;
if (quadel < thinperiod-1 && istop(vUv.y, thin)) {
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 (
<mesh

38
src/components/Site.tsx
View file

@ -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) => {*/}
{/* return (*/}
{/* <BlueOrb*/}
{/* position={sprite.position as [number, number, number]}*/}
{/* scale={sprite.scale as [number, number, number]}*/}
{/* rotation={*/}
{/* sprite.rotation as [*/}
{/* number,*/}
{/* number,*/}
{/* number,*/}
{/* (string | undefined)?*/}
{/* ]*/}
{/* }*/}
{/* sprite={sprite.sprite}*/}
{/* key={sprite.id}*/}
{/* active={sprite.id === currentBlueOrb}*/}
{/* />*/}
{/* );*/}
{/*})}*/}
{Object.values(blue_orbs).map((sprite) => {
return (
<BlueOrb
position={sprite.position as [number, number, number]}
scale={sprite.scale as [number, number, number]}
rotation={
sprite.rotation as [
number,
number,
number,
(string | undefined)?
]
}
sprite={sprite.sprite}
key={sprite.id}
active={sprite.id === currentBlueOrb}
/>
);
})}
</Suspense>
</>
);

1
src/index.tsx
View file

@ -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>