diff --git a/client/src/features/visualizer-threejs/Emitter.tsx b/client/src/features/visualizer-threejs/Emitter.tsx index b4a088e3c..5b77d4157 100644 --- a/client/src/features/visualizer-threejs/Emitter.tsx +++ b/client/src/features/visualizer-threejs/Emitter.tsx @@ -5,6 +5,7 @@ import * as THREE from "three"; import { useBorderPositions } from "./hooks/useBorderPositions"; import { useConfigStore, useTangleStore } from "./store"; import { useRenderTangle } from "./useRenderTangle"; +import { EMITTER_DEPTH, EMITTER_HEIGHT, EMITTER_WIDTH } from './constants'; interface EmitterProps { readonly setRunListeners: Dispatch>; @@ -57,13 +58,14 @@ const Emitter: React.FC = ({ // The Tangle rendering hook useRenderTangle(); + return ( - + ); diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx index 0c0b6d92c..e6f0f18b1 100644 --- a/client/src/features/visualizer-threejs/VisualizerInstance.tsx +++ b/client/src/features/visualizer-threejs/VisualizerInstance.tsx @@ -6,7 +6,12 @@ import React, { useEffect, useRef } from "react"; import { RouteComponentProps } from "react-router-dom"; import * as THREE from "three"; import { Box3 } from "three"; -import { ACCEPTED_BLOCK_COLORS, PENDING_BLOCK_COLOR, TIME_DIFF_COUNTER, ZOOM_DEFAULT } from "./constants"; +import { + ACCEPTED_BLOCK_COLORS, + PENDING_BLOCK_COLOR, + TIME_DIFF_COUNTER, + ZOOM_DEFAULT, +} from './constants' import Emitter from "./Emitter"; import { useTangleStore, useConfigStore } from "./store"; import { getGenerateY, randomIntFromInterval, timer } from "./utils"; @@ -138,7 +143,7 @@ const VisualizerInstance: React.FC> = const position: [number, number, number] = [ randomIntFromInterval(emitterBox.min.x, emitterBox.max.x), Y, - randomIntFromInterval(emitterBox.min.z, emitterBox.max.z) + randomIntFromInterval(emitterBox.min.z, emitterBox.max.z), ]; bpsCounter.addBlock(); diff --git a/client/src/features/visualizer-threejs/constants.ts b/client/src/features/visualizer-threejs/constants.ts index 7951020cc..6d046ffc0 100644 --- a/client/src/features/visualizer-threejs/constants.ts +++ b/client/src/features/visualizer-threejs/constants.ts @@ -1,8 +1,7 @@ import { Color } from "three"; // steps -export const STEP_Y_PX = 10; -export const STEP_X_PX = 100; +export const STEP_Y_PX = 20; export const STEP_CAMERA_SHIFT_PX = 100; export const MAX_BLOCK_INSTANCES = 5000; @@ -40,3 +39,8 @@ export const COLORS = [ ] +// emitter + +export const EMITTER_WIDTH = 30; +export const EMITTER_HEIGHT = 250; +export const EMITTER_DEPTH = 250; diff --git a/client/src/features/visualizer-threejs/utils.ts b/client/src/features/visualizer-threejs/utils.ts index 406594c07..07f883828 100644 --- a/client/src/features/visualizer-threejs/utils.ts +++ b/client/src/features/visualizer-threejs/utils.ts @@ -1,4 +1,4 @@ -import { STEP_X_PX, STEP_Y_PX, TIME_DIFF_COUNTER, SECOND } from "./constants"; +import { STEP_Y_PX, TIME_DIFF_COUNTER, SECOND } from "./constants"; /** * Generates a random number within a specified range. @@ -147,24 +147,3 @@ export const getGenerateY = ({ withRandom }: {withRandom?: boolean} = {}): (shif return Y * STEP_Y_PX; }; }; - -/** - * Generator for coordinate X. It returns coordinate based on shift. - * @param shift The shift value - * @returns The X axis value - */ -export const generateXbyShift = (shift: number) => { - const randomNumber = Math.floor(Math.random() * STEP_X_PX) + 1; - - const shiftWithThreshold = (shift ?? 0) * STEP_X_PX; - return shiftWithThreshold + randomNumber; -}; - - -export const wiggleEffect = (max: number) => { - const needToChange = Math.random() > 0.95; - if (needToChange) { - return randomNumberFromInterval(0 - max, max); - } - return 0; -};