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

scale down the physics

This commit is contained in:
Orion Reed 2024-12-15 15:24:42 -05:00
parent 7a88628512
commit 3b24ebf501
1 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/folk-physics.ts
View File

@ -7,6 +7,8 @@ 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 world?: RAPIER.World; private world?: RAPIER.World;
private bodies: Map<FolkShape, RAPIER.RigidBody> = new Map(); private bodies: Map<FolkShape, RAPIER.RigidBody> = new Map();
private elementToRect: Map<FolkShape, DOMRectTransform> = new Map(); private elementToRect: Map<FolkShape, DOMRectTransform> = new Map();
@ -16,8 +18,11 @@ export class FolkPhysics extends FolkBaseSet {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
// Create physics world with gravity // Create physics world with reduced gravity
this.world = new RAPIER.World({ x: 0.0, y: 9.81 }); this.world = new RAPIER.World({
x: 0.0,
y: 8,
});
// Add container walls and floor // Add container walls and floor
this.createContainer(); this.createContainer();
@ -67,13 +72,19 @@ export class FolkPhysics extends FolkBaseSet {
if (!this.bodies.has(element)) { if (!this.bodies.has(element)) {
// Create new rigid body matching the element's position // Create new rigid body matching the element's position
const bodyDesc = RAPIER.RigidBodyDesc.dynamic() const bodyDesc = RAPIER.RigidBodyDesc.dynamic()
.setTranslation(rect.x + rect.width / 2, rect.y + rect.height / 2) .setTranslation(
(rect.x + rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
(rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE
)
.setRotation(rect.rotation); .setRotation(rect.rotation);
const body = this.world!.createRigidBody(bodyDesc); const body = this.world!.createRigidBody(bodyDesc);
// Create collider with top-left origin // Scale down the collider size
const colliderDesc = RAPIER.ColliderDesc.cuboid(rect.width / 2, rect.height / 2).setTranslation(0, 0); const colliderDesc = RAPIER.ColliderDesc.cuboid(
(rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
(rect.height / 2) * FolkPhysics.PHYSICS_SCALE
).setTranslation(0, 0);
this.world!.createCollider(colliderDesc, body); this.world!.createCollider(colliderDesc, body);
this.bodies.set(element, body); this.bodies.set(element, body);
@ -89,8 +100,8 @@ export class FolkPhysics extends FolkBaseSet {
body.setBodyType(RAPIER.RigidBodyType.KinematicPositionBased, true); body.setBodyType(RAPIER.RigidBodyType.KinematicPositionBased, true);
body.setTranslation( body.setTranslation(
{ {
x: rect.x + rect.width / 2, x: (rect.x + rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
y: rect.y + rect.height / 2, y: (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE,
}, },
true true
); );
@ -100,7 +111,10 @@ export class FolkPhysics extends FolkBaseSet {
const collider = body.collider(0); const collider = body.collider(0);
if (collider) { if (collider) {
this.world!.removeCollider(collider, true); this.world!.removeCollider(collider, true);
const newColliderDesc = RAPIER.ColliderDesc.cuboid(rect.width / 2, rect.height / 2).setTranslation(0, 0); const newColliderDesc = RAPIER.ColliderDesc.cuboid(
(rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
(rect.height / 2) * FolkPhysics.PHYSICS_SCALE
).setTranslation(0, 0);
this.world!.createCollider(newColliderDesc, body); this.world!.createCollider(newColliderDesc, body);
} }
body.setBodyType(RAPIER.RigidBodyType.Dynamic, true); body.setBodyType(RAPIER.RigidBodyType.Dynamic, true);
@ -121,9 +135,9 @@ export class FolkPhysics extends FolkBaseSet {
this.bodies.forEach((body, shape) => { this.bodies.forEach((body, shape) => {
if (shape !== document.activeElement) { if (shape !== document.activeElement) {
const position = body.translation(); const position = body.translation();
// Adjust position back to top-left // Scale up the position when applying to visual elements
shape.x = position.x - shape.width / 2; shape.x = position.x / FolkPhysics.PHYSICS_SCALE - shape.width / 2;
shape.y = position.y - shape.height / 2; shape.y = position.y / FolkPhysics.PHYSICS_SCALE - shape.height / 2;
shape.rotation = body.rotation(); shape.rotation = body.rotation();
} }
}); });
@ -142,20 +156,20 @@ export class FolkPhysics extends FolkBaseSet {
const containerDesc = RAPIER.RigidBodyDesc.fixed(); const containerDesc = RAPIER.RigidBodyDesc.fixed();
const container = this.world.createRigidBody(containerDesc); const container = this.world.createRigidBody(containerDesc);
// Create a single collider with all four walls as vertices // Scale down the container walls
const vertices = [ const vertices = [
// Floor: left to right // Floor: left to right
{ x: -1000, y: this.clientHeight }, { x: -100, y: this.clientHeight * FolkPhysics.PHYSICS_SCALE },
{ x: 1000, y: this.clientHeight }, { x: 100, y: this.clientHeight * FolkPhysics.PHYSICS_SCALE },
// Right wall: bottom to top // Right wall: bottom to top
{ x: this.clientWidth, y: this.clientHeight }, { x: this.clientWidth * FolkPhysics.PHYSICS_SCALE, y: this.clientHeight * FolkPhysics.PHYSICS_SCALE },
{ x: this.clientWidth, y: -1000 }, { x: this.clientWidth * FolkPhysics.PHYSICS_SCALE, y: -100 },
// Ceiling: right to left // Ceiling: right to left
{ x: 1000, y: 0 }, { x: 100, y: 0 },
{ x: -1000, y: 0 }, { x: -100, y: 0 },
// Left wall: top to bottom // Left wall: top to bottom
{ x: 0, y: -1000 }, { x: 0, y: -100 },
{ x: 0, y: this.clientHeight }, { x: 0, y: this.clientHeight * FolkPhysics.PHYSICS_SCALE },
]; ];
const indices = [ const indices = [