diff --git a/test_data/src/introduction.json b/test_data/src/introduction.json index 4592059..40ff2fe 100644 --- a/test_data/src/introduction.json +++ b/test_data/src/introduction.json @@ -128,7 +128,7 @@ }, { "name":"신재", - "path":"Jae%20Shin", + "path":"Jae_Shin", "fragId":"jaeShin", "introduction":"하고 싶은 이야기, 들어야할 말을 품고 있는 사람들과 공동작업하기 위해 2017년부터 프로젝트 형식으로 운영되는 팀 ‘0set프로젝트’를 만들어 활동하고 있다. 0set프로젝트는 사회적·문화적으로 당연하게 받아들여지는 ‘명제’를 저울 위에 놓고 다시 사유하고자 조사, 인터뷰, 워크숍, 기록 등을 진행하고 있으며 그 과정 중 일부를 공연으로 제작한다." }, diff --git a/test_data/src/scripts/physicsLayout.js b/test_data/src/scripts/physicsLayout.js index 82baff9..759503f 100644 --- a/test_data/src/scripts/physicsLayout.js +++ b/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") @@ -62,12 +63,12 @@ for(let i = 0; i < sampleSVG.length; i++) { frags.push(v); }; - frags.sort((a,b)=>{return (a.position.y-b.position.y)}) - engine.world.gravity = {scale: 0.0001, x: 0, y: 0} - World.add(engine.world, [ceiling, leftWall, rightWall]); - if(render.canvas.width>860) World.add(engine.world, floor) - Engine.run(engine); - Render.run(render); +frags.sort((a,b)=>{return (a.position.y-b.position.y)}) +engine.world.gravity = {scale: 0.0001, x: 0, y: 0} +World.add(engine.world, [ceiling, leftWall, rightWall]); +if(render.canvas.width>860) World.add(engine.world, floor) +Engine.run(engine); +Render.run(render); // window.addEventListener("resize", ()=>{ diff --git a/test_data/src/scripts/updateFragment.js b/test_data/src/scripts/updateFragment.js index f6fa4a9..0c696ba 100644 --- a/test_data/src/scripts/updateFragment.js +++ b/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,33 +157,36 @@ setInterval(()=>{ count -= 1; } scrollChanged = false; -}, 30); +}, 60); setInterval(()=>{ - // update fragment position - for(let i = 0; i < frag_disp.length; i++) { - frag_disp[i].angle = 0; // lock rotation - // if((frag_disp[i].velocity.x > THRESHOLD) || (frag_disp[i].velocity.y > THRESHOLD)){ - let el = document.getElementById(`${frag_disp[i].name}`); - let x = frag_disp[i].bounds.min.x * SCALAR - let y = frag_disp[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; - - - // expand the height - render.canvas.height = Math.max(window.innerHeight, maxY); - document.querySelector('#frags').style.height = render.canvas.height + 200; - if(leftWall.position.y+window.innerHeight/2 THRESHOLD) || (frag_disp[i].velocity.y > THRESHOLD)){ + let el = document.getElementById(`${frag_disp[i].name}`); + let x = frag_disp[i].bounds.min.x * SCALAR + let y = frag_disp[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; + + // expand the height + render.canvas.height = Math.max(window.innerHeight, maxY); + document.querySelector('#frags').style.height = render.canvas.height + 200; + if(leftWall.position.y+window.innerHeight/2