diff --git a/app/tests/useNoise/Playground.tsx b/app/tests/useNoise/Playground.tsx index 4ff5d97e..029815ef 100644 --- a/app/tests/useNoise/Playground.tsx +++ b/app/tests/useNoise/Playground.tsx @@ -27,7 +27,7 @@ export const Playground = () => { const fluid = useFluid({ size, - dpr: 0.25, + dpr: 0.24, }); const { updateBasicFxGUI, setBasicFxGUIValues } = useBasicFxGUI( diff --git a/utils/useGUI.ts b/utils/useGUI.ts index f7556f5f..d8d28943 100644 --- a/utils/useGUI.ts +++ b/utils/useGUI.ts @@ -1,11 +1,14 @@ import { useCallback, useEffect, RefObject, useRef } from "react"; import GUI from "lil-gui"; -export const useGUI = (setupGUI: (gui: GUI) => void, title?: string, container?: RefObject) => { +export const useGUI = ( + setupGUI: (gui: GUI) => void, + title?: string, + container?: RefObject +) => { const guiRef = useRef(null); - useEffect(() => { - + useEffect(() => { if (!guiRef.current) { const newGui = new GUI({ closeFolders: true, @@ -17,21 +20,20 @@ export const useGUI = (setupGUI: (gui: GUI) => void, title?: string, container?: guiRef.current = newGui; setupGUI(newGui); } - + return () => { if (guiRef.current) { guiRef.current.destroy(); guiRef.current = null; } }; - }, [setupGUI, title, container]); - const updateDisplays = useCallback(() => { + const updateDisplays = useCallback(() => { guiRef.current?.folders.forEach((folder) => folder.controllers.forEach((controller) => controller.updateDisplay()) - ); + ); }, []); - + return updateDisplays; -}; \ No newline at end of file +};