Skip to content

Commit

Permalink
feat: improve radius based on throughput (#942)
Browse files Browse the repository at this point in the history 
* feat: improve max tangle dynamic height

* feat: add x position multiplier for different travel speeds

* fix: remove extra semi
  • Loading branch information
@VmMad
VmMad authored Jan 11, 2024
1 parent f2af7fe commit 004e059
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 175 deletions.
10 changes: 4 additions & 6 deletions client/src/features/visualizer-threejs/Emitter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,19 +69,17 @@ const Emitter: React.FC<EmitterProps> = ({
const currentRealTime = clock.getElapsedTime();
const realTimeDelta = currentRealTime - previousRealTime.current;
previousRealTime.current = currentRealTime;

if (isPlaying) {
updateAnimationTime(realTimeDelta);
checkAndHandleNewPeak();

if (groupRef.current) {
const { x } = groupRef.current.position;

const newXPos = x + (delta * EMITTER_SPEED_MULTIPLIER);

groupRef.current.position.x = newXPos;
}

if (emitterRef.current) {
const newYPos = getSinusoidalPosition(animationTime, currentAmplitude);
emitterRef.current.position.y = newYPos;
Expand All @@ -97,7 +95,7 @@ const Emitter: React.FC<EmitterProps> = ({
{/* TangleWrapper Mesh */}
<mesh name={CanvasElement.TangleWrapperMesh} position={[-(xTangleDistance / 2), 0, 0]}>
<boxGeometry args={[xTangleDistance, yTangleDistance, 0]} attach="geometry" />
<meshPhongMaterial opacity={0} wireframe={true} transparent attach="material" />
<meshPhongMaterial opacity={1} wireframe={true} transparent attach="material" />
</mesh>

{/* Emitter Mesh */}
Expand Down
34 changes: 12 additions & 22 deletions client/src/features/visualizer-threejs/VisualizerInstance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ 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, DIRECTIONAL_LIGHT_INTENSITY, FAR_PLANE, NEAR_PLANE, PENDING_BLOCK_COLOR, TIME_DIFF_COUNTER, VISUALIZER_BACKGROUND } from "./constants";
import { FAR_PLANE, NEAR_PLANE, ACCEPTED_BLOCK_COLORS, DIRECTIONAL_LIGHT_INTENSITY, PENDING_BLOCK_COLOR, VISUALIZER_BACKGROUND, EMITTER_X_POSITION_MULTIPLIER } from "./constants";
import Emitter from "./Emitter";
import { useTangleStore, useConfigStore } from "./store";
import { getGenerateY, randomIntFromInterval, timer } from "./utils";
import { getGenerateDynamicYZPosition, randomIntFromInterval, } from "./utils";
import { BPSCounter } from "./BPSCounter";
import { VisualizerRouteProps } from "../../app/routes/VisualizerRouteProps";
import { ServiceFactory } from "../../factories/serviceFactory";
Expand All @@ -29,15 +29,13 @@ const features = {
cameraControls: true
};

const timerDiff = timer(TIME_DIFF_COUNTER);

const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> = ({
match: {
params: { network }
}
}) => {
const [networkConfig] = useNetworkConfig(network);
const generateY = getGenerateY({ withRandom: true });
const generateYZPositions = getGenerateDynamicYZPosition();
const themeMode = useGetThemeMode()

const [runListeners, setRunListeners] = React.useState<boolean>(false);
Expand All @@ -56,7 +54,6 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
const addBlock = useTangleStore(s => s.addToBlockQueue);
const addToEdgeQueue = useTangleStore(s => s.addToEdgeQueue);
const addToColorQueue = useTangleStore(s => s.addToColorQueue);
const addYPosition = useTangleStore(s => s.addYPosition);
const blockMetadata = useTangleStore(s => s.blockMetadata);
const indexToBlockId = useTangleStore(s => s.indexToBlockId);

Expand Down Expand Up @@ -134,15 +131,16 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
const emitterObj = emitterRef.current;
if (emitterObj && blockData) {
const emitterBox = new Box3().setFromObject(emitterObj);
const secondsFromStart = timerDiff();

const Y = generateY(secondsFromStart, bpsCounter.getBPS());
const emitterCenter = new THREE.Vector3();
emitterBox.getCenter(emitterCenter);

const { y, z } = generateYZPositions(bpsCounter.getBPS(), emitterCenter);
const minX = emitterBox.min.x - ((emitterBox.max.x - emitterBox.min.x) * EMITTER_X_POSITION_MULTIPLIER);
const maxX = emitterBox.max.x + ((emitterBox.max.x - emitterBox.min.x) * EMITTER_X_POSITION_MULTIPLIER);

const targetPosition = {
x: randomIntFromInterval(emitterBox.min.x, emitterBox.max.x),
y: Y,
z: randomIntFromInterval(emitterBox.min.z, emitterBox.max.z),
};
const x = randomIntFromInterval(minX, maxX)
const targetPosition = { x, y, z };

bpsCounter.addBlock();
if (!bpsCounter.getBPS()) {
Expand All @@ -152,19 +150,11 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
blockMetadata.set(blockData.blockId, blockData);

addToEdgeQueue(blockData.blockId, blockData.parents ?? []);
addYPosition(Y);

const emitterCenter = new THREE.Vector3();
emitterBox.getCenter(emitterCenter);

addBlock({
id: blockData.blockId,
color: PENDING_BLOCK_COLOR,
targetPosition: {
x: targetPosition.x,
y: targetPosition.y,
z: targetPosition.z
},
targetPosition,
initPosition: {
x: emitterCenter.x,
y: emitterCenter.y,
Expand Down
26 changes: 19 additions & 7 deletions client/src/features/visualizer-threejs/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Color } from "three";
import { ThemeMode } from './enums';

// steps
export const STEP_Y_PX = 20;
export const BLOCK_STEP_PX = 10;
export const STEP_CAMERA_SHIFT_PX = 100;

export const MAX_BLOCK_INSTANCES = 5000;
Expand Down Expand Up @@ -46,8 +46,8 @@ export const EMITTER_PADDING_RIGHT = 150
export const VISUALIZER_SAFE_ZONE = 150

// camera
export const CAMERA_X_AXIS_MOVEMENT = 0.025
export const CAMERA_Y_AXIS_MOVEMENT = 0.035
export const CAMERA_X_AXIS_MOVEMENT = 0.005
export const CAMERA_Y_AXIS_MOVEMENT = 0.065
export const CAMERA_X_OFFSET = 0
export const CAMERA_Y_OFFSET = 0.5

Expand All @@ -61,9 +61,6 @@ export const VISUALIZER_PADDINGS = {
paddingTop: VISUALIZER_SAFE_ZONE,
}

// general
export const MIN_BLOCKS_PER_SECOND = 50
export const MAX_BLOCKS_PER_SECOND = 200

// time
export const MILLISECONDS_PER_SECOND = 1000
Expand All @@ -81,7 +78,22 @@ export const EMITTER_WIDTH = 30;
export const EMITTER_HEIGHT = 250;
export const EMITTER_DEPTH = 250;

// conic emitter

export const MIN_TANGLE_RADIUS = 100;
export const MAX_TANGLE_RADIUS = 300;

export const MIN_BLOCKS_PER_SECOND = 50;
export const MAX_BLOCKS_PER_SECOND = 200;

export const MIN_BLOCK_NEAR_RADIUS = 20;

export const MAX_POINT_RETRIES = 10;
export const MAX_PREV_POINTS = 20;

export const EMITTER_X_POSITION_MULTIPLIER = 3;

export const MAX_SINUSOIDAL_AMPLITUDE = 200;
export const SINUSOIDAL_AMPLITUDE_ACCUMULATOR = 10;
export const INITIAL_SINUSOIDAL_AMPLITUDE = 50;
export const INITIAL_SINUSOIDAL_AMPLITUDE = 40;
export const HALF_WAVE_PERIOD_SECONDS = 4;
36 changes: 0 additions & 36 deletions client/src/features/visualizer-threejs/store/tangle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,6 @@ interface TangleState {
indexToBlockId: string[];
updateBlockIdToIndex: (blockId: string, index: number) => void;

yPositions: { [k: number]: number };
addYPosition: (blockY: number) => void;
removeYPosition: (blockY: number) => void;

zoom: number;
setZoom: (zoom: number) => void;

Expand All @@ -79,7 +75,6 @@ export const useTangleStore = create<TangleState>()(devtools(set => ({
blockMetadata: new Map(),
blockIdToAnimationPosition: new Map(),
indexToBlockId: [],
yPositions: {},
zoom: ZOOM_DEFAULT,
bps: 0,
clickedInstanceId: null,
Expand Down Expand Up @@ -183,37 +178,6 @@ export const useTangleStore = create<TangleState>()(devtools(set => ({
};
});
},
addYPosition: blockY => {
const Y = Math.floor(Math.abs(blockY));

set(state => {
const nextYPositions = { ...state.yPositions };

const prevYCount = nextYPositions[Y] || 0;
nextYPositions[Y] = prevYCount + 1;
return {
...state,
yPositions: nextYPositions
};
});
},
removeYPosition: blockY => {
const Y = Math.floor(Math.abs(blockY));

set(state => {
const nextYPositions = { ...state.yPositions };
const current = nextYPositions[Y];
if (current === 1) {
delete nextYPositions[Y];
} else {
nextYPositions[Y] -= 1;
}
return {
...state,
yPositions: nextYPositions
};
});
},
setZoom: zoom => {
set(state => ({
...state,
Expand Down
Loading

0 comments on commit 004e059

Please sign in to comment.