diff --git a/src/scripts/physicsLayout.js b/src/scripts/physicsLayout.js index 7709a29..5d50b3c 100644 --- a/src/scripts/physicsLayout.js +++ b/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(); \ No newline at end of file diff --git a/src/style/authors.css b/src/style/authors.css new file mode 100644 index 0000000..ea74052 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/style/common.css b/src/style/common.css index 837d8a7..225b0fa 100644 --- a/src/style/common.css +++ b/src/style/common.css @@ -283,9 +283,6 @@ margin:10px; } - /* FRAGMENTS !!!TEMP!!! */ - svg#authors{max-height:860px;} - } @media ( min-width: 1080px ) {