jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup

This commit is contained in:
Orion Reed 2024-12-15 15:29:16 -05:00
parent 3b24ebf501
commit 52063ceee2
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/physics.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Distance Field Demo</title> <title>Physics</title>
<style> <style>
html { html {
height: 100%; height: 100%;
@ -13,6 +13,7 @@
min-height: 100%; min-height: 100%;
position: relative; position: relative;
margin: 0; margin: 0;
inset: 0;
overscroll-behavior: none; overscroll-behavior: none;
} }
@ -25,8 +26,8 @@
</head> </head>
<body> <body>
<folk-physics> <folk-physics>
<folk-shape x="250" y="50" width="120" height="30" rotation="30"></folk-shape> <folk-shape id="shape1" x="250" y="50" width="120" height="30" rotation="30"></folk-shape>
<folk-shape x="450" y="350" width="40" height="120" rotation="45"></folk-shape> <folk-shape id="shape2" x="450" y="350" width="40" height="120" rotation="45"></folk-shape>
<folk-shape x="150" y="150" width="70" height="70" rotation="15"></folk-shape> <folk-shape x="150" y="150" width="70" height="70" rotation="15"></folk-shape>
<folk-shape x="350" y="300" width="90" height="45" rotation="-20"></folk-shape> <folk-shape x="350" y="300" width="90" height="45" rotation="-20"></folk-shape>
<folk-shape x="550" y="200" width="35" height="85" rotation="60"></folk-shape> <folk-shape x="550" y="200" width="35" height="85" rotation="60"></folk-shape>
@ -34,10 +35,12 @@
<folk-shape x="420" y="150" width="110" height="25" rotation="10"></folk-shape> <folk-shape x="420" y="150" width="110" height="25" rotation="10"></folk-shape>
<folk-shape x="280" y="380" width="75" height="95" rotation="-50"></folk-shape> <folk-shape x="280" y="380" width="75" height="95" rotation="-50"></folk-shape>
</folk-physics> </folk-physics>
<folk-event-propagator source="#shape1" target="#shape2"></folk-event-propagator>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-physics.ts'; import '../src/standalone/folk-physics.ts';
import '../src/standalone/folk-event-propagator.ts';
</script> </script>
</body> </body>
</html> </html>

9
src/folk-physics.ts
View File

@ -7,7 +7,7 @@ import { FolkShape } from './folk-shape';
export class FolkPhysics extends FolkBaseSet { export class FolkPhysics extends FolkBaseSet {
static override tagName = 'folk-physics'; static override tagName = 'folk-physics';
private static PHYSICS_SCALE = 0.1; // Adjust this value to tune the overall scale private static PHYSICS_SCALE = 0.1;
private world?: RAPIER.World; private world?: RAPIER.World;
private bodies: Map<FolkShape, RAPIER.RigidBody> = new Map(); private bodies: Map<FolkShape, RAPIER.RigidBody> = new Map();
@ -18,23 +18,19 @@ export class FolkPhysics extends FolkBaseSet {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
// Create physics world with reduced gravity
this.world = new RAPIER.World({ this.world = new RAPIER.World({
x: 0.0, x: 0.0,
y: 8, y: 5,
}); });
// Add container walls and floor
this.createContainer(); this.createContainer();
// Start the simulation loop
this.startSimulation(); this.startSimulation();
} }
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
// Stop simulation loop
if (this.animationFrameId) { if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId); cancelAnimationFrame(this.animationFrameId);
} }
@ -50,7 +46,6 @@ export class FolkPhysics extends FolkBaseSet {
if (!this.world || this.sourcesMap.size !== this.sourceElements.size) return; if (!this.world || this.sourcesMap.size !== this.sourceElements.size) return;
// Update physics bodies to match source elements
this.updatePhysicsBodies(); this.updatePhysicsBodies();
} }