3D Render With JS

colorMode(HSB, nums.x * nums.y, 1, 1) Is your answere. Apply it in the update function and play around with the colors by altering 'nums.x * nums.y' values.

Use a timer or a simple tick (you can simply do tick++ in the update function) as a modifier until it reaches a certain iteration and then reset (or jump the value). You should get the desired effect.

Okey.. apparently I'm procrastinating and spent the last hour playing around with your Repl..

This might not be exactly what you're after, but maybe it'll help some..

  class Cube {
    constructor(x_, y_, z_, size_, offset_) {
    this.x = x_;
    this.y = y_;
    this.z = z_;
    this.size = size_;
    this.offset = offset_;
    this.angle = 0;
    
    this.tick = 1;   // starting point
    this.hueSpeed = 2;   // tick modifier
  }

  
  update(f) {
    this.y = map(f(this.angle + this.offset), -1, 1, this.size / 2, height - this.size / 2);
    this.angle += 0.05;
    colorMode(HSB, this.tick, 1, 1);

    /** 
    * The request is there to simply regulate the frequency of the tick a bit.. 
    * Though we do need to cancel the previous request if hadn't yet fired
    * Which I'm apparently to lazy to do atm
    */
    window.requestAnimationFrame((e)=>{
      this.tick += this.hueSpeed;
      (this.tick > 150 || this.tick < 2) && (this.hueSpeed *= -1);
    });
  }

  render() {
    push();
    stroke(0);
    translate(this.x, this.y, this.z);
    box(this.size);
    pop();
  }
}

This is the cube.js script file, the only one altered.