random width of buildings

assets/css/app.scss

@@ -24,6 +24,17 @@ header[role="banner"]{
   padding:1em;
   pointer-events: none;
   h1{
+    font-weight: 400;
+    font-size: 1.323em;
+    sup{
+      background-color: #1a1a1a;
+      border-radius: 5px;
+      color: #fff;
+      padding:0.1em 0.3em;
+      font-size: 0.5em;
+    }
+  }
+  h2{
     font-weight: 400;
     font-size: 1em;
   }

src/App.vue

@@ -6,8 +6,9 @@
           class="site-title"
           tabindex="0"
         >
-          Muntadas
+          Media Architecture Projects <sup>ALPHA</sup>
         </h1>
+        <h2>Antoni Muntadas</h2>
       </div>
     </header>
     <section role="main-content">
@@ -20,7 +21,7 @@
             <!-- <orbit-controls ref="cam_controls" :position="init_cam_pos" :rotation="{ x: 0, y: 0, z: 0 }">
               <camera />
             </orbit-controls> -->
-            <camera ref="camera" :position="init_cam_pos" :rotation="{x:0, y:0, z:0}" />
+            <camera ref="camera" :position="init_cam_pos" :rotation="init_cam_rot" />
 
             <!-- <light :hex="0xffffff" :intensity="5" :position="{x:-100,y:150,z:50}" />
             <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" :options="light_opts" /> -->
@@ -186,6 +187,8 @@ export default {
       },
       // cam_controls: null,
       init_cam_pos: { x: 0, y: 10, z: 100 },
+      // init_cam_pos: { x: 0, y: 150, z: 0 },
+      // init_cam_rot: { x: this.deg2rad(180), y: 0, z: 0 },
       raycaster: new THREE.Raycaster(),
       interactive_objects_names: ['Project', 'Content'],
       interactive_objects: [],
@@ -207,6 +210,11 @@ export default {
       }
     }
   },
+  watch: {
+    projects (n, o) {
+      console.log(`watch projects new, old`, n, o)
+    }
+  },
   created () {
     if (!this.projects.length) {
       this.getProjects()

src/components/objects/Project.vue

@@ -73,9 +73,10 @@ export default {
       // opacity: 0.6
       // renderOrder: 0
     },
-    size: { x: 35, y: 10, z: 10 },
-    position: { x: 5, y: 5, z: 0 },
-    label_position: { x: 5, y: 5, z: 6 },
+    // size and positions are defined in store project
+    size: { x: 0, y: 0, z: 0 },
+    position: { x: 0, y: 0, z: 0 },
+    label_position: { x: 0, y: 0, z: 0 },
     color: 0xffffff,
     label_canvas: null,
     label_size: null,
@@ -94,10 +95,12 @@ export default {
   created () {
     console.log('Project created: data', this.data)
     // randomize size and positions
-    this.size.y = 100 + Math.random() * 90
-    this.size.z = 10 + Math.random() * 30
+    // this.size.x = ... // it's
+    this.size = { ...this.data.size }
+    // this.size.y = 100 + Math.random() * 90
+    // this.size.z = 10 + Math.random() * 30
 
-    this.position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
+    this.position.x = this.data.position.x// (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
     this.position.y = -1 * this.size.y / 2 + 10 + Math.random() * 30// -10 + Math.random() * this.size.y / 2
     this.position.z = -10 + Math.random() * 10
 

src/store/modules/projects.js

@@ -14,7 +14,35 @@ export default {
   // mutations
   mutations: {
     setProjects (state, projects) {
+      // record the retrieved data
       state.projects = projects
+
+      // randomly define building sizes
+      let totalW = 0
+      for (var i = 0; i < state.projects.length; i++) {
+        let w = Math.round(21 + Math.random() * 15)
+        totalW += w
+        state.projects[i].size = {
+          x: w,
+          y: Math.round(100 + Math.random() * 250),
+          z: Math.round(10 + Math.random() * 30)
+        }
+      }
+
+      // positioning buildings on x regarding the widths
+      let margin = 5
+      totalW += margin * (state.projects.length - 1)
+      for (var j = 0; j < state.projects.length; j++) {
+        let x = -1 * totalW / 2// + state.projects[0].size.x / 2
+        for (var k = 0; k < j; k++) {
+          x += state.projects[k].size.x
+        }
+        x += margin * j
+        x += state.projects[j].size.x / 2
+        state.projects[j].position = {
+          x: x
+        }
+      }
     }
   },