My challenge involves smoothly scaling cubes with random initial scaling. However, I'm encountering an issue where the cubes scale almost identically after a short period of time, even though I'm utilizing a random noise function for scaling. Can you help me identify the problem in my code?
Take a look at the preview here and the live snippet here
You will notice that the cubes' scaling becomes nearly identical very quickly.
Below is the code snippet:
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);