README.md

@@ -1,10 +1,4 @@
-# Running locally
+Run with `python3 -m http.server`
-
-```sh
-python3 -m http.server 8080
-```
-
-Then simply go to [http://0.0.0.0:8080](http://0.0.0.0:8080) in your browser.
 
 # Acknowledgement
 

sketch.js

@@ -15,9 +15,9 @@ class RotatingOnion {
   }
 
     // Add an orbiting object to the onion
-  addOrbitingObject(model, orbitRadius, speed, scale, tiltAngleX, tiltAngleY) {
+  addOrbitingObject(orbitRadius, speed, scale, tiltAngleX, tiltAngleY) {
     const tiltAngle = { x: tiltAngleX, y: tiltAngleY };  // Pass both X and Y tilt angles
-    this.orbitingObjects.push(new OrbitingObject(this, model, orbitRadius, speed, scale, tiltAngle));
+    this.orbitingObjects.push(new OrbitingObject(this, orbitRadius, speed, scale, tiltAngle));
   }
 
   update() {
@@ -40,11 +40,7 @@ class RotatingOnion {
     rotateY(this.angles.y);
     rotateZ(this.angles.z);
     scale(this.scale);
-    model(onion_stroke);
+    model(onion);
-    push()
-      emissiveMaterial(backgroundColor)
-      model(onion_fill);
-    pop()
 
     // Display all orbiting objects
     for (let obj of this.orbitingObjects) {
@@ -70,18 +66,11 @@ class RotatingOnion {
 }
 
 class OrbitingObject {
-  constructor(parent, model, orbitRadius, speed, scale, tiltAngle) {
+  constructor(parent, orbitRadius, speed, scale, tiltAngle) {
     this.parent = parent; // The parent object (Onion)
-    this.model = model
     this.orbitRadius = orbitRadius;
     this.speed = speed;  // Orbiting speed (angular speed)
     this.scale = scale;
-    this.rotationAngle_x = random(360);
-    this.rotationAngle_y = random(360);
-    this.rotationAngle_z = random(360);
-    this.rotationSpeed_x = random(0.5, 2);
-    this.rotationSpeed_y = random(0.5, 2);
-    this.rotationSpeed_z = random(0.5, 2);
 
     this.angle = random(360); // Start at a random position in the orbit
     this.tiltAngle = tiltAngle;
@@ -91,11 +80,6 @@ class OrbitingObject {
     // Update the angle to simulate rotation around the parent
     this.angle += this.speed;
 
-    // Rotate in place
-    this.rotationAngle_x += this.rotationSpeed_x;
-    this.rotationAngle_y += this.rotationSpeed_y;
-    this.rotationAngle_z += this.rotationSpeed_z;
-
     // Calculate the position of the orbiting object in the un-tilted plane
     const x = this.orbitRadius * cos(this.angle);
     const z = this.orbitRadius * sin(this.angle);
@@ -121,94 +105,32 @@ class OrbitingObject {
   display() {
     push();
     translate(this.x, this.y, this.z); // Move to the correct orbit position
-
+    sphere(this.scale); // Display the object (could be another model or shape)
-    // Apply in-place rotation
-    rotateX(this.rotationAngle_x)
-    rotateY(this.rotationAngle_y);
-    rotateZ(this.rotationAngle_z)
-
-    scale(this.scale);
-    model(this.model);
     pop();
   }
 }
 
-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 = 30; // Number of layers for 3D effect
-    this.depthSpacing = 0.60; // 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]);
-      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();
-  }
-
-  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() {
-  onion_stroke = loadModel('./assets/onion_stroke.obj');
+  onion = loadModel('./assets/onion.obj');
-  onion_fill = loadModel('./assets/onion_fill.obj');
   font = loadFont('./assets/jgs5.ttf');
 }
 
 function setup() {
   createCanvas(windowWidth, windowHeight, WEBGL);
   angleMode(DEGREES);
-  noStroke();
+  ambientMaterial(0, 0, 0, 0);
+  stroke(255);
+  strokeWeight(0.5);
   textFont(font, 60);
   textAlign(CENTER, CENTER);
   randomSeed()
 
-  // Background color
-  backgroundColor = [0, 0, 0];
-
-  // Initialize camera to get its position
-  camera = createCamera();
-
-  // 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);
 
   // Add orbiting objects to the onion
   for (let i = 1.8; i <= 4.8; i += 0.6) {
     onionObj.addOrbitingObject(
-      onion_fill,
       i,
       random(0.1, 0.8),
       globalScaleVar * 0.0001 * random(1, 6),
@@ -219,29 +141,18 @@ function setup() {
 }
 
 function draw() {
-  background(backgroundColor);
+  background(0);
+  noFill();
   orbitControl();
-  ambientLight(100);
-  shininess(0);
-  specularMaterial(255, 255, 255);
 
-  directionalLight(
+  // Update the onion object
-    startGradient[0], startGradient[1], startGradient[2], // color
-    -180, 180, 0  // direction
-  );
-
-  directionalLight(
-    endGradient[0], endGradient[1], endGradient[2], // color
-    180, -180, 0 // direction
-  );
-
-  // Update objects
   onionObj.update();
-  text3D.update();
 
-  // Display the onion, orbiting objects and the 3D text
+  // Display the onion and its orbiting objects
   onionObj.display();
-  text3D.display();
+
+  fill(255, 255, 255);
+  text('PLACEHOLDER', 0, 350);
 }
 
 function windowResized() {