physics cleanup for window resizing, etc

2 files changed, 146 insertions, 238 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index e2b882389..c4e8e7721 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -6,8 +6,11 @@ import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
+import { computed } from 'mobx';
 import { observer } from 'mobx-react';
-import { HeightSym, NumListCast, WidthSym } from '../../../../fields/Doc';
+import { NumListCast } from '../../../../fields/Doc';
+import { List } from '../../../../fields/List';
+import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
 import { FieldView, FieldViewProps } from './../FieldView';
 import './PhysicsSimulationBox.scss';
@@ -17,9 +20,6 @@ import * as tutorials from './PhysicsSimulationTutorial.json';
 import Wall from './PhysicsSimulationWall';
 import Weight from './PhysicsSimulationWeight';
 import React = require('react');
-import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
-import { List } from '../../../../fields/List';
-import { computed, trace } from 'mobx';
 
 interface IWallProps {
     length: number;
@@ -82,6 +82,14 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     @computed get gravity() {
         return NumCast(this.dataDoc.simulation_gravity, -9.81);
     }
+    gravityForce = (mass: number): IForce => {
+        return {
+            description: 'Gravity',
+            magnitude: mass * Math.abs(this.gravity),
+            directionInDegrees: 270,
+            component: false,
+        };
+    };
     @computed get simulationType() {
         return StrCast(this.dataDoc.simulation_type, 'Inclined Plane');
     }
@@ -129,6 +137,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return NumCast(this.dataDoc.mass2, 1);
     }
 
+    @computed get mass1Radius() {
+        return NumCast(this.dataDoc.mass1_radius, 60);
+    }
     @computed get mass1PosXStart() {
         return NumCast(this.dataDoc.mass1_positionXstart, Math.round((this.xMax * 0.5 - 200) * 10) / 10);
     }
@@ -213,51 +224,29 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         }
         if (mode == 'Freeform') {
             this.dataDoc.simulation_showForceMagnitudes = true;
-            if (simulationType == 'One Weight') {
-                this.dataDoc.simulation_showComponentForces = false;
-                this.dataDoc.mass1_positionYstart = this.yMin + 0.08 * this.props.PanelHeight();
-                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
-                this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.props.PanelHeight());
-                this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
-                this.dataDoc.mass1_forcesUpdated = JSON.stringify([
-                    {
-                        description: 'Gravity',
-                        magnitude: Math.abs(this.gravity) * this.mass1,
-                        directionInDegrees: 270,
-                        component: false,
-                    },
-                ]);
-                this.dataDoc.mass1_forcesStart = JSON.stringify([
-                    {
-                        description: 'Gravity',
-                        magnitude: Math.abs(this.gravity) * this.mass1,
-                        directionInDegrees: 270,
-                        component: false,
-                    },
-                ]);
-                this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
-                ``;
-            } else if (simulationType == 'Inclined Plane') {
-                this.changeWedgeBasedOnNewAngle(26);
-                this.dataDoc.mass1_forcesStart = JSON.stringify([
-                    {
-                        description: 'Gravity',
-                        magnitude: Math.abs(this.gravity) * this.mass1,
-                        directionInDegrees: 270,
-                        component: false,
-                    },
-                ]);
-                this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
-            } else if (simulationType == 'Pendulum') {
-                this.setupPendulum();
-            } else if (simulationType == 'Spring') {
-                this.setupSpring();
-            } else if (simulationType == 'Circular Motion') {
-                this.setupCircular(0);
-            } else if (simulationType == 'Pulley') {
-                this.setupPulley();
-            } else if (simulationType == 'Suspension') {
-                this.setupSuspension();
+            // prettier-ignore
+            switch (simulationType) {
+                case 'One Weight': 
+                    this.dataDoc.simulation_showComponentForces = false;
+                    this.dataDoc.mass1_positionYstart = this.yMin + 0.08 * this.props.PanelHeight();
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.props.PanelHeight());
+                    this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+                    this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
+                    ``;
+                    break;
+                case 'Inclined Plane': 
+                    this.changeWedgeBasedOnNewAngle(26);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+                    this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
+                    break;
+                case 'Pendulum': this.setupPendulum(); break;
+                case 'Spring':   this.setupSpring(); break;
+                case 'Circular Motion': this.setupCircular(0); break;
+                case 'Pulley':this.setupPulley(); break;
+                case 'Suspension': this.setupSuspension();break;
             }
         } else if (mode == 'Review') {
             this.dataDoc.simulation_showComponentForces = false;
@@ -266,26 +255,18 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             this.dataDoc.simulation_showVelocity = false;
             this.dataDoc.simulation_showForces = true;
             this.generateNewQuestion();
-            if (simulationType == 'One Weight') {
-                // TODO - one weight review problems
-            } else if (simulationType == 'Spring') {
-                this.setupSpring();
-                // TODO - spring review problems
-            } else if (simulationType == 'Inclined Plane') {
-                this.dataDoc.mass1_forcesUpdated = '';
-                this.dataDoc.mass1_forcesStart = '';
-            } else if (simulationType == 'Pendulum') {
-                this.setupPendulum();
-                // TODO - pendulum review problems
-            } else if (simulationType == 'Circular Motion') {
-                this.setupCircular(0);
-                // TODO - circular motion review problems
-            } else if (simulationType == 'Pulley') {
-                this.setupPulley();
-                // TODO - pulley tutorial review problems
-            } else if (simulationType == 'Suspension') {
-                this.setupSuspension();
-                // TODO - suspension tutorial review problems
+            // prettier-ignore
+            switch (simulationType) {
+                case 'One Weight' : break;// TODO - one weight review problems
+                case 'Spring':  this.setupSpring(); break; // TODO - spring review problems
+                case 'Inclined Plane': 
+                    this.dataDoc.mass1_forcesUpdated = '';
+                    this.dataDoc.mass1_forcesStart = '';
+                    break;
+                case 'Pendulum':  this.setupPendulum(); break;  // TODO - pendulum review problems
+                case 'Circular Motion':  this.setupCircular(0); break;  // TODO - circular motion review problems
+                case 'Pulley':  this.setupPulley(); break; // TODO - pulley tutorial review problems
+                case 'Suspension': this.setupSuspension(); break;  // TODO - suspension tutorial review problems
             }
         } else if (mode == 'Tutorial') {
             this.dataDoc.simulation_showComponentForces = false;
@@ -301,51 +282,59 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.simulation_showVelocity = true;
             }
 
-            if (this.simulationType == 'One Weight') {
-                this.dataDoc.simulation_showForces = true;
-                this.dataDoc.mass1_positionYstart = this.yMax - 100;
-                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
-                this.dataDoc.tutorial = JSON.stringify(tutorials.freeWeight);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
-            } else if (this.simulationType == 'Spring') {
-                this.dataDoc.simulation_showForces = true;
-                this.setupSpring();
-                this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
-                this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
-                this.dataDoc.tutorial = JSON.stringify(tutorials.spring);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
-            } else if (this.simulationType == 'Pendulum') {
-                this.setupPendulum();
-                this.dataDoc.tutorial = JSON.stringify(tutorials.pendulum);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pendulum.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.pendulum.steps[0].showMagnitude;
-            } else if (this.simulationType == 'Inclined Plane') {
-                this.dataDoc.simulation_showForces = true;
-                this.dataDoc.wedge_angle = 26;
-                this.changeWedgeBasedOnNewAngle(26);
-                this.dataDoc.tutorial = JSON.stringify(tutorials.inclinePlane);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.inclinePlane.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.inclinePlane.steps[0].showMagnitude;
-            } else if (this.simulationType == 'Circular Motion') {
-                this.dataDoc.simulation_showForces = true;
-                this.setupCircular(40);
-                this.dataDoc.tutorial = JSON.stringify(tutorials.circular);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.circular.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.circular.steps[0].showMagnitude;
-            } else if (this.simulationType == 'Pulley') {
-                this.dataDoc.simulation_showForces = true;
-                this.setupPulley();
-                this.dataDoc.tutorial = JSON.stringify(tutorials.pulley);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pulley.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.pulley.steps[0].showMagnitude;
-            } else if (this.simulationType == 'Suspension') {
-                this.dataDoc.simulation_showForces = true;
-                this.setupSuspension();
-                this.dataDoc.tutorial = JSON.stringify(tutorials.suspension);
-                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.suspension.steps[0].forces);
-                this.dataDoc.simulation_showForceMagnitudes = tutorials.suspension.steps[0].showMagnitude;
+            switch (this.simulationType) {
+                case 'One Weight':
+                    this.dataDoc.simulation_showForces = true;
+                    this.dataDoc.mass1_positionYstart = this.yMax - 100;
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.freeWeight);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
+                    break;
+                case 'Spring':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupSpring();
+                    this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.spring);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
+                    break;
+                case 'Pendulum':
+                    this.setupPendulum();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.pendulum);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pendulum.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.pendulum.steps[0].showMagnitude;
+                    break;
+                case 'Inclined Plane':
+                    this.dataDoc.simulation_showForces = true;
+                    this.dataDoc.wedge_angle = 26;
+                    this.changeWedgeBasedOnNewAngle(26);
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.inclinePlane);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.inclinePlane.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.inclinePlane.steps[0].showMagnitude;
+                    break;
+                case 'Circular Motion':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupCircular(40);
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.circular);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.circular.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.circular.steps[0].showMagnitude;
+                    break;
+                case 'Pulley':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupPulley();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.pulley);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pulley.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.pulley.steps[0].showMagnitude;
+                    break;
+                case 'Suspension':
+                    this.dataDoc.simulation_showForces = true;
+                    this.setupSuspension();
+                    this.dataDoc.tutorial = JSON.stringify(tutorials.suspension);
+                    this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.suspension.steps[0].forces);
+                    this.dataDoc.simulation_showForceMagnitudes = tutorials.suspension.steps[0].showMagnitude;
+                    break;
             }
             this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
         }
@@ -404,12 +393,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 360 - (Math.atan(height / width) * 180) / Math.PI,
             component: true,
         };
-        const gravityForce: IForce = {
-            description: 'Gravity',
-            magnitude: this.mass1 * Math.abs(this.gravity),
-            directionInDegrees: 270,
-            component: false,
-        };
+        const gravityForce = this.gravityForce(this.mass1);
         if (coefficient != 0) {
             this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce, frictionForce]);
             this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce, frictionForce]);
@@ -423,37 +407,18 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
     // Change wedge height and width and weight position to match new wedge angle
     changeWedgeBasedOnNewAngle = (angle: number) => {
+        const radAng = (angle * Math.PI) / 180;
         this.dataDoc.wedge_width = this.xMax * 0.5;
-        this.dataDoc.wedge_height = Math.tan((angle * Math.PI) / 180) * this.xMax * 0.5;
+        this.dataDoc.wedge_height = Math.tan(radAng) * this.dataDoc.wedge_width;
 
         // update weight position based on updated wedge width/height
-        let yPos = this.yMax - 0.08 * this.props.PanelHeight() * 2 - Math.tan((angle * Math.PI) / 180) * this.xMax * 0.5;
+        let yPos = this.yMax - this.mass1Radius * 2 - this.dataDoc.wedge_height - this.mass1Radius * Math.cos(radAng) + this.mass1Radius;
+        let xPos = this.xMax * 0.25 + this.mass1Radius * Math.sin(radAng) - this.mass1Radius;
 
-        // adjust y position
-        if (angle >= 5 && angle < 10) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.1;
-        } else if (angle >= 10 && angle < 15) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.23;
-        } else if (angle >= 15 && angle < 20) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.26;
-        } else if (angle >= 20 && angle < 25) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.33;
-        } else if (angle >= 25 && angle < 30) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.35;
-        } else if (angle >= 30 && angle < 35) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.4;
-        } else if (angle >= 35 && angle < 40) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.45;
-        } else if (angle >= 40 && angle < 45) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.47;
-        } else if (angle >= 45) {
-            yPos += 0.08 * this.props.PanelHeight() * 0.52;
-        }
-
-        this.dataDoc.mass1_positionXstart = this.xMax * 0.25;
+        this.dataDoc.mass1_positionXstart = xPos;
         this.dataDoc.mass1_positionYstart = yPos;
         if (this.simulationMode == 'Freeform') {
-            this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction), this.xMax * 0.5, Math.tan((angle * Math.PI) / 180) * this.xMax * 0.5);
+            this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction), this.dataDoc.wedge_width, Math.tan(radAng) * this.dataDoc.wedge_width);
         }
     };
 
@@ -730,24 +695,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         };
 
         this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
-        this.dataDoc.mass1_forcesUpdated = JSON.stringify([
-            {
-                description: 'Gravity',
-                magnitude: this.mass1 * Math.abs(this.gravity),
-                directionInDegrees: 270,
-                component: false,
-            },
-            forceOfTension,
-        ]);
-        this.dataDoc.mass1_forcesStart = JSON.stringify([
-            {
-                description: 'Gravity',
-                magnitude: this.mass1 * Math.abs(this.gravity),
-                directionInDegrees: 270,
-                component: false,
-            },
-            forceOfTension,
-        ]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
         this.dataDoc.pendulum_angle = this.dataDoc.pendulum_angleStart = 30;
         this.dataDoc.pendulum_length = this.dataDoc.pendulum_lengthStart = 300;
     };
@@ -755,14 +704,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     // Default setup for spring simulation
     setupSpring = () => {
         this.dataDoc.simulation_showComponentForces = false;
-        const gravityForce: IForce = {
-            description: 'Gravity',
-            magnitude: Math.abs(this.gravity) * this.mass1,
-            directionInDegrees: 270,
-            component: false,
-        };
-        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce]);
-        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
         this.dataDoc.mass1_positionXstart = this.xMax / 2 - 0.08 * this.props.PanelHeight();
         this.dataDoc.mass1_positionYstart = 200;
         this.dataDoc.spring_constant = 0.5;
@@ -792,14 +735,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 135,
             component: false,
         };
-        const grav: IForce = {
-            description: 'Gravity',
-            magnitude: this.mass1 * Math.abs(this.gravity),
-            directionInDegrees: 270,
-            component: false,
-        };
-        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, grav]);
-        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce1, tensionForce2, grav]);
+        const gravity = this.gravityForce(this.mass1);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce1, tensionForce2, gravity]);
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
@@ -811,12 +749,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.mass1_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
         this.dataDoc.mass1_positionX = (this.xMin + this.xMax) / 2 - 2 * (0.08 * this.props.PanelHeight()) - 5;
         let a = (-1 * ((this.mass1 - this.mass2) * Math.abs(this.gravity))) / (this.mass1 + this.mass2);
-        const gravityForce1: IForce = {
-            description: 'Gravity',
-            magnitude: this.mass1 * Math.abs(this.gravity),
-            directionInDegrees: 270,
-            component: false,
-        };
+        const gravityForce1 = this.gravityForce(this.mass1);
         const tensionForce1: IForce = {
             description: 'Tension',
             magnitude: this.mass1 * a + this.mass1 * Math.abs(this.gravity),
@@ -824,12 +757,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: false,
         };
         a *= -1;
-        const gravityForce2: IForce = {
-            description: 'Gravity',
-            magnitude: this.mass2 * Math.abs(this.gravity),
-            directionInDegrees: 270,
-            component: false,
-        };
+        const gravityForce2 = this.gravityForce(this.mass2);
         const tensionForce2: IForce = {
             description: 'Tension',
             magnitude: this.mass2 * a + this.mass2 * Math.abs(this.gravity),
@@ -949,7 +877,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             pendulumLength: this.pendulumLength,
             startPendulumAngle: this.pendulumAngleStart,
             startPendulumLength: this.pendulumLengthStart,
-            radius: 0.08 * this.props.PanelHeight(),
+            radius: this.mass1Radius,
             reset: BoolCast(this.dataDoc.simulation_reset),
             simulationSpeed: NumCast(this.dataDoc.simulation_speed, 2),
             showAcceleration: BoolCast(this.dataDoc.simulation_showAcceleration),
@@ -976,7 +904,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     </div>
                                 )}
                             </div>
-                            <div className="mechanicsSimulationElements">
+                            <div className="mechanicsSimulationElements" style={{ transform: `scale(${this.props.PanelWidth() / 1000})` }}>
                                 <Weight
                                     {...commonWeightProps}
                                     color="red"
@@ -1022,7 +950,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     />
                                 )}
                             </div>
-                            <div>
+                            <div style={{ position: 'absolute', transform: `scale(${this.props.PanelWidth() / 1000}`, transformOrigin: 'top left', top: 0, left: 0, width: '100%', height: '100%' }}>
                                 {(this.simulationType == 'One Weight' || this.simulationType == 'Inclined Plane') &&
                                     this.wallPositions?.map((element, index) => <Wall key={index} length={element.length} xPos={element.xPos} yPos={element.yPos} angleInDegrees={element.angleInDegrees} />)}
                             </div>
@@ -1708,24 +1636,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                     this.dataDoc.mass1_positionXstart = xPos;
                                                     this.dataDoc.mass1_positionYstart = yPos;
 
-                                                    this.dataDoc.mass1_forcesStart = JSON.stringify([
-                                                        {
-                                                            description: 'Gravity',
-                                                            magnitude: Math.abs(this.gravity) * this.mass1,
-                                                            directionInDegrees: 270,
-                                                            component: false,
-                                                        },
-                                                        forceOfTension,
-                                                    ]);
-                                                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([
-                                                        {
-                                                            description: 'Gravity',
-                                                            magnitude: Math.abs(this.gravity) * this.mass1,
-                                                            directionInDegrees: 270,
-                                                            component: false,
-                                                        },
-                                                        forceOfTension,
-                                                    ]);
+                                                    this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
+                                                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
                                                     this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
                                                     this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
                                                 }
@@ -1822,13 +1734,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                                     directionInDegrees: dir2T,
                                                                     component: false,
                                                                 };
-                                                                const grav: IForce = {
-                                                                    description: 'Gravity',
-                                                                    magnitude: this.mass1 * Math.abs(this.gravity),
-                                                                    directionInDegrees: 270,
-                                                                    component: false,
-                                                                };
-                                                                this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, grav]);
+                                                                const gravity = this.gravityForce(this.mass1);
+                                                                this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
                                                             }
                                                         }}
                                                         small={true}
@@ -1878,13 +1785,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                                     directionInDegrees: dir2T,
                                                                     component: false,
                                                                 };
-                                                                const grav: IForce = {
-                                                                    description: 'Gravity',
-                                                                    magnitude: this.mass1 * Math.abs(this.gravity),
-                                                                    directionInDegrees: 270,
-                                                                    component: false,
-                                                                };
-                                                                this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, grav]);
+                                                                const gravity = this.gravityForce(this.mass1);
+                                                                this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
                                                             }
                                                         }}
                                                         small={true}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 97f1d3f6c..35aeb59bf 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -126,6 +126,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     @computed get draggable() {
         return !['Inclined Plane', 'Pendulum'].includes(this.props.simulationType) && this.props.simulationMode === 'Freeform';
     }
+    @computed get panelHeight() {
+        return Math.max(800, this.props.panelHeight()) + 'px';
+    }
+    @computed get panelWidth() {
+        return Math.max(1000, this.props.panelWidth()) + 'px';
+    }
     epsilon = 0.0001;
     labelBackgroundColor = `rgba(255,255,255,0.5)`;
 
@@ -782,7 +788,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                        <svg width={this.panelWidth} height={this.panelHeight}>
                             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(val => {
                                 const count = 10;
                                 const xPos1 = this.state.xPosition + this.props.radius + (val % 2 === 0 ? -20 : 20);
@@ -804,7 +810,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                        <svg width={this.panelWidth} height={this.panelHeight}>
                             <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.state.xPosition + this.props.radius} y2={this.props.yMin} stroke={'#deb887'} strokeWidth="10" />
                         </svg>
                     </div>
@@ -818,7 +824,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                        <svg width={this.panelWidth} height={this.panelHeight}>
                             <circle cx={(this.props.xMax + this.props.xMin) / 2} cy={this.props.radius} r={this.props.radius * 1.5} fill={'#808080'} />
                         </svg>
                     </div>
@@ -832,7 +838,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                        <svg width={this.panelWidth} height={this.panelHeight}>
                             <line
                                 x1={this.state.xPosition + this.props.radius}
                                 y1={this.state.yPosition + this.props.radius}
@@ -862,7 +868,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 left: 0,
                                 top: 0,
                             }}>
-                            <svg width={this.props.panelWidth() + 'px'} height={this.props.panelHeight() + 'px'}>
+                            <svg width={this.props.panelWidth() + 'px'} height={this.panelHeight}>
                                 <line
                                     x1={this.state.xPosition + this.props.radius}
                                     y1={this.state.yPosition + this.props.radius}
@@ -897,7 +903,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                        <svg width={this.panelWidth} height={this.panelHeight}>
                             <line
                                 x1={this.state.xPosition + this.props.radius}
                                 y1={this.state.yPosition + this.props.radius}
@@ -918,7 +924,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             left: 0,
                             top: 0,
                         }}>
-                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                        <svg width={this.panelWidth} height={this.panelHeight}>
                             <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.props.xMax / 2} y2={-5} stroke={'#deb887'} strokeWidth="10" />
                         </svg>
                         {!this.state.dragging && (
@@ -949,7 +955,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 {this.props.simulationType == 'Inclined Plane' && (
                     <div>
                         <div style={{ position: 'absolute', left: '0', top: '0' }}>
-                            <svg width={this.props.xMax + 'px'} height={this.props.yMax + 'px'}>
+                            <svg width={this.panelWidth} height={this.props.yMax + 'px'}>
                                 <polygon points={this.state.coordinates} style={{ fill: 'burlywood' }} />
                             </svg>
                         </div>
@@ -973,7 +979,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 left: 0,
                                 top: 0,
                             }}>
-                            <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                            <svg width={this.panelWidth} height={this.panelHeight}>
                                 <defs>
                                     <marker id="accArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                         <path d="M0,0 L0,6 L9,3 z" fill="green" />
@@ -1014,7 +1020,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 left: 0,
                                 top: 0,
                             }}>
-                            <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
+                            <svg width={this.panelWidth} height={this.panelHeight}>
                                 <defs>
                                     <marker id="velArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                         <path d="M0,0 L0,6 L9,3 z" fill="blue" />
@@ -1082,7 +1088,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                         left: this.props.xMin,
                                         top: this.props.yMin,
                                     }}>
-                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}>
+                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
                                         <defs>
                                             <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                                 <path d="M0,0 L0,6 L9,3 z" fill={color} />
@@ -1147,7 +1153,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                         left: this.props.xMin,
                                         top: this.props.yMin,
                                     }}>
-                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}>
+                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
                                         <defs>
                                             <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                                 <path d="M0,0 L0,6 L9,3 z" fill={color} />