From 3232913c814231e6766b0b6ee9b0aa408362273e Mon Sep 17 00:00:00 2001
From: Tymoteusz Burak <tymbur@gmail.com>
Date: Sat, 22 Feb 2025 04:24:54 +0100
Subject: [PATCH] sketch.js: make 3D text follow camera

---
 sketch.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/sketch.js b/sketch.js
index 41a3c04..87fe4c2 100644
--- a/sketch.js
+++ b/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();
 }