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>

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);
- };
-
+  }
+  ;
  }
 }