From 00060043f79ba0f2c1d1141891330b81cc4e7b92 Mon Sep 17 00:00:00 2001 From: Hyunchul Kim Date: Mon, 23 Nov 2020 03:33:06 +0900 Subject: [PATCH] participants --- test_data/src/scripts/physicsLayout.js | 103 +++++++++++++++---------- 1 file changed, 64 insertions(+), 39 deletions(-) diff --git a/test_data/src/scripts/physicsLayout.js b/test_data/src/scripts/physicsLayout.js index 2c6607f..82baff9 100644 --- a/test_data/src/scripts/physicsLayout.js +++ b/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 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 }); +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}); + // 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, - y: window.innerHeight/3 + (Math.random() - 0.5) * window.innerHeight*0.3 + x: window.innerWidth/2 + (Math.random() - 0.5) * window.innerWidth*0.25, + 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) - -console.log(engine.world); -engine.world.gravity = {scale: 0.0001, x: 0, y: 0} - -World.add(engine.world, [ceiling, floor, leftWall, rightWall, title, timeline]); -// World.add(engine.world, frags); - -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", ()=>{ - // TODO : complete resize function - // console.log(window.innerWidth); - // console.log(window.innerHeight); +// window.addEventListener("resize", ()=>{ +// // TODO : complete resize function +// // console.log(window.innerWidth); +// // console.log(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 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; -}) +// 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 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