bostongfx · sachijoshi · Sep 8, 2024 · Sep 12, 2024 · Sep 16, 2024 · Sep 17, 2024
diff --git a/01/index.html b/01/index.html
@@ -48,19 +48,36 @@ <h1>RO.ME "3 DREAMS OF BLACK"</h1>
     <div class='demo'>
 
       <!-- TODO: REPLACE WITH A SCREENSHOT OF RO.ME -->
-      <img id='screenshot' src='https://placehold.co/300x300'>
+      <img src="screenshot.jpg" class="center">
       <p id='description'>
       <!-- TODO: FILL IN YOUR DESCRIPTION -->
-      RO.ME is a very cool webgl demo!
+      RO.ME is a very cool webgl demo! It takes place in the first person point of view (the user of the site is experiencing the web around them
+      like the person in the site). The person goes through various sceneries, which include waking up in a room, driving through the street and
+      even a train ride. As the person is going through these different places the world around the user morphs into different animals and plants,
+      and it even transforms those animals into different ones very smoothly. It is a cool web to look at at least once.
+      I really liked it, because it wasn't hyperrealistic like other models and you could tell that it was created by using code and such.
+      I also liked the fact that it was the point of view of the person in the video like as the viewer we were experiencing it, and that
+      made the experience better since it was like the movmenets of looking around like ones I would do too. It's honestly so impressive
+      the way it was made and this aspect of cs has me really interested in what I could potentially do with it.
       </p>
       <p id='technology'>
-      Technology: TODO! <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
+      Technology:  <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
+      2D graphics, video, 3D graphics, WebGL, code
       </p>
+      <a href="https://le-voyage-azarien.art/"> Azarian Journey</a>
       <p id='comparison'>
-      Comparison: TODO! <!-- TODO: FILL IN THE COMPARISON -->
+      Comparison:  <!-- TODO: FILL IN THE COMPARISON -->
+      I compared the ROME site to The Azarian Journey [link above].
+      This site was a lot calmer than the ROME site, in the sense that the music and story line were
+      very tame and there wasn't a lot of overstimulation, but I liked both sites in their own way.
+      In this site you weren't able to move around so much, but the story was spoken to you and
+      you could choose between French and English which I thought was a cool feature. One thing I did
+      like about the Azarian Journey was that there were different pin points along the bottom if you
+      wanted to jump back and forth between different segments, but for the ROME site you had to
+      rewatch the whole thing just to see one aspect again. Both were super cool sites though, I hope
+      my final proj can be cool like those lol
       </p>
 
-
       <div id='bonus'>
         <!-- TODO: BONUS TASK GOES HERE -->
       </div>

diff --git a/01/screenshot.jpg b/01/screenshot.jpg
diff --git a/02/Screenshot 2024-09-17 173752.jpg b/02/Screenshot 2024-09-17 173752.jpg
diff --git a/02/index.html b/02/index.html
@@ -1,16 +1,91 @@
 <html>
   <head>
+    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+    <script type="text/javascript" src="loader.js"></script>
     <title>CS460.org Assignment 2</title>
     <style>
       body {
-        background-color:#000;
+        background-color: #000;
         margin: 0;
         padding: 0;
         height: 100%;
-        overflow: hidden !important; 
+        overflow: hidden !important;
       }
     </style>
+    <script>
+
+      let isSpinning = false;
+
+      window.onload = function () {
+        r = new X.renderer3D();
+        r.init();
+        c = new X.cube();
+        r.add(c);
+        r.render();
+      };
+
+      window.addEventListener('keydown', function (e) {
+        CUBE_SIDELENGTH = 10;
+        GAP = 2;
+
+        if (e.code === 'KeyD') {
+          c.transform.translateX(-CUBE_SIDELENGTH - GAP);
+        } else if (e.code === 'KeyA') {
+          c.transform.translateX(CUBE_SIDELENGTH + GAP);
+        } else if (e.code === 'KeyW') {
+          c.transform.translateY(CUBE_SIDELENGTH + GAP);
+        } else if (e.code === 'KeyS') {
+          c.transform.translateY(-CUBE_SIDELENGTH - GAP);
+        } else if (e.code === 'KeyQ') {
+          c.transform.translateZ(CUBE_SIDELENGTH + GAP);
+        } else if (e.code === 'KeyE') {
+          c.transform.translateZ(-CUBE_SIDELENGTH - GAP);
+        } else if (e.code === 'Digit1') {
+          c.color = [1, 1, 1];
+        } else if (e.code === 'Digit2') {
+          c.color = [1, 0, 0];
+        } else if (e.code === 'Digit3') {
+          c.color = [0, 1, 0];
+        } else if (e.code === 'Digit4') {
+          c.color = [0, 0, 1];
+        } else if (e.code === 'Digit5') {
+          c.color = [1, 1, 0];
+        } else if (e.code === 'Digit6') {
+          c.color = [1, 0, 1];
+        } else if (e.code === 'Digit7') {
+          c.color = [0, 1, 1];
+        } else if (e.code === 'Digit0') {
+          c.color = [0, 0, 0];
+        }
+        else if (e.code === 'Space') {
+          let new_cube = new X.cube();
+          new_cube.color = c.color;
+          new_cube.transform.matrix = new Float32Array(c.transform.matrix);
+          new_cube.lengthX = new_cube.lengthY = new_cube.lengthZ = CUBE_SIDELENGTH;
+          r.add(new_cube);
+        } 
+        if (e.code === 'KeyO') {
+          download();
+
+        } if (e.code === 'KeyL') {
+          console.log("uploaded");
+          upload("scene.json");
+        } 
+        if (e.code === 'KeyB') {
+          if (!isSpinning) {
+            r.onRender = function () {
+              r.camera.rotate([1, 0]); 
+            };
+            isSpinning = true;
+          } else {
+            r.onRender = null;
+            isSpinning = false;
+          }
+        }
+      });
+
+    </script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>
+
diff --git a/02/scene.json b/02/scene.json
diff --git a/03/blob.jpg b/03/blob.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,51 +1,121 @@
-<html>
-  <head>
-    <style>
-      html, body { 
-        background-color:#000;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        overflow: hidden !important;  
-      }
-    </style>
-
-    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-    <script type="importmap">
-    {
-      "imports": {
-        "three": "https://unpkg.com/three@latest/build/three.module.js",
-        "three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
-      }
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Assignment 5 - Three.js Scene</title>
+  <style>
+    html, body { 
+      background-color: #000;
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
     }
-    </script>
+  </style>
+
+  <!-- Import Map for Three.js and Addons -->
+  <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@latest/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
+    }
+  }
+  </script>
 
-    <script type="module">
+  <script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
+    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-      import * as THREE from 'three';
-      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';      
+    let renderer, scene, camera, controls, effect;
 
-      var renderer, controls, scene, camera;
+    function init() {
+      // Scene and Camera setup
+      scene = new THREE.Scene();
 
-      window.onload = function() {
+      const fov = 75;
+      const aspect = window.innerWidth / window.innerHeight;
+      const zNear = 0.1;
+      const zFar = 10000;
+      camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
+      camera.position.set(0, 10, 0); // Camera positioned as instructed
 
-        // Three.js code goes here
-
-        // call animation/rendering loop
-        animate();
-
-      };
+      // Renderer setup
+      renderer = new THREE.WebGLRenderer({ antialias: true });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      document.body.appendChild(renderer.domElement);
 
-      function animate() {
+      // OrbitControls for camera
+      controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
 
-        requestAnimationFrame( animate );
+      // AnaglyphEffect setup
+      effect = new AnaglyphEffect(renderer);
+      effect.setSize(window.innerWidth, window.innerHeight);
 
-        // and here..
-
-      };
-    </script>
-  </head>
-  <body></body>
-</html>
+      // Lights
+      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+      scene.add(ambientLight);
+
+      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+      directionalLight.position.set(10, 10, 10);
+      scene.add(directionalLight);
+
+      // Load Model with GLTFLoader
+      loadModel();
+
+      // Handle window resize
+      window.addEventListener('resize', onWindowResize);
+    }
+
+    function loadModel() {
+      const loader = new GLTFLoader();
+      loader.load(
+        'poly.glb', // Ensure poly.glb is in the same directory or adjust the path as needed
+        function (gltf) {
+          console.log("Model loaded successfully");
+
+          // Access the first child of the loaded scene
+          const poly = gltf.scene.children[0];
+
+          // Scale the model as per instructions
+          poly.scale.set(10, 10, 10);
+
+          // Add the loaded model to the scene
+          scene.add(gltf.scene);
 
+          console.log("Model added to the scene");
+        },
+        undefined,
+        function (error) {
+          console.error('An error occurred while loading the model:', error);
+        }
+      );
+    }
+
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      effect.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function animate() {
+      requestAnimationFrame(animate);
+      controls.update();
+      effect.render(scene, camera);
+    }
+
+    // Initialize scene on window load
+    window.onload = () => {
+      init();
+      animate();
+    };
+  </script>
+</head>
+<body></body>
+</html>
diff --git a/04/Screenshot 2024-10-11 175945.png b/04/Screenshot 2024-10-11 175945.png