Pop

src/scripts/physicsLayout.js

@@ -18,9 +18,11 @@ var render = Render.create({
              });
               
 var ceiling = Bodies.rectangle(window.innerWidth/2, 0, window.innerWidth, 60, { isStatic: true });
-var floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight-30, window.innerWidth, 60, { isStatic: true });
+var floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight-100, window.innerWidth, 60, { isStatic: true });
 var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
 var rightWall = Bodies.rectangle(window.innerWidth, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
+var title = Bodies.rectangle(window.innerWidth/2, 0, 300, 200, { isStatic: true });
+var timeline = Bodies.rectangle(window.innerWidth-60, window.innerHeight-150, 150, 150, { isStatic: true });
 
 // Get SVG
 var sampleSVG = document.getElementsByClassName("shape");
@@ -30,30 +32,34 @@ color = ['#556270'];
 var frags = [];
 for(let i = 0; i < sampleSVG.length; i++) {
     path = sampleSVG[i];
+    console.log(path);
     var v = Bodies.fromVertices(100+(i*80), 80, Svg.pathToVertices(path, 20), {
       render: {
         fillStyle: color,
         strokeStyle: color
-      }
+      },
+      position: {
+        x: window.innerWidth/2 + (Math.random() - 0.5) * window.innerWidth*0.8,
+        y: window.innerHeight/3 + (Math.random() - 0.5) * window.innerHeight*0.3
+      },
+      mass: 0.01,
+      restitution: 0.5,
+      name: path.parentNode.id
     }, true);
 
-    v.position.x *= 0.8;
-    v.position.y *= 0.8;
-    v.mass = 1;
-    v.restitution = 0.3;
-    v.name = path.parentNode.id
-    // vertexSets.push(v);
+    let el = document.getElementById(path.parentNode.id)
+    el.setAttribute("visibility", "hidden")
+
     frags.push(v);
 };
 
 // vertexSets.push(ground)
 
 console.log(engine.world);
-engine.world.gravity = {scale: 0.0001, x: 0, y: -1}
+engine.world.gravity = {scale: 0.0001, x: 0, y: 0}
 
-World.add(engine.world, [ceiling, floor, leftWall, rightWall]);
-World.add(engine.world, frags);
-// World.add(engine.world, [boxA, ballA, ballB, ground]);
+World.add(engine.world, [ceiling, floor, leftWall, rightWall, title, timeline]);
+// World.add(engine.world, frags);
 
 Engine.run(engine);
 Render.run(render);
@@ -63,15 +69,31 @@ THRESHOLD = 0;
 
 window.addEventListener("resize", ()=>{
   // TODO : complete resize function
-  console.log(window.innerWidth);
-  console.log(window.innerHeight);
+  // console.log(window.innerWidth);
+  // console.log(window.innerHeight);
 
-  // var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight);
+  // // var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight);
   var rightWall = Bodies.rectangle(window.innerWidth, window.innerHeight/2, 60, window.innerHeight);
 
   rightWall.position.x = window.innerWidth;
 })
 
+let count = 0;
+let duration = 800;
+let addFrags = ()=>{
+  if (count >= frags.length){
+    return;
+  }else{
+    let el = document.getElementById(frags[count].name);
+    el.setAttribute("visibility", "visible")
+    World.add(engine.world, frags[count]);
+    count += 1;
+    duration *= 0.85;
+    setTimeout(addFrags, duration)
+  }
+}
+addFrags();
+
 setInterval(()=>{
   for(let i = 0; i < frags.length; i++) {
     frags[i].angle = 0; // lock rotation
@@ -83,4 +105,7 @@ setInterval(()=>{
     // } 
   }
 }, 15)
+
+
+
 // document.querySelector("svg").remove();

src/style/authors.css

@@ -0,0 +1,21 @@
+canvas {
+    display: none;
+    width:100%;
+    height:100%;
+}
+
+* {
+    /* transition: 0.1s; */
+}
+
+.shape {
+    fill: #888888;
+    fill: rgba(0,0,0,0);
+}
+
+svg {
+    position: fixed;
+    top: 80px;
+    height: calc(100vh - 100px);
+    width: 100vw;
+}

src/style/common.css

@@ -283,9 +283,6 @@
           margin:10px;
         }
 
-        /* FRAGMENTS !!!TEMP!!! */
-        svg#authors{max-height:860px;}
-
       }
 
       @media ( min-width: 1080px ) {