Fix minors...

test_data/src/introduction.json

@@ -128,7 +128,7 @@
     },
     {
         "name":"신재",
-        "path":"Jae%20Shin",
+        "path":"Jae_Shin",
         "fragId":"jaeShin",
         "introduction":"하고 싶은 이야기, 들어야할 말을 품고 있는 사람들과 공동작업하기 위해 2017년부터 프로젝트 형식으로 운영되는 팀 ‘0set프로젝트’를 만들어 활동하고 있다. 0set프로젝트는 사회적·문화적으로 당연하게 받아들여지는 ‘명제’를 저울 위에 놓고 다시 사유하고자 조사, 인터뷰, 워크숍, 기록 등을 진행하고 있으며 그 과정 중 일부를 공연으로 제작한다."
     },

test_data/src/scripts/physicsLayout.js

@@ -2,8 +2,9 @@ const SCALAR = 1;
 const THRESHOLD = 0;
 const INIT_DURATION = 300;
 const INIT_RATIO = 0.9;
-let maxY = 0;
 
+
+// set-up engine
 var Engine = Matter.Engine,
     Render = Matter.Render,
     World = Matter.World,
@@ -22,12 +23,12 @@ var render = Render.create({
                     wireframes: false,
                 }
              });
-              
 var ceiling = Bodies.rectangle(render.canvas.width/2, 0, render.canvas.width, 120, { isStatic: true, friction:0, restitution:10});
 var leftWall = Bodies.rectangle(0, window.innerHeight/2, 5, window.innerHeight, { isStatic: true, friction:0, restitution:10});
 var rightWall = Bodies.rectangle(render.canvas.width, window.innerHeight/2, 5, window.innerHeight, { isStatic: true, friction:0, restitution:10}); //update
 var floor = Bodies.rectangle(render.canvas.width/2, window.innerHeight, render.canvas.width, 240, { isStatic: true, friction:0, restitution:10});
 
+let maxY = 0;
 
 // Get SVG
 var sampleSVG = document.getElementsByClassName("shape");
@@ -45,7 +46,7 @@ for(let i = 0; i < sampleSVG.length; i++) {
         strokeStyle: color
       },
       position: {
-        x: window.innerWidth/2 + (Math.random() - 0.5) * window.innerWidth*0.25,
+        x: render.canvas.width/2 + (Math.random() - 0.5) * render.canvas.width*0.8 - 50,
         y: initY//window.innerHeight/2 + (Math.random() - 0.4) * window.innerHeight*0.5
       },
       mass: Math.random(),
@@ -54,7 +55,7 @@ for(let i = 0; i < sampleSVG.length; i++) {
       staticFriction:0,
       name: path.parentNode.id
     }, true);
-    initY = (window.innerWidth>960)?initY+10:initY+75;
+    initY += (window.innerWidth >= 960)?30:75;
     console.log(initY);
     let el = document.getElementById(path.parentNode.id)
     el.setAttribute("visibility", "hidden")

test_data/src/scripts/updateFragment.js

@@ -20,7 +20,7 @@ const participants = [
     { "name":"양승욱", "path":"Seungwook_Yang", "fragId":"seungwookYang"},
     { "name":"배인숙", "path":"Insook_Bae", "fragId":"insookBae"},
     { "name":"빈곤사회연대", "path":"Korean_Peoples_Solidarity_Against_Poverty", "fragId":"kpsap"},
-    { "name":"신재", "path":"Jae Shin", "fragId":"jaeShin"},
+    { "name":"신재", "path":"Jae_Shin", "fragId":"jaeShin"},
     { "name":"돌고래", "path":"", "fragId":"hyunjin"},
     { "name":"이두호", "path":"doohoyi", "fragId":"doohoyi"},
     { "name":"송수연", "path":"Song_Soo", "fragId":"songSoo"},
@@ -43,6 +43,7 @@ const THRESHOLD = 0;
 const INIT_DURATION = 300;
 const INIT_RATIO = 0.9;
 
+// set-up engine
 var Engine = Matter.Engine,
     Render = Matter.Render,
     World = Matter.World,
@@ -51,7 +52,6 @@ var Engine = Matter.Engine,
     Common = Matter.Common,
     Svg = Matter.Svg,
     Vertices = Matter.Vertices;
-
 var engine = Engine.create();
 var render = Render.create({
                 element: document.body,
@@ -62,7 +62,6 @@ var render = Render.create({
                     wireframes: false,
                 }
              });
-
 var ceiling = Bodies.rectangle(render.canvas.width/2, 0, render.canvas.width, 120, { isStatic: true, friction:0, restitution:0.5 });
 var leftWall = Bodies.rectangle(0, window.innerHeight/2, 60, window.innerHeight, { isStatic: true, friction:0, restitution:0.5 });
 var rightWall = Bodies.rectangle(render.canvas.width, window.innerHeight/2, 60, window.innerHeight, { isStatic: true, friction:0, restitution:0.5 }); //update
@@ -158,10 +157,11 @@ setInterval(()=>{
         count -= 1;    
     }
     scrollChanged = false;
-}, 30);
+}, 60);
 
 
 setInterval(()=>{
+    try{
         // update fragment position
         for(let i = 0; i < frag_disp.length; i++) {
             frag_disp[i].angle = 0; // lock rotation
@@ -177,7 +177,6 @@ setInterval(()=>{
             maxY = bodies.sort((a, b) => (b.position.y - a.position.y))[0].position.y;
             // if (maxY > getDocumentHeight()) return;
             
-
             // expand the height
             render.canvas.height = Math.max(window.innerHeight, maxY);
             document.querySelector('#frags').style.height = render.canvas.height + 200;
@@ -186,6 +185,9 @@ setInterval(()=>{
                 rightWall = Bodies.rectangle(render.canvas.width, rightWall.position.y + window.innerHeight, 60, window.innerHeight, { isStatic: true }); //update
                 World.add(engine.world, [leftWall, rightWall]);
             }
+    }catch(e){
+        //
+    }
   }, 15)
 
 let peelFragment = (arr) => {