sketch.js: make 3D text follow camera

sketch.js

@@ -142,9 +142,13 @@ class Text3D {
     this.textString = textString;
     this.depth = 150; // Number of layers for 3D effect
     this.depthSpacing = 0.15; // Depth spacing between layers
+    this.rotationY = 0;
   }
 
   display() {
+    // Apply rotation toward the camera
+    rotateY(this.rotationY);
+
     push();
     for (let i = 0; i < this.depth; i++) {
       let r = map(i, 0, this.depth - 1, this.fromColor[0], this.toColor[0]);
@@ -157,6 +161,20 @@ class Text3D {
     }
     pop();
   }
+
+  update() {
+    // Get the camera position
+    let camX = camera.eyeX;
+    let camZ = camera.eyeZ;
+
+    // Get the camera position
+    let targetRotY = atan2(camX, camZ); // Calculate target Y rotation
+
+    // Ensure shortest rotation path by normalizing angles
+    let delta = (targetRotY - this.rotationY + 540) % 360 - 180; // Keeps within -180 to 180 range
+    this.rotationY += delta * 0.05; // Interpolate rotation smoothly
+  }
+
 }
 
 function preload() {
@@ -173,6 +191,9 @@ function setup() {
   textAlign(CENTER, CENTER);
   randomSeed()
 
+  // Initialize camera to get its position
+  camera = createCamera();
+
   // Initialize 3D text
   startGradient = [210, 0, 255]; // Start color
   endGradient = [0, 255, 180];   // End color
@@ -211,13 +232,12 @@ function draw() {
     180, -180, 0 // direction
   );
 
-  // Update the onion object
+  // Update objects
   onionObj.update();
+  text3D.update();
 
-  // Display the onion and its orbiting objects
+  // Display the onion, orbiting objects and the 3D text
   onionObj.display();
-
-  // Display 3D text
   text3D.display();
 }