sketch.js: add 3D text

sketch.js

@@ -133,6 +133,32 @@ class OrbitingObject {
   }
 }
 
+class Text3D {
+  constructor(fromColor, toColor, textString, position_x, position_y) {
+    this.position_x = position_x
+    this.position_y = position_y
+    this.fromColor = fromColor;
+    this.toColor = toColor;
+    this.textString = textString;
+    this.depth = 150; // Number of layers for 3D effect
+    this.depthSpacing = 0.15; // Depth spacing between layers
+  }
+
+  display() {
+    push();
+    for (let i = 0; i < this.depth; i++) {
+      let r = map(i, 0, this.depth - 1, this.fromColor[0], this.toColor[0]);
+      let g = map(i, 0, this.depth - 1, this.fromColor[1], this.toColor[1]);
+      let b = map(i, 0, this.depth - 1, this.fromColor[2], this.toColor[2]);
+
+      fill(r, g, b);
+      translate(0, 0, this.depthSpacing);
+      text(this.textString, this.position_x, this.position_y);
+    }
+    pop();
+  }
+}
+
 function preload() {
   onion_stroke = loadModel('./assets/onion_stroke.obj');
   onion_fill = loadModel('./assets/onion_fill.obj');
@@ -147,6 +173,11 @@ function setup() {
   textAlign(CENTER, CENTER);
   randomSeed()
 
+  // Initialize 3D text
+  startGradient = [210, 0, 255]; // Start color
+  endGradient = [0, 255, 180];   // End color
+  text3D = new Text3D(startGradient, endGradient, "PLACEHOLDER", 0, 350);
+
   // Initialize the onion object with radius, angles, and scale
   onionObj = new RotatingOnion({ x: 0, y: random(360), z: 180 }, globalScaleVar);
 
@@ -171,12 +202,12 @@ function draw() {
   specularMaterial(255, 255, 255);
 
   directionalLight(
-    210, 0, 255, // color
+    startGradient[0], startGradient[1], startGradient[2], // color
     -180, 180, 0  // direction
   );
 
   directionalLight(
-    0, 255, 180, // color
+    endGradient[0], endGradient[1], endGradient[2], // color
     180, -180, 0 // direction
   );
 
@@ -186,8 +217,8 @@ function draw() {
   // Display the onion and its orbiting objects
   onionObj.display();
 
-  fill(255, 255, 255);
+  // Display 3D text
-  text('PLACEHOLDER', 0, 350);
+  text3D.display();
 }
 
 function windowResized() {