adjust random behaviour (#245)

* cleanup

* cleanup

* cleanup

* remove unnecessary condition for friction of the spring

* fix dot movement when switching canvas or loading project

...while random notes is activated

* fix dot movement after random notes

* fix dot movement after randomNotes

Co-authored-by: Niklas Kramer <>
Co-authored-by: Simon Thormeyer <simonthormeyer@gmail.com>

Author: NiklasKramer

Frontend/src/components/threeJS/Dot.js

@@ -19,6 +19,7 @@ const Dot = forwardRef((props, ref) => {
     // local
     const [dragging, setDragging] = useState(false);
     const dragAnimationRunning = useRef(false);
+    const randomNotesAnimationFinishing = useRef(false);
     const [animatedPosition, setAnimatedPosition] = useState([canvases[canvasId][props.name].x, canvases[canvasId][props.name].y, 0]);
     const [position, setPosition] = useState(animatedPosition);
     const beforeDragPosition = useRef(
@@ -33,7 +34,7 @@ const Dot = forwardRef((props, ref) => {
     // store.js
     const hasLoaded = useStore(state => state.functions.dotHasLoaded);
     const loadingProject = useStore(state => state.loadingProject);
-    
+
 
     // save current dot position into canvas with the given id
     const saveCurrentPositionInGlobalState = useCallback((canvasId) => {
@@ -49,16 +50,22 @@ const Dot = forwardRef((props, ref) => {
     }, [animatedPosition, canvases, props.name, setCanvases])
 
 
-
-
     useSpring({
         posX: position[0], posY: position[1],
-        config: { mass: 5, tension: 1000, friction: 50, precision: 0.0000001 },
+        config: {
+            mass: 5,
+            tension: (dragAnimationRunning.current || loadingDotPosition) ? 1000 :
+                randomNotesRunning[canvasId] || randomNotesAnimationFinishing.current ? 20 : 1000,
+            friction: 50,
+            precision: 0.01
+        },
+
         // position change will be canceled or not be exectued if this is true
         pause: !(randomNotesRunning[canvasId] || dragAnimationRunning.current || loadingDotPosition || !loadingProject),
         onRest: () => {
             saveCurrentPositionInGlobalState(canvasId);
             dragAnimationRunning.current = false;
+            randomNotesAnimationFinishing.current = false;
             setLoadingDotPosition(false);
             hasLoaded();
             if (randomNotesRunning[canvasId] && !dragging) {
@@ -81,14 +88,18 @@ const Dot = forwardRef((props, ref) => {
             let x = Math.random() * viewport.width - viewport.width / 2;
             let y = Math.random() * viewport.height - viewport.height / 2;
             setPosition([x, y, 0]);
+        } else {
+            let posAfterRandomNotes = ref.current.position.clone();
+            randomNotesAnimationFinishing.current = true; // careful, ugly quickfix
+            setPosition([posAfterRandomNotes.x, posAfterRandomNotes.y, 0])
         }
-    }, [randomNotesRunning, canvasId, viewport.height, viewport.width])
+    }, [randomNotesRunning, canvasId, viewport.height, viewport.width, ref])
 
     // when canvas changes, change position accordingly
     useEffect(() => {
         let switchingCanvas = (canvasId !== oldCanvasId.current)
         if (switchingCanvas || loadingProject) {
-            if(switchingCanvas) saveCurrentPositionInGlobalState(oldCanvasId.current);
+            if (switchingCanvas) saveCurrentPositionInGlobalState(oldCanvasId.current);
             setLoadingDotPosition(true);
             oldCanvasId.current = canvasId;
             setPosition([
@@ -114,7 +125,7 @@ const Dot = forwardRef((props, ref) => {
             dragAnimationRunning.current = true;
             setPosition([
                 clamp(beforeDragPosition.current[0] + mx / aspect, left, right),
-                clamp(- my / aspect + beforeDragPosition.current[1], top, bottom),
+                clamp(-my / aspect + beforeDragPosition.current[1], top, bottom),
                 0]);
         }),
         onDragEnd: () => {
@@ -139,7 +150,6 @@ const Dot = forwardRef((props, ref) => {
     }, [animatedPosition, camera, canvasId, musicCtrl, props.name, ref])
 
 
-
     return (
         <a.mesh
             {...props}

Frontend/src/components/toneJS/randomNotes/randomNotes.js

@@ -1,6 +1,6 @@
 export class RandomNotes {
 
-    constructor(){
+    constructor() {
         this.time = undefined;
         this.xAxis = 0;
         this.yAxis = 0;
@@ -9,8 +9,8 @@ export class RandomNotes {
         this.timeout = undefined;
     }
 
-    toggleRandomNotes () {
-        if(this.running === false) {
+    toggleRandomNotes() {
+        if (this.running === false) {
             this.running = true;
             this.playRandomNote();
         } else {
@@ -19,16 +19,16 @@ export class RandomNotes {
         }
     }
 
-    playRandomNote () {
-        if(this.running === true) {
+    playRandomNote() {
+        if (this.running === true) {
             let xAxis = Math.random();
             let yAxis = Math.random();
             if (this._simulateCanvasClick) {
                 this._simulateCanvasClick([xAxis, yAxis]);
             }
-            let time = Math.floor((Math.random() * 1000) + 50);
+            let time = Math.floor((Math.random() * 3000) + 50);
             this.timeout = setTimeout(() => this.playRandomNote(), time);
-    };
-    
+        }
+        ;
     }
 }