diff options
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx | 354 | ||||
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx | 30 |
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} /> |