From ca98783d8b917d435f748ea00546aaa7b817703f Mon Sep 17 00:00:00 2001 From: Hyunchul Kim Date: Mon, 16 Nov 2020 12:03:19 +0900 Subject: [PATCH] physics-layout wip --- src/original.svg | 67 +++---- src/original_collider.svg | 345 +++++++++++++++++++++++++++++++++++ template/src/script.js | 60 ++++--- template/test.html | 367 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 768 insertions(+), 71 deletions(-) create mode 100644 src/original_collider.svg diff --git a/src/original.svg b/src/original.svg index 661f37b..1f613c5 100644 --- a/src/original.svg +++ b/src/original.svg @@ -77,7 +77,7 @@ - - + Megumi - - + mooming - - - + Eunjeong @@ -152,8 +152,8 @@ - + - - - - - - - - - - - - - - - - - - - - - Nodl + \ No newline at end of file diff --git a/src/original_collider.svg b/src/original_collider.svg new file mode 100644 index 0000000..8c488c9 --- /dev/null +++ b/src/original_collider.svg @@ -0,0 +1,345 @@ + + + + + + + + Seungwook + Y + ang + + + Megumi + + + + + Grace Kim + + + mooming + + + + + Hong + Seo + Y + eon + + + + yiyagi + + + Eunjeong + Gu + + + Oro Minkyung + + + Korean Peoples Solidarity + Against Proverty + + + + J + i + n + h + o + J + e + o + n + g + + + + blblbg + + + + Song Soo + + + + Mc. mama + + + + 109 + + + doohoyi + + + + Hamamu + + + Wonjung + + + Hyunchul + Kim + + + 0set + + + Pzzz + + + yuhee + + + sewon + + + Hyunjin + + + + Ichimura Misako + + + Jae Shin + + + + Dah + Y + ee Noh + + + + MinShin + + + Ueta Jiro + + + + Nodl + + \ No newline at end of file diff --git a/template/src/script.js b/template/src/script.js index 0d0f6c0..a35b463 100644 --- a/template/src/script.js +++ b/template/src/script.js @@ -6,51 +6,65 @@ var Engine = Matter.Engine, Common = Matter.Common, Svg = Matter.Svg, Vertices = Matter.Vertices; - - - - var engine = Engine.create(); - var render = Render.create({ element: document.body, engine: engine, options: { - width: 800, - height: 400, + width: window.innerWidth, + height: window.innerHeight, wireframes: false, } }); -var boxA = Bodies.rectangle(400, 200, 80, 80); -var ballA = Bodies.circle(380, 100, 40, 10); -var ballB = Bodies.circle(460, 10, 40, 10); -var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true }); +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 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 sampleSVG = document.querySelector('#sample').getElementsByTagName('path'); +// Get SVG +var sampleSVG = document.getElementsByClassName("shape"); var vertexSets = [], 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 } }, true); - console.log(v) - vertexSets.push(v); - World.add(engine.world, v); + + // v.position.x *= 0.8; + // v.position.y *= 0.8; + v.mass = 0.001; + v.restitution = 0; + + v.name = path.parentNode.id + // vertexSets.push(v); + frags.push(v); }; -document.querySelector("svg").remove(); -vertexSets.push(ground) +// vertexSets.push(ground) + +console.log(engine.world); +engine.world.gravity = {scale: 0.0001, x: 0, y: -1} + +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, [boxA, ballA, ballB, ground]); - Engine.run(engine); -Render.run(render); \ No newline at end of file +Render.run(render); + +setInterval(()=>{ + for(let i = 0; i < frags.length; i++) { + let el = document.getElementById(frags[i].name); + let x = frags[i].position.x; + let y = frags[i].position.y; + el.setAttribute('transform', "translate("+x/20+","+y/20+")"); + } +}, 15) +// document.querySelector("svg").remove(); \ No newline at end of file diff --git a/template/test.html b/template/test.html index 233a72b..6508c21 100644 --- a/template/test.html +++ b/template/test.html @@ -7,31 +7,368 @@ + - + + - - - - - - - - - - + + + Seungwook + Y + ang + + + Megumi + + + + + Grace Kim + + + mooming + + + + + Hong + Seo + Y + eon + + + + yiyagi + + + Eunjeong + Gu + + + Oro Minkyung + + + Korean Peoples Solidarity + Against Proverty + + + + J + i + n + h + o + J + e + o + n + g + + + + blblbg + + + + Song Soo + + + + Mc. mama + + + + 109 + + + doohoyi + + + + Hamamu + + + Wonjung + + + Hyunchul + Kim + + + 0set + + + Pzzz + + + yuhee + + + sewon + + + Hyunjin + + + + Ichimura Misako + + + Jae Shin + + + + Dah + Y + ee Noh + + + + MinShin + + + Ueta Jiro + + + + Nodl +