Noise function produce identical scale to initially random cubes

Question

I'm trying to smoothly scale cubes with random initial scaling. The problem is that after some short time cubes scale almost identically, besides I'm using random noise function for scale. What's wrong with my code?

---

Preview is here https://twilight-sweatshirt.glitch.me/ Live snippet https://stackblitz.com/edit/react-gakauv

As you can see cubes scaling becomes almost identical very fast.

---

Here's my code

    const random = require("canvas-sketch-util/random");
    const palettes = require("nice-color-palettes");

    random.setSeed(19);

    const palette = random.pick(palettes);

    // Ensure ThreeJS is in global scope for the 'examples/'
    global.THREE = require("three");

    // Include any additional ThreeJS examples below
    require("three/examples/js/controls/OrbitControls");

    const canvasSketch = require("canvas-sketch");

    const settings = {
      // Make the loop animated
      animate: true,
      // duration: 5,
      fps: 30,
      playbackRate: "throttle",
      // Get a WebGL canvas rather than 2D
      context: "webgl",
      attributes: {
        antialias: true
      }
    };

    const sketch = ({ context }) => {
      //#region Scene setup
      // Create a renderer
      const renderer = new THREE.WebGLRenderer({
        canvas: context.canvas
      });

      renderer.setClearColor("aquamarine", 1);

      const camera = new THREE.OrthographicCamera();
      const controls = new THREE.OrbitControls(camera, context.canvas);
      const scene = new THREE.Scene();

      scene.add(new THREE.AmbientLight(0x404040));

      const light = new THREE.PointLight(0xffffff, 5, 15);
      light.position.set(-1, 2, 4).multiplyScalar(1.5);
      scene.add(light);

      const light2 = new THREE.PointLight(0xffffff, 1.5, 15);
      light2.position.set(3, 0, 2).multiplyScalar(1.5);
      scene.add(light2);

      const geometry = new THREE.BoxGeometry(1, 1, 1);

      const getNoise = (x, time) => {
        return random.noise2D(x, time, 0.5) * 0.5 + 0.5;
      };

      for (let index = 0; index < 2; index++) {
        const mesh = new THREE.Mesh(
          geometry,
          new THREE.MeshStandardMaterial({
            color: random.pick(palette),
            flatShading: true,
            roughness: 0.75
          })
        );
        mesh.name = `mesh-${index}`;
        mesh.position.set(
          random.range(-1, 1),
          random.range(-1, 1),
          random.range(-1, 1)
        );
        mesh.scale.set(
          random.range(0.04, 0.5),
          random.range(0.04, 0.5),
          random.range(0.04, 0.5)
        );
        scene.add(mesh);
      }
      //#endregion

      // draw each frame
      return {
        // Handle resize events here
        resize({ pixelRatio, viewportWidth, viewportHeight }) {
          renderer.setPixelRatio(pixelRatio);
          renderer.setSize(viewportWidth, viewportHeight, false);

          const aspect = viewportWidth / viewportHeight;

          // Ortho zoom
          const zoom = 1.5;

          // Bounds
          camera.left = -zoom * aspect;
          camera.right = zoom * aspect;
          camera.top = zoom;
          camera.bottom = -zoom;

          // Near/Far
          camera.near = -100;
          camera.far = 100;

          // Set position & look at world center
          camera.position.set(zoom, zoom, zoom);
          camera.lookAt(new THREE.Vector3());

          // Update the camera
          camera.updateProjectionMatrix();
        },
        // Update & render your scene here
        render({ time, playhead }) {
          scene.children.forEach(obj => {
            if (obj.isMesh !== true) {
              return;
            }
            // console.log(`${obj.name}: `,getNoise(obj.scale.z, time));
            // console.log(scene);
            obj.scale.set(
              // obj.scale.x,
              // obj.scale.y,
              // obj.scale.z,
              getNoise(obj.scale.x, time),
              getNoise(obj.scale.y, time),
              getNoise(obj.scale.z, time)
            );
          });

          controls.update();
          renderer.render(scene, camera);
        },
        // Dispose of events & renderer for cleaner hot-reloading
        unload() {
          controls.dispose();
          renderer.dispose();
        }
      };
    };

    canvasSketch(sketch, settings);

Answer 1

For the maximum calculation, the noise difference was much so it was flickering the box.

Try Setting these parameters

return random.noise2D(x, time, 0.8) * 0.2 + 0.5;
OR
return random.noise2D(x, time, 0.7) * 0.3 + 0.5;
OR
return random.noise2D(x, time, 0.6) * 0.4 + 0.5;

Choose as per your frequency.

See, if this is what your were looking for https://stackblitz.com/edit/react-hhurr3?file=index.js