doohoyi/distribusi-foh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

participants

Browse source
This commit is contained in:
Hyunchul Kim 2020-11-23 03:33:06 +09:00
parent fe2e2cf3ee
commit 00060043f7
1 changed files with 64 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
test_data/src/scripts/physicsLayout.js
View file

@ -2,6 +2,7 @@ const SCALAR = 1;
const THRESHOLD = 0; const THRESHOLD = 0;
const INIT_DURATION = 300; const INIT_DURATION = 300;
const INIT_RATIO = 0.9; const INIT_RATIO = 0.9;
let maxY = 0;
var Engine = Matter.Engine, var Engine = Matter.Engine,
Render = Matter.Render, 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 // Get SVG
var sampleSVG = document.getElementsByClassName("shape"); var sampleSVG = document.getElementsByClassName("shape");
@ -35,53 +35,53 @@ var vertexSets = [],
color = ['#556270']; color = ['#556270'];
var frags = []; var frags = [];
var initY = 0;
for(let i = 0; i < sampleSVG.length; i++) { for(let i = 0; i < sampleSVG.length; i++) {
path = sampleSVG[i]; path = sampleSVG[i];
console.log(path);
var v = Bodies.fromVertices(100+(i*80), 80, Svg.pathToVertices(path, 20), { var v = Bodies.fromVertices(100+(i*80), 80, Svg.pathToVertices(path, 20), {
render: { render: {
fillStyle: color, fillStyle: color,
strokeStyle: color strokeStyle: color
}, },
position: { 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, restitution: 0.5,
friction:0,
staticFriction:0,
name: path.parentNode.id name: path.parentNode.id
}, true); }, true);
initY = (window.innerWidth>960)?initY+10:initY+75;
console.log(initY);
let el = document.getElementById(path.parentNode.id) let el = document.getElementById(path.parentNode.id)
el.setAttribute("visibility", "hidden") el.setAttribute("visibility", "hidden")
frags.push(v); 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 = ()=>{ let addFrags = ()=>{
if (count >= frags.length){ if (count >= frags.length){
return; return;
@ -91,7 +91,8 @@ let addFrags = ()=>{
World.add(engine.world, frags[count]); World.add(engine.world, frags[count]);
count += 1; count += 1;
duration *= INIT_RATIO; duration *= INIT_RATIO;
setTimeout(addFrags, duration) // addFrags();
setTimeout(addFrags, 50);
} }
} }
addFrags(); addFrags();
@ -100,14 +101,38 @@ setInterval(()=>{
for(let i = 0; i < frags.length; i++) { for(let i = 0; i < frags.length; i++) {
frags[i].angle = 0; // lock rotation frags[i].angle = 0; // lock rotation
let el = document.getElementById(frags[i].name); 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 x = frags[i].bounds.min.x * SCALAR
let y = frags[i].bounds.min.y * SCALAR let y = frags[i].bounds.min.y * SCALAR
el.setAttribute('transform', "translate("+x+","+y+")"); 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) }, 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
);
}