participants

test_data/src/scripts/physicsLayout.js

@@ -2,6 +2,7 @@ const SCALAR = 1;
 const THRESHOLD = 0;
 const INIT_DURATION = 300;
 const INIT_RATIO = 0.9;
+let maxY = 0;
 
 var Engine = Matter.Engine,
     Render = Matter.Render,
@@ -22,12 +23,11 @@ var render = Render.create({
                 }
              });
               
-var ceiling = Bodies.rectangle(window.innerWidth/2, 0, window.innerWidth, 60, { isStatic: true });
+var ceiling = Bodies.rectangle(render.canvas.width/2, 0, render.canvas.width, 120, { isStatic: true, friction:0, restitution:10});
-var floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight-100, window.innerWidth, 60, { isStatic: true });
+var leftWall = Bodies.rectangle(0, window.innerHeight/2, 5, window.innerHeight, { isStatic: true, friction:0, restitution:10});
-var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
+var rightWall = Bodies.rectangle(render.canvas.width, window.innerHeight/2, 5, window.innerHeight, { isStatic: true, friction:0, restitution:10}); //update
-var rightWall = Bodies.rectangle(window.innerWidth, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
+var floor = Bodies.rectangle(render.canvas.width/2, window.innerHeight, render.canvas.width, 240, { isStatic: true, friction:0, restitution:10});
-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");
@@ -35,53 +35,53 @@ var vertexSets = [],
 color = ['#556270'];
 
 var frags = [];
+var initY = 0;
 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,
+        x: window.innerWidth/2 + (Math.random() - 0.5) * window.innerWidth*0.25,
-        y: window.innerHeight/3 + (Math.random() - 0.5) * window.innerHeight*0.3
+        y: initY//window.innerHeight/2 + (Math.random() - 0.4) * window.innerHeight*0.5
       },
-      mass: 0.01,
+      mass: Math.random(),
       restitution: 0.5,
+      friction:0,
+      staticFriction:0,
       name: path.parentNode.id
     }, true);
-
+    initY = (window.innerWidth>960)?initY+10:initY+75;
+    console.log(initY);
     let el = document.getElementById(path.parentNode.id)
     el.setAttribute("visibility", "hidden")
 
     frags.push(v);
-};
+  };
 
-// vertexSets.push(ground)
+  frags.sort((a,b)=>{return (a.position.y-b.position.y)})
-
+  engine.world.gravity = {scale: 0.0001, x: 0, y: 0}
-console.log(engine.world);
+  World.add(engine.world, [ceiling, leftWall, rightWall]);
-engine.world.gravity = {scale: 0.0001, x: 0, y: 0}
+  if(render.canvas.width>860) World.add(engine.world, floor)
-
+  Engine.run(engine);
-World.add(engine.world, [ceiling, floor, leftWall, rightWall, title, timeline]);
+  Render.run(render);
-// World.add(engine.world, frags);
-
-Engine.run(engine);
-Render.run(render);
 
 
-window.addEventListener("resize", ()=>{
+// window.addEventListener("resize", ()=>{
-  // TODO : complete resize function
+//   // TODO : complete resize function
-  // console.log(window.innerWidth);
+//   // console.log(window.innerWidth);
-  // console.log(window.innerHeight);
+//   // 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);
+//   var rightWall = Bodies.rectangle(window.innerWidth, window.innerHeight/2, 60, window.innerHeight);
 
-  rightWall.position.x = window.innerWidth;
+//   rightWall.position.x = window.innerWidth;
-})
+// })
 
-let count, duration = 0, INIT_DURATION;
+let count = 0, duration = 500//INIT_DURATION;
 let addFrags = ()=>{
   if (count >= frags.length){
     return;
@@ -91,7 +91,8 @@ let addFrags = ()=>{
     World.add(engine.world, frags[count]);
     count += 1;
     duration *= INIT_RATIO;
-    setTimeout(addFrags, duration)
+    // addFrags();
+    setTimeout(addFrags, 50);
   }
 }
 addFrags();
@@ -100,14 +101,38 @@ setInterval(()=>{
   for(let i = 0; i < frags.length; i++) {
     frags[i].angle = 0; // lock rotation
     let el = document.getElementById(frags[i].name);
-    // if((frags[i].velocity.x > THRESHOLD) && (frags[i].velocity.y > THRESHOLD)){
     let x = frags[i].bounds.min.x * SCALAR
     let y = frags[i].bounds.min.y * SCALAR
     el.setAttribute('transform', "translate("+x+","+y+")");
-    // } 
   }
+
+  let bodies = engine.world.bodies.filter(body => body.label === "Body");
+  maxY = bodies.sort((a, b) => (b.position.y - a.position.y))[0].position.y;
+  if (maxY > getDocumentHeight()) return;
+
+  render.canvas.height = Math.max(window.innerHeight, maxY + 100);
+  document.querySelector('#authors').style.height = render.canvas.height;
+  
+  if(leftWall.position.y+window.innerHeight/2 <getDocumentHeight()){
+    leftWall = Bodies.rectangle(0, leftWall.position.y + render.canvas.width, 60, window.innerHeight, { isStatic: true });
+    rightWall = Bodies.rectangle(render.canvas.width, rightWall.position.y + window.innerHeight, 60, window.innerHeight, { isStatic: true }); //update
+    World.add(engine.world, [leftWall, rightWall]);
+  }
+
 }, 15)
 
 
+// 현재 스크롤한 높이를 구하는 함수 
+function getScrollTop() {
+  return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+}
+// 문서의 높이를 구하는 함수
+function getDocumentHeight() {
+  const body = document.body;
+  const html = document.documentElement;
   
-// document.querySelector("svg").remove();
+  return Math.max(
+      body.scrollHeight, body.offsetHeight,
+      html.clientHeight, html.scrollHeight, html.offsetHeight
+  );
+}