From 30916b1117a7bf4648283a8bf2a5afc5fddd3c40 Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Tue, 12 Dec 2023 16:56:27 +0100 Subject: [PATCH 1/3] feat: polish block distances --- .../features/visualizer-threejs/VisualizerInstance.tsx | 10 ++++++++-- client/src/features/visualizer-threejs/constants.ts | 4 +++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx index 69bac25b7..e6815ef68 100644 --- a/client/src/features/visualizer-threejs/VisualizerInstance.tsx +++ b/client/src/features/visualizer-threejs/VisualizerInstance.tsx @@ -6,7 +6,13 @@ 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, + MAX_X_BLOCK_DISTANCE, + 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"; @@ -137,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(-MAX_X_BLOCK_DISTANCE, MAX_X_BLOCK_DISTANCE), ]; bpsCounter.addBlock(); diff --git a/client/src/features/visualizer-threejs/constants.ts b/client/src/features/visualizer-threejs/constants.ts index 7951020cc..fbbd51757 100644 --- a/client/src/features/visualizer-threejs/constants.ts +++ b/client/src/features/visualizer-threejs/constants.ts @@ -1,10 +1,12 @@ import { Color } from "three"; // steps -export const STEP_Y_PX = 10; +export const STEP_Y_PX = 20; export const STEP_X_PX = 100; export const STEP_CAMERA_SHIFT_PX = 100; +export const MAX_X_BLOCK_DISTANCE = 150; + export const MAX_BLOCK_INSTANCES = 5000; // nodes From 2684edbade6a54eba03ab24dbccaa09a0eeb99dd Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Tue, 12 Dec 2023 17:07:08 +0100 Subject: [PATCH 2/3] chore: use both steps for block positions --- client/src/features/visualizer-threejs/VisualizerInstance.tsx | 4 ++-- client/src/features/visualizer-threejs/constants.ts | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx index e6815ef68..8104622e5 100644 --- a/client/src/features/visualizer-threejs/VisualizerInstance.tsx +++ b/client/src/features/visualizer-threejs/VisualizerInstance.tsx @@ -15,7 +15,7 @@ import { } from './constants' import Emitter from "./Emitter"; import { useTangleStore, useConfigStore } from "./store"; -import { getGenerateY, randomIntFromInterval, timer } from "./utils"; +import { generateXbyShift, getGenerateY, randomIntFromInterval, timer } from "./utils"; import { BPSCounter } from "./BPSCounter"; import { VisualizerRouteProps } from "../../app/routes/VisualizerRouteProps"; import { ServiceFactory } from "../../factories/serviceFactory"; @@ -143,7 +143,7 @@ const VisualizerInstance: React.FC> = const position: [number, number, number] = [ randomIntFromInterval(emitterBox.min.x, emitterBox.max.x), Y, - randomIntFromInterval(-MAX_X_BLOCK_DISTANCE, MAX_X_BLOCK_DISTANCE), + generateXbyShift(-0.5), ]; bpsCounter.addBlock(); diff --git a/client/src/features/visualizer-threejs/constants.ts b/client/src/features/visualizer-threejs/constants.ts index fbbd51757..81353936b 100644 --- a/client/src/features/visualizer-threejs/constants.ts +++ b/client/src/features/visualizer-threejs/constants.ts @@ -2,11 +2,9 @@ import { Color } from "three"; // steps export const STEP_Y_PX = 20; -export const STEP_X_PX = 100; +export const STEP_X_PX = 250; export const STEP_CAMERA_SHIFT_PX = 100; -export const MAX_X_BLOCK_DISTANCE = 150; - export const MAX_BLOCK_INSTANCES = 5000; // nodes From 536c425d556e79f7d7bb16c6260a3ba7cd07354f Mon Sep 17 00:00:00 2001 From: JCNoguera Date: Wed, 13 Dec 2023 15:27:16 +0100 Subject: [PATCH 3/3] fix: make emitter have bigger dimensions --- .../features/visualizer-threejs/Emitter.tsx | 4 +++- .../visualizer-threejs/VisualizerInstance.tsx | 5 ++-- .../features/visualizer-threejs/constants.ts | 6 ++++- .../src/features/visualizer-threejs/utils.ts | 23 +------------------ 4 files changed, 11 insertions(+), 27 deletions(-) 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 8104622e5..e71561743 100644 --- a/client/src/features/visualizer-threejs/VisualizerInstance.tsx +++ b/client/src/features/visualizer-threejs/VisualizerInstance.tsx @@ -8,14 +8,13 @@ import * as THREE from "three"; import { Box3 } from "three"; import { ACCEPTED_BLOCK_COLORS, - MAX_X_BLOCK_DISTANCE, PENDING_BLOCK_COLOR, TIME_DIFF_COUNTER, ZOOM_DEFAULT, } from './constants' import Emitter from "./Emitter"; import { useTangleStore, useConfigStore } from "./store"; -import { generateXbyShift, getGenerateY, randomIntFromInterval, timer } from "./utils"; +import { getGenerateY, randomIntFromInterval, timer } from "./utils"; import { BPSCounter } from "./BPSCounter"; import { VisualizerRouteProps } from "../../app/routes/VisualizerRouteProps"; import { ServiceFactory } from "../../factories/serviceFactory"; @@ -143,7 +142,7 @@ const VisualizerInstance: React.FC> = const position: [number, number, number] = [ randomIntFromInterval(emitterBox.min.x, emitterBox.max.x), Y, - generateXbyShift(-0.5), + 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 81353936b..6d046ffc0 100644 --- a/client/src/features/visualizer-threejs/constants.ts +++ b/client/src/features/visualizer-threejs/constants.ts @@ -2,7 +2,6 @@ import { Color } from "three"; // steps export const STEP_Y_PX = 20; -export const STEP_X_PX = 250; 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; -};