meowshapes

Update

The update() function allows you to run a callback on each frame update. This is useful for creating animations and dynamic behaviors in your scene.

An object spawned in the update function will be cleared at the start of the next frame, meaning that you can safely animate otherwise static properties.

grid();

update((dt, elapsed) => {
    const x = Math.cos(elapsed) * 64;
    const z = Math.sin(elapsed) * 64;

    sphere(16).pos([x, 0, z]);
});

The callback inside the update() function has two parameters:

  • dt: Delta time in seconds since last frame
  • elapsed: Elapsed time in seconds since the start of the animation

Performance

Since objects are cleared and spawned each frame, defining complex scenes inside the update function may lead to poor performance. For complex animations and transformation, consider spawning the objects outside of the update function and modifying their properties within the update callback.

This is more performant:

const sphereObject = sphere(32);

update((dt, elapsed) => {
    sphereObject.pos([elapsed, 0, 0]);
});

Than this:

update((dt, elapsed) => {
    sphere(32).pos([elapsed, 0, 0]);
});

For simple scenes like the one above, the difference in performance is negligible.

meowshapes