diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx | 96 |
1 files changed, 49 insertions, 47 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx index 1e817a22d..b7bc81f38 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx @@ -35,8 +35,10 @@ import "./PhysicsSimulationBox.scss"; import { InputField } from "./PhysicsSimulationInputField"; import questions from "./PhysicsSimulationQuestions.json"; import tutorials from "./PhysicsSimulationTutorial.json"; -import { IWallProps, Wall } from "./PhysicsSimulationWall"; -import { IForce, Weight } from "./PhysicsSimulationWeight"; +import Wall from "./PhysicsSimulationWall"; +import IWall from "./PhysicsSimulationWall"; +import Weight from "./PhysicsSimulationWeight"; +import IForce from "./PhysicsSimulationWeight"; interface VectorTemplate { top: number; left: number; @@ -99,9 +101,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.wallPositions.push({ length: 80, xPos: 69.5, yPos: 0, angleInDegrees: 90 }); // Used throughout sims - this.xMax = this.layoutDoc._width*0.08; - this.yMax = this.layoutDoc._height*0.08; - this.radius = 0.1*this.layoutDoc._height; + this.xMax = this.layoutDoc._width*0.08 ?? 500; + this.yMax = this.layoutDoc._height*0.08 ?? 500; + this.radius = 0.1*this.layoutDoc._height ?? 50; this.dataDoc.reviewCoefficient = this.dataDoc.reviewCoefficient ?? 0; this.dataDoc.questionVariables = this.dataDoc.questionVariables ?? []; this.dataDoc.accelerationXDisplay = this.dataDoc.accelerationXDisplay ?? 0; @@ -280,7 +282,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.showAcceleration = (false); if (this.dataDoc.simulationType != "Circular Motion") { this.dataDoc.velocityXDisplay = (0); - setVelocityYDisplay = (0); + this.dataDoc.velocityYDisplay = (0); this.dataDoc.showVelocity = (false); } else { this.dataDoc.velocityXDisplay = (20); @@ -334,7 +336,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.selectedTutorial = (tutorials.circular); this.dataDoc.startForces = (this.getForceFromJSON(tutorials.circular.steps[0].forces)); this.dataDoc.showForceMagnitudes = (tutorials.circular.steps[0].showMagnitude); - } else if (simulationType == "Pulley") { + } else if (this.dataDoc.simulationType == "Pulley") { this.dataDoc.showForces = (true); this.setupPulley(); this.dataDoc.selectedTutorial = (tutorials.pulley); @@ -352,9 +354,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi } componentDidUpdate() { - this.xMax = this.layoutDoc._width*0.08; - this.yMax = this.layoutDoc._height*0.08; - this.radius = 0.1*this.layoutDoc._height; + this.xMax = this.layoutDoc._width*0.08 ?? 500; + this.yMax = this.layoutDoc._height*0.08 ?? 500; + this.radius = 0.1*this.layoutDoc._height ?? 50; } // Helper function to go between display and real values @@ -368,12 +370,12 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi // Update forces when coefficient of static friction changes in freeform mode updateForcesWithFriction = ( coefficient: number, - width: number = this.wedgeWidth, - height: number = this.wedgeHeight + width: number = this.dataDoc.wedgeWidth, + height: number = this.dataDoc.wedgeHeight ) => { const normalForce: IForce = { description: "Normal Force", - magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass, + magnitude: Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)) * this.dataDoc.mass, directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI, component: false, @@ -382,14 +384,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi description: "Static Friction Force", magnitude: coefficient * - Math.abs(this.gravity) * + Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)) * - this.mass, + this.dataDoc.mass, directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI, component: false, }; // reduce magnitude or friction force if necessary such that block cannot slide up plane - let yForce = -Math.abs(this.gravity) * this.mass; + let yForce = -Math.abs(this.dataDoc.gravity) * this.dataDoc.mass; yForce += normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180); @@ -400,19 +402,19 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + - Math.abs(this.gravity) * this.mass) / + Math.abs(this.dataDoc.gravity) * this.dataDoc.mass) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180); } const frictionForceComponent: IForce = { description: "Static Friction Force", magnitude: - coefficient * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)), + coefficient * Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)), directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI, component: true, }; const normalForceComponent: IForce = { description: "Normal Force", - magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)), + magnitude: Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)), directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI, component: true, @@ -420,8 +422,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi const gravityParallel: IForce = { description: "Gravity Parallel Component", magnitude: - this.mass * - Math.abs(this.gravity) * + this.dataDoc.mass * + Math.abs(this.dataDoc.gravity) * Math.sin(Math.PI / 2 - Math.atan(height / width)), directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI + 180, @@ -430,15 +432,15 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi const gravityPerpendicular: IForce = { description: "Gravity Perpendicular Component", magnitude: - this.mass * - Math.abs(this.gravity) * + this.dataDoc.mass * + Math.abs(this.dataDoc.gravity) * Math.cos(Math.PI / 2 - Math.atan(height / width)), directionInDegrees: 360 - (Math.atan(height / width) * 180) / Math.PI, component: true, }; const gravityForce: IForce = { description: "Gravity", - magnitude: this.mass * Math.abs(this.gravity), + magnitude: this.dataDoc.mass * Math.abs(this.dataDoc.gravity), directionInDegrees: 270, component: false, }; @@ -767,7 +769,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi if (this.dataDoc.questionNumber == questions.inclinePlane.length - 1) { this.dataDoc.questionNumber = (0); } else { - this.dataDoc.questionNumber =(questionNumber + 1); + this.dataDoc.questionNumber =(this.dataDoc.questionNumber + 1); } question = questions.inclinePlane[this.dataDoc.questionNumber]; @@ -1104,7 +1106,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi let yPos = this.yMin + 200; this.dataDoc.startPosY = (yPos); this.dataDoc.startPosX = (xPos); - this.dataDoc.positionYDisplay = (getDisplayYPos(yPos)); + this.dataDoc.positionYDisplay = (this.getDisplayYPos(yPos)); this.dataDoc.positionXDisplay = (xPos); let tensionMag = (this.dataDoc.mass * Math.abs(this.dataDoc.gravity)) / (2 * Math.sin(Math.PI / 4)); const tensionForce1: IForce = { @@ -1135,9 +1137,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.showComponentForces = (false); this.dataDoc.startPosY = ((this.yMax + this.yMin) / 2); this.dataDoc.startPosX = ((this.xMin + this.xMax) / 2 - 105); - this.dataDoc.positionYDisplay = (getDisplayYPos((this.yMax + this.yMin) / 2)); + this.dataDoc.positionYDisplay = (this.getDisplayYPos((this.yMax + this.yMin) / 2)); this.dataDoc.positionXDisplay = ((this.xMin + this.xMax) / 2 - 105); - let a = (-1 * ((mass - mass2) * Math.abs(gravity))) / (mass + mass2); + let a = (-1 * ((this.dataDoc.mass - this.dataDoc.mass2) * Math.abs(this.dataDoc.gravity))) / (this.dataDoc.mass + this.dataDoc.mass2); const gravityForce1: IForce = { description: "Gravity", magnitude: this.dataDoc.mass * Math.abs(this.dataDoc.gravity), @@ -1165,10 +1167,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi }; this.dataDoc.updatedForces = ([gravityForce1, tensionForce1]); this.dataDoc.startForces = ([gravityForce1, tensionForce1]); - this.dataDoc.startPosY2 = ((yMax + yMin) / 2); - this.dataDoc.startPosX2 = ((xMin + xMax) / 2 + 5); - this.dataDoc.positionYDisplay2 = (getDisplayYPos((yMax + yMin) / 2)); - this.dataDoc.positionXDisplay2 = ((xMin + xMax) / 2 + 5); + this.dataDoc.startPosY2 = ((this.props.yMax + this.props.yMin) / 2); + this.dataDoc.startPosX2 = ((this.props.xMin + this.props.xMax) / 2 + 5); + this.dataDoc.positionYDisplay2 = (this.getDisplayYPos((this.props.yMax + this.props.yMin) / 2)); + this.dataDoc.positionXDisplay2 = ((this.props.xMin + this.props.xMax) / 2 + 5); this.dataDoc.updatedForces2 = ([gravityForce2, tensionForce2]); this.dataDoc.startForces2 = ([gravityForce2, tensionForce2]); this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); @@ -1229,7 +1231,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi } render () { - <div className="physicsSimApp"> + return <div className="physicsSimApp"> <div className="mechanicsSimulationContainer"> <div className="mechanicsSimulationContentContainer" @@ -1533,16 +1535,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi this.dataDoc.selectedTutorial.steps[step].showMagnitude ); }} - disabled={stepNumber == 0} + disabled={this.dataDoc.stepNumber == 0} > <ArrowLeftIcon /> </IconButton> <div> <h3> Step {this.dataDoc.stepNumber + 1}:{" "} - {this.dataDoc.selectedTutorial.steps[stepNumber].description} + {this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].description} </h3> - <p>{this.dataDoc.selectedTutorial.steps[stepNumber].content}</p> + <p>{this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].content}</p> </div> <IconButton onClick={() => { @@ -1849,7 +1851,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi step={1} unit={"N/m"} upperBound={500} - value={springConstant} + value={this.dataDoc.springConstant} effect={(val: number) => { this.dataDoc.simulationReset(!this.dataDoc.simulationReset); }} @@ -1986,9 +1988,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi value={this.dataDoc.pendulumAngle} effect={(value) => { this.dataDoc.startPendulumAngle = (value); - if (simulationType == "Pendulum") { + if (this.dataDoc.simulationType == "Pendulum") { const mag = - mass * + this.dataDoc.mass * Math.abs(this.dataDoc.gravity) * Math.cos((value * Math.PI) / 180); @@ -2027,8 +2029,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi length * Math.cos(((90 - value) * Math.PI) / 180); const y = length * Math.sin(((90 - value) * Math.PI) / 180); - const xPos = this.xMax / 2 - x - radius; - const yPos = y - radius - 5; + const xPos = this.xMax / 2 - x - this.dataDoc.radius; + const yPos = y - this.dataDoc.radius - 5; this.dataDoc.startPosX = (xPos); this.dataDoc.startPosY= (yPos); @@ -2057,7 +2059,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi ]); this.dataDoc.adjustPendulumAngle = ({ angle: value, - length: pendulumLength, + length: this.dataDoc.pendulumLength, }); this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); } @@ -2075,7 +2077,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi upperBound={400} value={Math.round(this.dataDoc.pendulumLength)} effect={(value) => { - if (simulationType == "Pendulum") { + if (this.dataDoc.simulationType == "Pendulum") { this.dataDoc.adjustPendulumAngle = ({ angle: this.dataDoc.pendulumAngle, length: value, @@ -2413,7 +2415,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi <div style={{ position: "fixed", - top: this.layoutDoc._height - 120 + 20 + "px", + top: this.layoutDoc._height ?? 500 - 120 + 20 + "px", left: this.xMin + 90 - 80 + "px", zIndex: -10000, }} @@ -2454,16 +2456,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi <p style={{ position: "fixed", - top: this.layoutDoc._height - 120 + 40 + "px", + top: this.layoutDoc._height?? 500 - 120 + 40 + "px", left: this.xMin + 90 - 80 + "px", }} > - {simulationType == "Circular Motion" ? "Z" : "Y"} + {this.dataDoc.simulationType == "Circular Motion" ? "Z" : "Y"} </p> <p style={{ position: "fixed", - top: this.layoutDoc._height - 120 + 80 + "px", + top: this.layoutDoc._height ?? 500- 120 + 80 + "px", left: this.xMin + 90 - 40 + "px", }} > |