aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/UndoStack.scss29
-rw-r--r--src/client/views/UndoStack.tsx47
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx12
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss90
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx1987
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx179
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json161
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json600
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx34
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx990
-rw-r--r--src/fields/DocSymbols.ts26
11 files changed, 4150 insertions, 5 deletions
diff --git a/src/client/views/UndoStack.scss b/src/client/views/UndoStack.scss
new file mode 100644
index 000000000..ab21e6d7e
--- /dev/null
+++ b/src/client/views/UndoStack.scss
@@ -0,0 +1,29 @@
+.undoStack-outerContainer {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ pointer-events: all;
+ padding-left: 4px;
+}
+
+.undoStack-resultContainer {
+ border-radius: 5px;
+}
+
+.undoStack-commandInput {
+ width: 100%;
+}
+
+.undoStack-commandResult,
+.undoStack-commandString {
+ overflow-wrap: break-word;
+}
+
+.undoStack-commandsContainer {
+ background-color: whitesmoke;
+ flex: 1 1 auto;
+ overflow-y: scroll;
+ height: 30px;
+ border-radius: 5px;
+}
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
new file mode 100644
index 000000000..f5af09e5b
--- /dev/null
+++ b/src/client/views/UndoStack.tsx
@@ -0,0 +1,47 @@
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { UndoManager } from '../util/UndoManager';
+import './UndoStack.scss';
+
+interface UndoStackProps {
+ width?: number;
+ height?: number;
+ inline?: boolean;
+}
+@observer
+export class UndoStack extends React.Component<UndoStackProps> {
+ @observable static HideInline: boolean;
+ @observable static Expand: boolean;
+ render() {
+ return this.props.inline && UndoStack.HideInline ? null : (
+ <div
+ className="undoStack-outerContainer"
+ style={{ width: this.props.width, height: this.props.height ? (UndoStack.Expand ? 4 : 1) * this.props.height : undefined, top: UndoStack.Expand && this.props.height ? -this.props.height * 3 : undefined }}
+ onClick={action(e => (UndoStack.Expand = !UndoStack.Expand))}
+ onDoubleClick={action(e => (UndoStack.Expand = UndoStack.HideInline = false))}>
+ <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
+ <div className="undoStack-resultContainer" key={0}>
+ <div className="undoStack-commandString" style={{ fontWeight: 'bold', textAlign: 'center' }}>
+ Undo/Redo Stack
+ </div>
+ </div>
+ {UndoManager.undoStackNames.map((name, i) => (
+ <div className="undoStack-resultContainer" key={i}>
+ <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
+ </div>
+ ))}
+ {Array.from(UndoManager.redoStackNames)
+ .reverse()
+ .map((name, i) => (
+ <div className="undoStack-resultContainer" key={i}>
+ <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
+ {name.replace(/[^\.]*\./, '')}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d5787db3d..bfb0a6161 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -7,7 +7,8 @@ import { truncateSync } from 'fs';
import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
-import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Width } from '../../../../fields/DocSymbols';
import { Id } from '../../../../fields/FieldSymbols';
import { InkTool } from '../../../../fields/InkField';
import { ScriptField } from '../../../../fields/ScriptField';
@@ -449,7 +450,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
.ScreenToLocalTransform()
.scale(this.props.NativeDimScaling?.() || 1)
.transformDirection(delta[0], delta[1]);
- const fullWidth = this.layoutDoc[WidthSym]();
+ const fullWidth = this.layoutDoc[Width]();
const mapWidth = fullWidth - this.sidebarWidth();
if (this.sidebarWidth() + localDelta[0] > 0) {
this._showSidebar = true;
@@ -640,16 +641,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
};
- incrementer: number = 0;
+ // incrementer: number = 0;
/*
* Creates Pushpin doc and adds it to the list of annotations
*/
@action
createPushpin = (latitude: number, longitude: number) => {
// Stores the pushpin as a MapMarkerDocument
- const mapMarker = Docs.Create.PushpinDocument(NumCast(latitude), NumCast(longitude), false, [], {},'pushpinIDamongus'+this.incrementer);
+ const mapMarker = Docs.Create.PushpinDocument(NumCast(latitude), NumCast(longitude), false, [], {}
+ // ,'pushpinIDamongus'+ this.incrementer++
+ );
this.addDocument(mapMarker, this.annotationKey);
- this.incrementer++;
// mapMarker.infoWindowOpen = true;
};
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
new file mode 100644
index 000000000..ac2c611c7
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
@@ -0,0 +1,90 @@
+.physicsSimApp {
+ * {
+ box-sizing: border-box;
+ font-size: 14px;
+ }
+
+ .mechanicsSimulationContainer {
+ background-color: white;
+ height: 100%;
+ width: 100%;
+ display: flex;
+
+ .mechanicsSimulationEquationContainer {
+ position: fixed;
+ left: 60%;
+ padding: 1em;
+ height: 100%;
+ transform-origin: top left;
+
+ .mechanicsSimulationControls {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ .rod,
+ .spring,
+ .wheel,
+ .showvecs,
+ .wedge {
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ }
+
+ .coordinateSystem {
+ z-index: -100;
+ }
+
+ th,
+ td {
+ border-collapse: collapse;
+ padding: 1em;
+ }
+
+ table {
+ min-width: 300px;
+ }
+
+ tr:nth-child(even) {
+ background-color: #d6eeee;
+ }
+
+ button {
+ z-index: 50;
+ }
+
+ .angleLabel {
+ font-weight: bold;
+ font-size: 20px;
+ user-select: none;
+ pointer-events: none;
+ }
+
+ .mechanicsSimulationSettingsMenu {
+ width: 100%;
+ height: 100%;
+ font-size: 12px;
+ background-color: rgb(224, 224, 224);
+ border-radius: 2px;
+ border-color: black;
+ border-style: solid;
+ padding: 10px;
+ position: fixed;
+ z-index: 1000;
+ }
+
+ .mechanicsSimulationSettingsMenuRow {
+ display: flex;
+ }
+
+ .mechanicsSimulationSettingsMenuRowDescription {
+ width: 50%;
+ }
+
+ .dropdownMenu {
+ z-index: 50;
+ }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
new file mode 100644
index 000000000..2c06282ed
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -0,0 +1,1987 @@
+// import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
+// import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+// import PauseIcon from '@mui/icons-material/Pause';
+// import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+// 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 { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+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';
+import InputField from './PhysicsSimulationInputField';
+import * as questions from './PhysicsSimulationQuestions.json';
+import * as tutorials from './PhysicsSimulationTutorial.json';
+import Wall from './PhysicsSimulationWall';
+import Weight from './PhysicsSimulationWeight';
+import React = require('react');
+
+interface IWallProps {
+ length: number;
+ xPos: number;
+ yPos: number;
+ angleInDegrees: number;
+}
+interface IForce {
+ description: string;
+ magnitude: number;
+ directionInDegrees: number;
+}
+interface VectorTemplate {
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+ x1: number;
+ y1: number;
+ x2: number;
+ y2: number;
+ weightX: number;
+ weightY: number;
+}
+interface QuestionTemplate {
+ questionSetup: string[];
+ variablesForQuestionSetup: string[];
+ question: string;
+ answerParts: string[];
+ answerSolutionDescriptions: string[];
+ goal: string;
+ hints: { description: string; content: string }[];
+}
+
+interface TutorialTemplate {
+ question: string;
+ steps: {
+ description: string;
+ content: string;
+ forces: {
+ description: string;
+ magnitude: number;
+ directionInDegrees: number;
+ component: boolean;
+ }[];
+ showMagnitude: boolean;
+ }[];
+}
+
+@observer
+export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(PhysicsSimulationBox, fieldKey);
+ }
+
+ _widthDisposer: IReactionDisposer | undefined;
+ @observable _simReset = 0;
+
+ // semi-Constants
+ xMin = 0;
+ yMin = 0;
+ xMax = this.props.PanelWidth() * 0.6;
+ yMax = this.props.PanelHeight();
+ color = `rgba(0,0,0,0.5)`;
+ radius = 50;
+ wallPositions: IWallProps[] = [];
+
+ @computed get circularMotionRadius() {
+ return (NumCast(this.dataDoc.circularMotionRadius, 150) * this.props.PanelWidth()) / 1000;
+ }
+ @computed get gravity() {
+ return NumCast(this.dataDoc.simulation_gravity, -9.81);
+ }
+ @computed get simulationType() {
+ return StrCast(this.dataDoc.simulation_type, 'Inclined Plane');
+ }
+ @computed get simulationMode() {
+ return StrCast(this.dataDoc.simulation_mode, 'Freeform');
+ }
+ // Used for spring simulation
+ @computed get springConstant() {
+ return NumCast(this.dataDoc.spring_constant, 0.5);
+ }
+ @computed get springLengthRest() {
+ return NumCast(this.dataDoc.spring_lengthRest, 200);
+ }
+ @computed get springLengthStart() {
+ return NumCast(this.dataDoc.spring_lengthStart, 200);
+ }
+
+ @computed get pendulumAngle() {
+ return NumCast(this.dataDoc.pendulum_angle);
+ }
+ @computed get pendulumAngleStart() {
+ return NumCast(this.dataDoc.pendulum_angleStart);
+ }
+ @computed get pendulumLength() {
+ return NumCast(this.dataDoc.pendulum_length);
+ }
+ @computed get pendulumLengthStart() {
+ return NumCast(this.dataDoc.pendulum_lengthStart);
+ }
+
+ // Used for wedge simulation
+ @computed get wedgeAngle() {
+ return NumCast(this.dataDoc.wedge_angle, 26);
+ }
+ @computed get wedgeHeight() {
+ return NumCast(this.dataDoc.wedge_height, Math.tan((26 * Math.PI) / 180) * this.xMax * 0.5);
+ }
+ @computed get wedgeWidth() {
+ return NumCast(this.dataDoc.wedge_width, this.xMax * 0.5);
+ }
+ @computed get mass1() {
+ return NumCast(this.dataDoc.mass1, 1);
+ }
+ @computed get mass2() {
+ return NumCast(this.dataDoc.mass2, 1);
+ }
+
+ @computed get mass1Radius() {
+ return NumCast(this.dataDoc.mass1_radius, 30);
+ }
+ @computed get mass1PosXStart() {
+ return NumCast(this.dataDoc.mass1_positionXstart);
+ }
+ @computed get mass1PosYStart() {
+ return NumCast(this.dataDoc.mass1_positionYstart);
+ }
+ @computed get mass1VelXStart() {
+ return NumCast(this.dataDoc.mass1_velocityXstart);
+ }
+ @computed get mass1VelYStart() {
+ return NumCast(this.dataDoc.mass1_velocityYstart);
+ }
+
+ @computed get mass2PosXStart() {
+ return NumCast(this.dataDoc.mass2_positionXstart);
+ }
+ @computed get mass2PosYStart() {
+ return NumCast(this.dataDoc.mass2_positionYstart);
+ }
+ @computed get mass2VelXStart() {
+ return NumCast(this.dataDoc.mass2_velocityXstart);
+ }
+ @computed get mass2VelYStart() {
+ return NumCast(this.dataDoc.mass2_velocityYstart);
+ }
+
+ @computed get selectedQuestion() {
+ return this.dataDoc.selectedQuestion ? (JSON.parse(StrCast(this.dataDoc.selectedQuestion)) as QuestionTemplate) : questions.inclinePlane[0];
+ }
+ @computed get tutorial() {
+ return this.dataDoc.tutorial ? (JSON.parse(StrCast(this.dataDoc.tutorial)) as TutorialTemplate) : tutorials.inclinePlane;
+ }
+ @computed get selectedSolutions() {
+ return NumListCast(this.dataDoc.selectedSolutions);
+ }
+ @computed get questionPartOne() {
+ return StrCast(this.dataDoc.questionPartOne);
+ }
+ @computed get questionPartTwo() {
+ return StrCast(this.dataDoc.questionPartTwo);
+ }
+
+ componentWillUnmount() {
+ this._widthDisposer?.();
+ }
+
+ componentDidMount() {
+ // Setup and update simulation
+ this._widthDisposer = reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
+
+ // Create walls
+ this.wallPositions = [
+ { length: 100, xPos: 0, yPos: 0, angleInDegrees: 0 },
+ { length: 100, xPos: 0, yPos: 100, angleInDegrees: 0 },
+ { length: 100, xPos: 0, yPos: 0, angleInDegrees: 90 },
+ { length: 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 },
+ ];
+ }
+
+ componentDidUpdate() {
+ if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) {
+ this.xMax = this.props.PanelWidth() * 0.6;
+ this.yMax = this.props.PanelHeight();
+ this.setupSimulation();
+ }
+ }
+
+ gravityForce = (mass: number): IForce => ({
+ description: 'Gravity',
+ magnitude: mass * Math.abs(this.gravity),
+ directionInDegrees: 270,
+ });
+
+ @action
+ setupSimulation = () => {
+ const simulationType = this.simulationType;
+ const mode = this.simulationMode;
+ this.dataDoc.simulation_paused = true;
+ if (simulationType != 'Circular Motion') {
+ this.dataDoc.mass1_velocityXstart = 0;
+ this.dataDoc.mass1_velocityYstart = 0;
+ this.dataDoc.mass1_velocityX = 0;
+ this.dataDoc.mass1_velocityY = 0;
+ }
+ if (mode == 'Freeform') {
+ this.dataDoc.simulation_showForceMagnitudes = true;
+ // prettier-ignore
+ switch (simulationType) {
+ case 'One Weight':
+ this.dataDoc.simulation_showComponentForces = false;
+ this.dataDoc.mass1_positionYstart = this.yMin + this.mass1Radius;
+ this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+ this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + this.mass1Radius);
+ this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
+ this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+ break;
+ case 'Inclined Plane': this.setupInclinedPlane(); break;
+ case 'Pendulum': this.setupPendulum(); break;
+ case 'Spring': this.setupSpring(); break;
+ case 'Circular Motion': this.setupCircular(20); break;
+ case 'Pulley': this.setupPulley(); break;
+ case 'Suspension': this.setupSuspension();break;
+ }
+ this._simReset++;
+ } else if (mode == 'Review') {
+ this.dataDoc.simulation_showComponentForces = false;
+ this.dataDoc.simulation_showForceMagnitudes = true;
+ this.dataDoc.simulation_showAcceleration = false;
+ this.dataDoc.simulation_showVelocity = false;
+ this.dataDoc.simulation_showForces = true;
+ this.generateNewQuestion();
+ // 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;
+ this.dataDoc.tutorial_stepNumber = 0;
+ this.dataDoc.simulation_showAcceleration = false;
+ if (this.simulationType != 'Circular Motion') {
+ this.dataDoc.mass1_velocityX = 0;
+ this.dataDoc.mass1_velocityY = 0;
+ this.dataDoc.simulation_showVelocity = false;
+ } else {
+ this.dataDoc.mass1_velocityX = 20;
+ this.dataDoc.mass1_velocityY = 0;
+ this.dataDoc.simulation_showVelocity = true;
+ }
+
+ 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 - this.mass1Radius;
+ 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 - this.mass1Radius;
+ 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.wedge_angle = 26;
+ this.setupInclinedPlane();
+ this.dataDoc.simulation_showForces = true;
+ 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._simReset++;
+ }
+ };
+
+ // Helper function to go between display and real values
+ getDisplayYPos = (yPos: number) => this.yMax - yPos - 2 * this.mass1Radius + 5;
+ getYPosFromDisplay = (yDisplay: number) => this.yMax - yDisplay - 2 * this.mass1Radius + 5;
+
+ // Update forces when coefficient of static friction changes in freeform mode
+ updateForcesWithFriction = (coefficient: number, width = this.wedgeWidth, height = this.wedgeHeight) => {
+ const normalForce: IForce = {
+ description: 'Normal Force',
+ magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass1,
+ directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
+ };
+ let frictionForce: IForce = {
+ description: 'Static Friction Force',
+ magnitude: coefficient * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass1,
+ directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI,
+ };
+ // reduce magnitude or friction force if necessary such that block cannot slide up plane
+ let yForce = -Math.abs(this.gravity) * this.mass1;
+ yForce += normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180);
+ yForce += frictionForce.magnitude * Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+ if (yForce > 0) {
+ frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + Math.abs(this.gravity) * this.mass1) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+ }
+
+ const normalForceComponent: IForce = {
+ description: 'Normal Force',
+ magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
+ directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
+ };
+ const gravityParallel: IForce = {
+ description: 'Gravity Parallel Component',
+ magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin(Math.PI / 2 - Math.atan(height / width)),
+ directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI + 180,
+ };
+ const gravityPerpendicular: IForce = {
+ description: 'Gravity Perpendicular Component',
+ magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(Math.PI / 2 - Math.atan(height / width)),
+ directionInDegrees: 360 - (Math.atan(height / width) * 180) / Math.PI,
+ };
+ 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]);
+ this.dataDoc.mass1_componentForces = JSON.stringify([frictionForce, normalForceComponent, gravityParallel, gravityPerpendicular]);
+ } else {
+ this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce]);
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce]);
+ this.dataDoc.mass1_componentForces = JSON.stringify([normalForceComponent, gravityParallel, gravityPerpendicular]);
+ }
+ };
+
+ // 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(radAng) * this.dataDoc.wedge_width;
+
+ // update weight position based on updated wedge width/height
+ let yPos = this.yMax - this.dataDoc.wedge_height - this.mass1Radius * Math.cos(radAng) - this.mass1Radius;
+ let xPos = this.xMax * 0.25 + this.mass1Radius * Math.sin(radAng) - this.mass1Radius;
+
+ this.dataDoc.mass1_positionXstart = xPos;
+ this.dataDoc.mass1_positionYstart = yPos;
+ if (this.simulationMode == 'Freeform') {
+ this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction), this.dataDoc.wedge_width, Math.tan(radAng) * this.dataDoc.wedge_width);
+ }
+ };
+
+ // In review mode, update forces when coefficient of static friction changed
+ updateReviewForcesBasedOnCoefficient = (coefficient: number) => {
+ let theta = this.wedgeAngle;
+ let index = this.selectedQuestion.variablesForQuestionSetup.indexOf('theta - max 45');
+ if (index >= 0) {
+ theta = NumListCast(this.dataDoc.questionVariables)[index];
+ }
+ if (isNaN(theta)) {
+ return;
+ }
+ this.dataDoc.review_GravityMagnitude = Math.abs(this.gravity);
+ this.dataDoc.review_GravityAngle = 270;
+ this.dataDoc.review_NormalMagnitude = Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180);
+ this.dataDoc.review_NormalAngle = 90 - theta;
+ let yForce = -Math.abs(this.gravity);
+ yForce += Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180) * Math.sin(((90 - theta) * Math.PI) / 180);
+ yForce += coefficient * Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180) * Math.sin(((180 - theta) * Math.PI) / 180);
+ let friction = coefficient * Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180);
+ if (yForce > 0) {
+ friction = (-(Math.abs(this.gravity) * Math.cos((theta * Math.PI) / 180)) * Math.sin(((90 - theta) * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin(((180 - theta) * Math.PI) / 180);
+ }
+ this.dataDoc.review_StaticMagnitude = friction;
+ this.dataDoc.review_StaticAngle = 180 - theta;
+ };
+
+ // In review mode, update forces when wedge angle changed
+ updateReviewForcesBasedOnAngle = (angle: number) => {
+ this.dataDoc.review_GravityMagnitude = Math.abs(this.gravity);
+ this.dataDoc.review_GravityAngle = 270;
+ this.dataDoc.review_NormalMagnitude = Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180);
+ this.dataDoc.review_NormalAngle = 90 - angle;
+ let yForce = -Math.abs(this.gravity);
+ yForce += Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180) * Math.sin(((90 - angle) * Math.PI) / 180);
+ yForce += NumCast(this.dataDoc.review_Coefficient) * Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180) * Math.sin(((180 - angle) * Math.PI) / 180);
+ let friction = NumCast(this.dataDoc.review_Coefficient) * Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180);
+ if (yForce > 0) {
+ friction = (-(Math.abs(this.gravity) * Math.cos((angle * Math.PI) / 180)) * Math.sin(((90 - angle) * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin(((180 - angle) * Math.PI) / 180);
+ }
+ this.dataDoc.review_StaticMagnitude = friction;
+ this.dataDoc.review_StaticAngle = 180 - angle;
+ };
+
+ // Solve for the correct answers to the generated problem
+ getAnswersToQuestion = (question: QuestionTemplate, questionVars: number[]) => {
+ const solutions: number[] = [];
+
+ let theta = this.wedgeAngle;
+ let index = question.variablesForQuestionSetup.indexOf('theta - max 45');
+ if (index >= 0) {
+ theta = questionVars[index];
+ }
+ let muS: number = NumCast(this.dataDoc.coefficientOfStaticFriction);
+ index = question.variablesForQuestionSetup.indexOf('coefficient of static friction');
+ if (index >= 0) {
+ muS = questionVars[index];
+ }
+
+ for (let i = 0; i < question.answerSolutionDescriptions.length; i++) {
+ const description = question.answerSolutionDescriptions[i];
+ if (!isNaN(NumCast(description))) {
+ solutions.push(NumCast(description));
+ } else if (description == 'solve normal force angle from wedge angle') {
+ solutions.push(90 - theta);
+ } else if (description == 'solve normal force magnitude from wedge angle') {
+ solutions.push(Math.abs(this.gravity) * Math.cos((theta / 180) * Math.PI));
+ } else if (description == 'solve static force magnitude from wedge angle given equilibrium') {
+ let normalForceMagnitude = Math.abs(this.gravity) * Math.cos((theta / 180) * Math.PI);
+ let normalForceAngle = 90 - theta;
+ let frictionForceAngle = 180 - theta;
+ let frictionForceMagnitude = (-normalForceMagnitude * Math.sin((normalForceAngle * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin((frictionForceAngle * Math.PI) / 180);
+ solutions.push(frictionForceMagnitude);
+ } else if (description == 'solve static force angle from wedge angle given equilibrium') {
+ solutions.push(180 - theta);
+ } else if (description == 'solve minimum static coefficient from wedge angle given equilibrium') {
+ let normalForceMagnitude = Math.abs(this.gravity) * Math.cos((theta / 180) * Math.PI);
+ let normalForceAngle = 90 - theta;
+ let frictionForceAngle = 180 - theta;
+ let frictionForceMagnitude = (-normalForceMagnitude * Math.sin((normalForceAngle * Math.PI) / 180) + Math.abs(this.gravity)) / Math.sin((frictionForceAngle * Math.PI) / 180);
+ let frictionCoefficient = frictionForceMagnitude / normalForceMagnitude;
+ solutions.push(frictionCoefficient);
+ } else if (description == 'solve maximum wedge angle from coefficient of static friction given equilibrium') {
+ solutions.push((Math.atan(muS) * 180) / Math.PI);
+ }
+ }
+ this.dataDoc.selectedSolutions = new List<number>(solutions);
+ return solutions;
+ };
+
+ // In review mode, check if input answers match correct answers and optionally generate alert
+ checkAnswers = (showAlert: boolean = true) => {
+ let error: boolean = false;
+ let epsilon: number = 0.01;
+ if (this.selectedQuestion) {
+ for (let i = 0; i < this.selectedQuestion.answerParts.length; i++) {
+ if (this.selectedQuestion.answerParts[i] == 'force of gravity') {
+ if (Math.abs(NumCast(this.dataDoc.review_GravityMagnitude) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'angle of gravity') {
+ if (Math.abs(NumCast(this.dataDoc.review_GravityAngle) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'normal force') {
+ if (Math.abs(NumCast(this.dataDoc.review_NormalMagnitude) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'angle of normal force') {
+ if (Math.abs(NumCast(this.dataDoc.review_NormalAngle) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'force of static friction') {
+ if (Math.abs(NumCast(this.dataDoc.review_StaticMagnitude) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'angle of static friction') {
+ if (Math.abs(NumCast(this.dataDoc.review_StaticAngle) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'coefficient of static friction') {
+ if (Math.abs(NumCast(this.dataDoc.coefficientOfStaticFriction) - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ } else if (this.selectedQuestion.answerParts[i] == 'wedge angle') {
+ if (Math.abs(this.wedgeAngle - this.selectedSolutions[i]) > epsilon) {
+ error = true;
+ }
+ }
+ }
+ }
+ if (showAlert) {
+ this.dataDoc.simulation_paused = false;
+ setTimeout(() => (this.dataDoc.simulation_paused = true), 3000);
+ }
+ if (this.selectedQuestion.goal == 'noMovement') {
+ this.dataDoc.noMovement = !error;
+ }
+ };
+
+ // Reset all review values to default
+ resetReviewValuesToDefault = () => {
+ this.dataDoc.review_GravityMagnitude = 0;
+ this.dataDoc.review_GravityAngle = 0;
+ this.dataDoc.review_NormalMagnitude = 0;
+ this.dataDoc.review_NormalAngle = 0;
+ this.dataDoc.review_StaticMagnitude = 0;
+ this.dataDoc.review_StaticAngle = 0;
+ this.dataDoc.coefficientOfKineticFriction = 0;
+ this.dataDoc.simulation_paused = true;
+ };
+
+ // In review mode, reset problem variables and generate a new question
+ generateNewQuestion = () => {
+ this.resetReviewValuesToDefault();
+
+ const vars: number[] = [];
+ let question: QuestionTemplate = questions.inclinePlane[0];
+
+ if (this.simulationType === 'Inclined Plane') {
+ this.dataDoc.questionNumber = (NumCast(this.dataDoc.questionNumber) + 1) % questions.inclinePlane.length;
+ question = questions.inclinePlane[NumCast(this.dataDoc.questionNumber)];
+
+ let coefficient = 0;
+ let wedge_angle = 0;
+
+ for (let i = 0; i < question.variablesForQuestionSetup.length; i++) {
+ if (question.variablesForQuestionSetup[i] == 'theta - max 45') {
+ let randValue = Math.floor(Math.random() * 44 + 1);
+ vars.push(randValue);
+ wedge_angle = randValue;
+ } else if (question.variablesForQuestionSetup[i] == 'coefficient of static friction') {
+ let randValue = Math.round(Math.random() * 1000) / 1000;
+ vars.push(randValue);
+ coefficient = randValue;
+ }
+ }
+ this.dataDoc.wedge_angle = wedge_angle;
+ this.changeWedgeBasedOnNewAngle(wedge_angle);
+ this.dataDoc.coefficientOfStaticFriction = coefficient;
+ this.dataDoc.review_Coefficient = coefficient;
+ }
+ let q = '';
+ for (let i = 0; i < question.questionSetup.length; i++) {
+ q += question.questionSetup[i];
+ if (i != question.questionSetup.length - 1) {
+ q += vars[i];
+ if (question.variablesForQuestionSetup[i].includes('theta')) {
+ q += ' degree (≈' + Math.round((1000 * (vars[i] * Math.PI)) / 180) / 1000 + ' rad)';
+ }
+ }
+ }
+ this.dataDoc.questionVariables = new List<number>(vars);
+ this.dataDoc.selectedQuestion = JSON.stringify(question);
+ this.dataDoc.questionPartOne = q;
+ this.dataDoc.questionPartTwo = question.question;
+ this.dataDoc.answers = new List<number>(this.getAnswersToQuestion(question, vars));
+ //this.dataDoc.simulation_reset = (!this.dataDoc.simulation_reset);
+ };
+
+ // Default setup for uniform circular motion simulation
+ @action
+ setupCircular = (value: number) => {
+ this.dataDoc.simulation_showComponentForces = false;
+ this.dataDoc.mass1_velocityYstart = 0;
+ this.dataDoc.mass1_velocityXstart = value;
+ let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+ let yPos = (this.yMax + this.yMin) / 2 + this.circularMotionRadius - this.mass1Radius;
+ this.dataDoc.mass1_positionYstart = yPos;
+ this.dataDoc.mass1_positionXstart = xPos;
+ const tensionForce: IForce = {
+ description: 'Centripetal Force',
+ magnitude: (this.dataDoc.mass1_velocityXstart ** 2 * this.mass1) / this.circularMotionRadius,
+ directionInDegrees: 90,
+ };
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce]);
+ this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce]);
+ this._simReset++;
+ };
+
+ setupInclinedPlane = () => {
+ this.changeWedgeBasedOnNewAngle(this.wedgeAngle);
+ this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
+ this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
+ };
+
+ // Default setup for pendulum simulation
+ setupPendulum = () => {
+ const length = (300 * this.props.PanelWidth()) / 1000;
+ const angle = 30;
+ const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
+ const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
+ const xPos = this.xMax / 2 - x - this.mass1Radius;
+ const yPos = y - this.mass1Radius - 5;
+ this.dataDoc.mass1_positionXstart = xPos;
+ this.dataDoc.mass1_positionYstart = yPos;
+ const forceOfTension: IForce = {
+ description: 'Tension',
+ magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin((60 * Math.PI) / 180),
+ directionInDegrees: 90 - angle,
+ };
+ const gravityParallel: IForce = {
+ description: 'Gravity Parallel Component',
+ magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin(((90 - angle) * Math.PI) / 180),
+ directionInDegrees: -angle - 90,
+ };
+ const gravityPerpendicular: IForce = {
+ description: 'Gravity Perpendicular Component',
+ magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(((90 - angle) * Math.PI) / 180),
+ directionInDegrees: -angle,
+ };
+
+ this.dataDoc.mass1_componentForces = JSON.stringify([forceOfTension, gravityParallel, gravityPerpendicular]);
+ 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;
+ };
+
+ // Default setup for spring simulation
+ @action
+ setupSpring = () => {
+ this.dataDoc.simulation_showComponentForces = false;
+ 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 - this.mass1Radius;
+ this.dataDoc.mass1_positionYstart = 200;
+ this.dataDoc.spring_constant = 0.5;
+ this.dataDoc.spring_lengthRest = 200;
+ this.dataDoc.spring_lengthStart = 200;
+ this._simReset++;
+ };
+
+ // Default setup for suspension simulation
+ @action
+ setupSuspension = () => {
+ let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+ let yPos = this.yMin + 200;
+ this.dataDoc.mass1_positionYstart = yPos;
+ this.dataDoc.mass1_positionXstart = xPos;
+ this.dataDoc.mass1_positionY = this.getDisplayYPos(yPos);
+ this.dataDoc.mass1_positionX = xPos;
+ let tensionMag = (this.mass1 * Math.abs(this.gravity)) / (2 * Math.sin(Math.PI / 4));
+ const tensionForce1: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag,
+ directionInDegrees: 45,
+ };
+ const tensionForce2: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag,
+ directionInDegrees: 135,
+ };
+ 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._simReset++;
+ };
+
+ // Default setup for pulley simulation
+ @action
+ setupPulley = () => {
+ this.dataDoc.simulation_showComponentForces = false;
+ this.dataDoc.mass1_positionYstart = (this.yMax + this.yMin) / 2;
+ this.dataDoc.mass1_positionXstart = (this.xMin + this.xMax) / 2 - 2 * this.mass1Radius - 5;
+ this.dataDoc.mass1_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
+ this.dataDoc.mass1_positionX = (this.xMin + this.xMax) / 2 - 2 * this.mass1Radius - 5;
+ const a = (-1 * ((this.mass1 - this.mass2) * Math.abs(this.gravity))) / (this.mass1 + this.mass2);
+ const gravityForce1 = this.gravityForce(this.mass1);
+ const tensionForce1: IForce = {
+ description: 'Tension',
+ magnitude: this.mass1 * a + this.mass1 * Math.abs(this.gravity),
+ directionInDegrees: 90,
+ };
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
+ this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
+
+ const gravityForce2 = this.gravityForce(this.mass2);
+ const tensionForce2: IForce = {
+ description: 'Tension',
+ magnitude: -this.mass2 * a + this.mass2 * Math.abs(this.gravity),
+ directionInDegrees: 90,
+ };
+ this.dataDoc.mass2_positionYstart = (this.yMax + this.yMin) / 2;
+ this.dataDoc.mass2_positionXstart = (this.xMin + this.xMax) / 2 + 5;
+ this.dataDoc.mass2_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
+ this.dataDoc.mass2_positionX = (this.xMin + this.xMax) / 2 + 5;
+ this.dataDoc.mass2_forcesUpdated = JSON.stringify([gravityForce2, tensionForce2]);
+ this.dataDoc.mass2_forcesStart = JSON.stringify([gravityForce2, tensionForce2]);
+ this._simReset++;
+ };
+
+ public static parseJSON(json: string) {
+ return !json ? [] : (JSON.parse(json) as IForce[]);
+ }
+
+ // Handle force change in review mode
+ updateReviewModeValues = () => {
+ const forceOfGravityReview: IForce = {
+ description: 'Gravity',
+ magnitude: NumCast(this.dataDoc.review_GravityMagnitude),
+ directionInDegrees: NumCast(this.dataDoc.review_GravityAngle),
+ };
+ const normalForceReview: IForce = {
+ description: 'Normal Force',
+ magnitude: NumCast(this.dataDoc.review_NormalMagnitude),
+ directionInDegrees: NumCast(this.dataDoc.review_NormalAngle),
+ };
+ const staticFrictionForceReview: IForce = {
+ description: 'Static Friction Force',
+ magnitude: NumCast(this.dataDoc.review_StaticMagnitude),
+ directionInDegrees: NumCast(this.dataDoc.review_StaticAngle),
+ };
+ this.dataDoc.mass1_forcesStart = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
+ };
+
+ pause = () => (this.dataDoc.simulation_paused = true);
+ componentForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_componentForces));
+ setComponentForces1 = (forces: IForce[]) => (this.dataDoc.mass1_componentForces = JSON.stringify(forces));
+ componentForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_componentForces));
+ setComponentForces2 = (forces: IForce[]) => (this.dataDoc.mass2_componentForces = JSON.stringify(forces));
+ startForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesStart));
+ startForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesStart));
+ forcesUpdated1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesUpdated));
+ setForcesUpdated1 = (forces: IForce[]) => (this.dataDoc.mass1_forcesUpdated = JSON.stringify(forces));
+ forcesUpdated2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesUpdated));
+ setForcesUpdated2 = (forces: IForce[]) => (this.dataDoc.mass2_forcesUpdated = JSON.stringify(forces));
+ setPosition1 = (xPos: number | undefined, yPos: number | undefined) => {
+ yPos !== undefined && (this.dataDoc.mass1_positionY = Math.round(yPos * 100) / 100);
+ xPos !== undefined && (this.dataDoc.mass1_positionX = Math.round(xPos * 100) / 100);
+ };
+ setPosition2 = (xPos: number | undefined, yPos: number | undefined) => {
+ yPos !== undefined && (this.dataDoc.mass2_positionY = Math.round(yPos * 100) / 100);
+ xPos !== undefined && (this.dataDoc.mass2_positionX = Math.round(xPos * 100) / 100);
+ };
+ setVelocity1 = (xVel: number | undefined, yVel: number | undefined) => {
+ yVel !== undefined && (this.dataDoc.mass1_velocityY = (-1 * Math.round(yVel * 100)) / 100);
+ xVel !== undefined && (this.dataDoc.mass1_velocityX = Math.round(xVel * 100) / 100);
+ };
+ setVelocity2 = (xVel: number | undefined, yVel: number | undefined) => {
+ yVel !== undefined && (this.dataDoc.mass2_velocityY = (-1 * Math.round(yVel * 100)) / 100);
+ xVel !== undefined && (this.dataDoc.mass2_velocityX = Math.round(xVel * 100) / 100);
+ };
+ setAcceleration1 = (xAccel: number, yAccel: number) => {
+ this.dataDoc.mass1_accelerationY = yAccel;
+ this.dataDoc.mass1_accelerationX = xAccel;
+ };
+ setAcceleration2 = (xAccel: number, yAccel: number) => {
+ this.dataDoc.mass2_accelerationY = yAccel;
+ this.dataDoc.mass2_accelerationX = xAccel;
+ };
+ setPendulumAngle = (angle: number | undefined, length: number | undefined) => {
+ angle !== undefined && (this.dataDoc.pendulum_angle = angle);
+ length !== undefined && (this.dataDoc.pendulum_length = length);
+ };
+ setSpringLength = (length: number) => {
+ this.dataDoc.spring_lengthStart = length;
+ };
+ resetRequest = () => this._simReset;
+ render() {
+ const commonWeightProps = {
+ pause: this.pause,
+ paused: BoolCast(this.dataDoc.simulation_paused),
+ panelWidth: this.props.PanelWidth,
+ panelHeight: this.props.PanelHeight,
+ resetRequest: this.resetRequest,
+ xMax: this.xMax,
+ xMin: this.xMin,
+ yMax: this.yMax,
+ yMin: this.yMin,
+ wallPositions: this.wallPositions,
+ gravity: Math.abs(this.gravity),
+ timestepSize: 0.05,
+ showComponentForces: BoolCast(this.dataDoc.simulation_showComponentForces),
+ coefficientOfKineticFriction: NumCast(this.dataDoc.coefficientOfKineticFriction),
+ elasticCollisions: BoolCast(this.dataDoc.elasticCollisions),
+ simulationMode: this.simulationMode,
+ noMovement: BoolCast(this.dataDoc.noMovement),
+ circularMotionRadius: this.circularMotionRadius,
+ wedgeHeight: this.wedgeHeight,
+ wedgeWidth: this.wedgeWidth,
+ springConstant: this.springConstant,
+ springStartLength: this.springLengthStart,
+ springRestLength: this.springLengthRest,
+ setSpringLength: this.setSpringLength,
+ setPendulumAngle: this.setPendulumAngle,
+ pendulumAngle: this.pendulumAngle,
+ pendulumLength: this.pendulumLength,
+ startPendulumAngle: this.pendulumAngleStart,
+ startPendulumLength: this.pendulumLengthStart,
+ radius: this.mass1Radius,
+ simulationSpeed: NumCast(this.dataDoc.simulation_speed, 2),
+ showAcceleration: BoolCast(this.dataDoc.simulation_showAcceleration),
+ showForceMagnitudes: BoolCast(this.dataDoc.simulation_showForceMagnitudes),
+ showForces: BoolCast(this.dataDoc.simulation_showForces),
+ showVelocity: BoolCast(this.dataDoc.simulation_showVelocity),
+ simulationType: this.simulationType,
+ };
+ return (
+ <div className="physicsSimApp">
+ <div className="mechanicsSimulationContainer">
+ <div className="mechanicsSimulationContentContainer">
+ <div className="mechanicsSimulationButtonsAndElements">
+ <div className="mechanicsSimulationButtons">
+ {!this.dataDoc.simulation_paused && (
+ <div
+ style={{
+ position: 'fixed',
+ left: 0.1 * this.props.PanelWidth() + 'px',
+ top: 0.95 * this.props.PanelHeight() + 'px',
+ width: 0.5 * this.props.PanelWidth() + 'px',
+ }}>
+ <LinearProgress />
+ </div>
+ )}
+ </div>
+ <div
+ className="mechanicsSimulationElements"
+ style={{
+ //
+ width: '60%',
+ height: '100%',
+ position: 'absolute',
+ background: 'yellow',
+ }}>
+ <Weight
+ {...commonWeightProps}
+ color="red"
+ componentForces={this.componentForces1}
+ setComponentForces={this.setComponentForces1}
+ displayXVelocity={NumCast(this.dataDoc.mass1_velocityX)}
+ displayYVelocity={NumCast(this.dataDoc.mass1_velocityY)}
+ mass={this.mass1}
+ startForces={this.startForces1}
+ startPosX={this.mass1PosXStart}
+ startPosY={this.mass1PosYStart}
+ startVelX={this.mass1VelXStart}
+ startVelY={this.mass1VelYStart}
+ updateMassPosX={NumCast(this.dataDoc.mass1_xChange)}
+ updateMassPosY={NumCast(this.dataDoc.mass1_yChange)}
+ forcesUpdated={this.forcesUpdated1}
+ setForcesUpdated={this.setForcesUpdated1}
+ setPosition={this.setPosition1}
+ setVelocity={this.setVelocity1}
+ setAcceleration={this.setAcceleration1}
+ />
+ {this.simulationType == 'Pulley' && (
+ <Weight
+ {...commonWeightProps}
+ color="green"
+ componentForces={this.componentForces2}
+ setComponentForces={this.setComponentForces2}
+ displayXVelocity={NumCast(this.dataDoc.mass2_velocityX)}
+ displayYVelocity={NumCast(this.dataDoc.mass2_velocityY)}
+ mass={this.mass2}
+ startForces={this.startForces2}
+ startPosX={this.mass2PosXStart}
+ startPosY={this.mass2PosYStart}
+ startVelX={this.mass2VelXStart}
+ startVelY={this.mass2VelYStart}
+ updateMassPosX={NumCast(this.dataDoc.mass2_xChange)}
+ updateMassPosY={NumCast(this.dataDoc.mass2_yChange)}
+ forcesUpdated={this.forcesUpdated2}
+ setForcesUpdated={this.setForcesUpdated2}
+ setPosition={this.setPosition2}
+ setVelocity={this.setVelocity2}
+ setAcceleration={this.setAcceleration2}
+ />
+ )}
+ </div>
+ <div style={{ position: 'absolute', 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>
+ </div>
+ </div>
+ <div
+ className="mechanicsSimulationEquationContainer"
+ onWheel={e => this.props.isContentActive() && e.stopPropagation()}
+ style={{ overflow: 'auto', height: `${Math.max(1, 800 / this.props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this.props.PanelWidth() / 850)})` }}>
+ <div className="mechanicsSimulationControls">
+ <Stack direction="row" spacing={1}>
+ {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
+ <IconButton onClick={() => (this.dataDoc.simulation_paused = false)}>
+ {/* <PlayArrowIcon /> */}
+ </IconButton>
+ )}
+ {!this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
+ <IconButton onClick={() => (this.dataDoc.simulation_paused = true)}>
+ {/* <PauseIcon /> */}
+ </IconButton>
+ )}
+ {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
+ <IconButton onClick={action(() => this._simReset++)}>
+ <ReplayIcon />
+ </IconButton>
+ )}
+ </Stack>
+ <div className="dropdownMenu">
+ <select
+ value={StrCast(this.simulationType)}
+ onChange={event => {
+ this.dataDoc.simulation_type = event.target.value;
+ this.setupSimulation();
+ }}
+ style={{ height: '2em', width: '100%', fontSize: '16px' }}>
+ <option value="One Weight">Projectile</option>
+ <option value="Inclined Plane">Inclined Plane</option>
+ <option value="Pendulum">Pendulum</option>
+ <option value="Spring">Spring</option>
+ <option value="Circular Motion">Circular Motion</option>
+ <option value="Pulley">Pulley</option>
+ <option value="Suspension">Suspension</option>
+ </select>
+ </div>
+ <div className="dropdownMenu">
+ <select
+ value={this.simulationMode}
+ onChange={event => {
+ this.dataDoc.simulation_mode = event.target.value;
+ this.setupSimulation();
+ }}
+ style={{ height: '2em', width: '100%', fontSize: '16px' }}>
+ <option value="Tutorial">Tutorial Mode</option>
+ <option value="Freeform">Freeform Mode</option>
+ <option value="Review">Review Mode</option>
+ </select>
+ </div>
+ </div>
+ {this.simulationMode == 'Review' && this.simulationType != 'Inclined Plane' && (
+ <div className="wordProblemBox">
+ <p>
+ <>{this.simulationType} review problems in progress!</>
+ </p>
+ <hr />
+ </div>
+ )}
+ {this.simulationMode == 'Review' && this.simulationType == 'Inclined Plane' && (
+ <div>
+ {!this.dataDoc.hintDialogueOpen && (
+ <IconButton
+ onClick={() => (this.dataDoc.hintDialogueOpen = true)}
+ sx={{
+ position: 'fixed',
+ left: this.xMax - 50 + 'px',
+ top: this.yMin + 14 + 'px',
+ }}>
+ <QuestionMarkIcon />
+ </IconButton>
+ )}
+ <Dialog maxWidth={'sm'} fullWidth={true} open={BoolCast(this.dataDoc.hintDialogueOpen)} onClose={() => (this.dataDoc.hintDialogueOpen = false)}>
+ <DialogTitle>Hints</DialogTitle>
+ <DialogContent>
+ {this.selectedQuestion.hints?.map((hint: any, index: number) => (
+ <div key={index}>
+ <DialogContentText>
+ <details>
+ <summary>
+ <b>
+ Hint {index + 1}: {hint.description}
+ </b>
+ </summary>
+ {hint.content}
+ </details>
+ </DialogContentText>
+ </div>
+ ))}
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={() => (this.dataDoc.hintDialogueOpen = false)}>Close</Button>
+ </DialogActions>
+ </Dialog>
+ <div className="wordProblemBox">
+ <div className="question">
+ <p>{this.questionPartOne}</p>
+ <p>{this.questionPartTwo}</p>
+ </div>
+ <div className="answers">
+ {this.selectedQuestion.answerParts.includes('force of gravity') && (
+ <InputField
+ label={<p>Gravity magnitude</p>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="review_GravityMagnitude"
+ step={0.1}
+ unit={'N'}
+ upperBound={50}
+ value={NumCast(this.dataDoc.review_GravityMagnitude)}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('force of gravity')]}
+ labelWidth={'7em'}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('angle of gravity') && (
+ <InputField
+ label={<p>Gravity angle</p>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="review_GravityAngle"
+ step={1}
+ unit={'°'}
+ upperBound={360}
+ value={NumCast(this.dataDoc.review_GravityAngle)}
+ radianEquivalent={true}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('angle of gravity')]}
+ labelWidth={'7em'}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('normal force') && (
+ <InputField
+ label={<p>Normal force magnitude</p>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="review_NormalMagnitude"
+ step={0.1}
+ unit={'N'}
+ upperBound={50}
+ value={NumCast(this.dataDoc.review_NormalMagnitude)}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('normal force')]}
+ labelWidth={'7em'}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('angle of normal force') && (
+ <InputField
+ label={<p>Normal force angle</p>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="review_NormalAngle"
+ step={1}
+ unit={'°'}
+ upperBound={360}
+ value={NumCast(this.dataDoc.review_NormalAngle)}
+ radianEquivalent={true}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('angle of normal force')]}
+ labelWidth={'7em'}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('force of static friction') && (
+ <InputField
+ label={<p>Static friction magnitude</p>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="review_StaticMagnitude"
+ step={0.1}
+ unit={'N'}
+ upperBound={50}
+ value={NumCast(this.dataDoc.review_StaticMagnitude)}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('force of static friction')]}
+ labelWidth={'7em'}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('angle of static friction') && (
+ <InputField
+ label={<p>Static friction angle</p>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="review_StaticAngle"
+ step={1}
+ unit={'°'}
+ upperBound={360}
+ value={NumCast(this.dataDoc.review_StaticAngle)}
+ radianEquivalent={true}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('angle of static friction')]}
+ labelWidth={'7em'}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('coefficient of static friction') && (
+ <InputField
+ label={
+ <Box>
+ &mu;<sub>s</sub>
+ </Box>
+ }
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="coefficientOfStaticFriction"
+ step={0.1}
+ unit={''}
+ upperBound={1}
+ value={NumCast(this.dataDoc.coefficientOfStaticFriction)}
+ effect={this.updateReviewForcesBasedOnCoefficient}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('coefficient of static friction')]}
+ />
+ )}
+ {this.selectedQuestion.answerParts.includes('wedge angle') && (
+ <InputField
+ label={<Box>&theta;</Box>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="wedge_angle"
+ step={1}
+ unit={'°'}
+ upperBound={49}
+ value={this.wedgeAngle}
+ effect={(val: number) => {
+ this.changeWedgeBasedOnNewAngle(val);
+ this.updateReviewForcesBasedOnAngle(val);
+ }}
+ radianEquivalent={true}
+ showIcon={BoolCast(this.dataDoc.simulation_showIcon)}
+ correctValue={NumListCast(this.dataDoc.answers)[this.selectedQuestion.answerParts.indexOf('wedge angle')]}
+ />
+ )}
+ </div>
+ </div>
+ </div>
+ )}
+ {this.simulationMode == 'Tutorial' && (
+ <div className="wordProblemBox">
+ <div className="question">
+ <h2>Problem</h2>
+ <p>{this.tutorial.question}</p>
+ </div>
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'spaceBetween',
+ width: '100%',
+ }}>
+ <IconButton
+ onClick={() => {
+ let step = NumCast(this.dataDoc.tutorial_stepNumber) - 1;
+ step = Math.max(step, 0);
+ step = Math.min(step, this.tutorial.steps.length - 1);
+ this.dataDoc.tutorial_stepNumber = step;
+ this.dataDoc.mass1_forcesStart = JSON.stringify(this.tutorial.steps[step].forces);
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify(this.tutorial.steps[step].forces);
+ this.dataDoc.simulation_showForceMagnitudes = this.tutorial.steps[step].showMagnitude;
+ }}
+ disabled={this.dataDoc.tutorial_stepNumber == 0}>
+ {/* <ArrowLeftIcon /> */}
+ </IconButton>
+ <div>
+ <h3>
+ Step {NumCast(this.dataDoc.tutorial_stepNumber) + 1}: {this.tutorial.steps[NumCast(this.dataDoc.tutorial_stepNumber)].description}
+ </h3>
+ <p>{this.tutorial.steps[NumCast(this.dataDoc.tutorial_stepNumber)].content}</p>
+ </div>
+ <IconButton
+ onClick={() => {
+ let step = NumCast(this.dataDoc.tutorial_stepNumber) + 1;
+ step = Math.max(step, 0);
+ step = Math.min(step, this.tutorial.steps.length - 1);
+ this.dataDoc.tutorial_stepNumber = step;
+ this.dataDoc.mass1_forcesStart = JSON.stringify(this.tutorial.steps[step].forces);
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify(this.tutorial.steps[step].forces);
+ this.dataDoc.simulation_showForceMagnitudes = this.tutorial.steps[step].showMagnitude;
+ }}
+ disabled={this.dataDoc.tutorial_stepNumber === this.tutorial.steps.length - 1}>
+ {/* <ArrowRightIcon /> */}
+ </IconButton>
+ </div>
+ <div>
+ {(this.simulationType == 'One Weight' || this.simulationType == 'Inclined Plane' || this.simulationType == 'Pendulum') && <p>Resources</p>}
+ {this.simulationType == 'One Weight' && (
+ <ul>
+ <li>
+ <a
+ href="https://www.khanacademy.org/science/physics/one-dimensional-motion"
+ target="_blank"
+ rel="noreferrer"
+ style={{
+ color: 'blue',
+ textDecoration: 'underline',
+ }}>
+ Khan Academy - One Dimensional Motion
+ </a>
+ </li>
+ <li>
+ <a
+ href="https://www.khanacademy.org/science/physics/two-dimensional-motion"
+ target="_blank"
+ rel="noreferrer"
+ style={{
+ color: 'blue',
+ textDecoration: 'underline',
+ }}>
+ Khan Academy - Two Dimensional Motion
+ </a>
+ </li>
+ </ul>
+ )}
+ {this.simulationType == 'Inclined Plane' && (
+ <ul>
+ <li>
+ <a
+ href="https://www.khanacademy.org/science/physics/forces-newtons-laws#normal-contact-force"
+ target="_blank"
+ rel="noreferrer"
+ style={{
+ color: 'blue',
+ textDecoration: 'underline',
+ }}>
+ Khan Academy - Normal Force
+ </a>
+ </li>
+ <li>
+ <a
+ href="https://www.khanacademy.org/science/physics/forces-newtons-laws#inclined-planes-friction"
+ target="_blank"
+ rel="noreferrer"
+ style={{
+ color: 'blue',
+ textDecoration: 'underline',
+ }}>
+ Khan Academy - Inclined Planes
+ </a>
+ </li>
+ </ul>
+ )}
+ {this.simulationType == 'Pendulum' && (
+ <ul>
+ <li>
+ <a
+ href="https://www.khanacademy.org/science/physics/forces-newtons-laws#tension-tutorial"
+ target="_blank"
+ rel="noreferrer"
+ style={{
+ color: 'blue',
+ textDecoration: 'underline',
+ }}>
+ Khan Academy - Tension
+ </a>
+ </li>
+ </ul>
+ )}
+ </div>
+ </div>
+ )}
+ {this.simulationMode == 'Review' && this.simulationType == 'Inclined Plane' && (
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ marginTop: '10px',
+ }}>
+ <p
+ style={{
+ color: 'blue',
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ }}
+ onClick={() => (this.dataDoc.simulation_mode = 'Tutorial')}>
+ {' '}
+ Go to walkthrough{' '}
+ </p>
+ <div style={{ display: 'flex', flexDirection: 'column' }}>
+ <Button
+ onClick={action(() => {
+ this._simReset++;
+ this.checkAnswers();
+ this.dataDoc.simulation_showIcon = true;
+ })}
+ variant="outlined">
+ <p>Submit</p>
+ </Button>
+ <Button
+ onClick={() => {
+ this.generateNewQuestion();
+ this.dataDoc.simulation_showIcon = false;
+ }}
+ variant="outlined">
+ <p>New question</p>
+ </Button>
+ </div>
+ </div>
+ )}
+ {this.simulationMode == 'Freeform' && (
+ <div className="vars">
+ <FormControl component="fieldset">
+ <FormGroup>
+ {this.simulationType == 'One Weight' && (
+ <FormControlLabel
+ control={<Checkbox checked={BoolCast(this.dataDoc.elasticCollisions)} onChange={() => (this.dataDoc.elasticCollisions = !this.dataDoc.elasticCollisions)} />}
+ label="Make collisions elastic"
+ labelPlacement="start"
+ />
+ )}
+ <FormControlLabel
+ control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showForces)} onChange={() => (this.dataDoc.simulation_showForces = !this.dataDoc.simulation_showForces)} />}
+ label="Show force vectors"
+ labelPlacement="start"
+ />
+ {(this.simulationType == 'Inclined Plane' || this.simulationType == 'Pendulum') && (
+ <FormControlLabel
+ control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showComponentForces)} onChange={() => (this.dataDoc.simulation_showComponentForces = !this.dataDoc.simulation_showComponentForces)} />}
+ label="Show component force vectors"
+ labelPlacement="start"
+ />
+ )}
+ <FormControlLabel
+ control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showAcceleration)} onChange={() => (this.dataDoc.simulation_showAcceleration = !this.dataDoc.simulation_showAcceleration)} />}
+ label="Show acceleration vector"
+ labelPlacement="start"
+ />
+ <FormControlLabel
+ control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showVelocity)} onChange={() => (this.dataDoc.simulation_showVelocity = !this.dataDoc.simulation_showVelocity)} />}
+ label="Show velocity vector"
+ labelPlacement="start"
+ />
+ <InputField label={<Box>Speed</Box>} lowerBound={1} dataDoc={this.dataDoc} prop="simulation_speed" step={1} unit={'x'} upperBound={10} value={NumCast(this.dataDoc.simulation_speed, 2)} labelWidth={'5em'} />
+ {this.dataDoc.simulation_paused && this.simulationType != 'Circular Motion' && (
+ <InputField
+ label={<Box>Gravity</Box>}
+ lowerBound={-30}
+ dataDoc={this.dataDoc}
+ prop="gravity"
+ step={0.01}
+ unit={'m/s2'}
+ upperBound={0}
+ value={NumCast(this.dataDoc.simulation_gravity, -9.81)}
+ effect={(val: number) => this.setupSimulation()}
+ labelWidth={'5em'}
+ />
+ )}
+ {this.dataDoc.simulation_paused && this.simulationType != 'Pulley' && (
+ <InputField
+ label={<Box>Mass</Box>}
+ lowerBound={1}
+ dataDoc={this.dataDoc}
+ prop="mass1"
+ step={0.1}
+ unit={'kg'}
+ upperBound={5}
+ value={this.mass1 ?? 1}
+ effect={(val: number) => this.setupSimulation()}
+ labelWidth={'5em'}
+ />
+ )}
+ {this.dataDoc.simulation_paused && this.simulationType == 'Pulley' && (
+ <InputField
+ label={<Box>Red mass</Box>}
+ lowerBound={1}
+ dataDoc={this.dataDoc}
+ prop="mass1"
+ step={0.1}
+ unit={'kg'}
+ upperBound={5}
+ value={this.mass1 ?? 1}
+ effect={(val: number) => this.setupSimulation()}
+ labelWidth={'5em'}
+ />
+ )}
+ {this.dataDoc.simulation_paused && this.simulationType == 'Pulley' && (
+ <InputField
+ label={<Box>Blue mass</Box>}
+ lowerBound={1}
+ dataDoc={this.dataDoc}
+ prop="mass2"
+ step={0.1}
+ unit={'kg'}
+ upperBound={5}
+ value={this.mass2 ?? 1}
+ effect={(val: number) => this.setupSimulation()}
+ labelWidth={'5em'}
+ />
+ )}
+ {this.dataDoc.simulation_paused && this.simulationType == 'Circular Motion' && (
+ <InputField
+ label={<Box>Rod length</Box>}
+ lowerBound={100}
+ dataDoc={this.dataDoc}
+ prop="circularMotionRadius"
+ step={5}
+ unit={'m'}
+ upperBound={250}
+ value={this.circularMotionRadius}
+ effect={(val: number) => this.setupSimulation()}
+ labelWidth={'5em'}
+ />
+ )}
+ </FormGroup>
+ </FormControl>
+ {this.simulationType == 'Spring' && this.dataDoc.simulation_paused && (
+ <div>
+ <InputField
+ label={<Typography color="inherit">Spring stiffness</Typography>}
+ lowerBound={0.1}
+ dataDoc={this.dataDoc}
+ prop="spring_constant"
+ step={1}
+ unit={'N/m'}
+ upperBound={500}
+ value={this.springConstant}
+ effect={action(() => this._simReset++)}
+ radianEquivalent={false}
+ mode={'Freeform'}
+ labelWidth={'7em'}
+ />
+ <InputField
+ label={<Typography color="inherit">Rest length</Typography>}
+ lowerBound={10}
+ dataDoc={this.dataDoc}
+ prop="spring_lengthRest"
+ step={100}
+ unit=""
+ upperBound={500}
+ value={this.springLengthRest}
+ effect={action(() => this._simReset++)}
+ radianEquivalent={false}
+ mode="Freeform"
+ labelWidth={'7em'}
+ />
+ <InputField
+ label={<Typography color="inherit">Starting displacement</Typography>}
+ lowerBound={-(this.springLengthRest - 10)}
+ dataDoc={this.dataDoc}
+ prop=""
+ step={10}
+ unit=""
+ upperBound={this.springLengthRest}
+ value={this.springLengthStart - this.springLengthRest}
+ effect={action((val: number) => {
+ this.dataDoc.mass1_positionYstart = this.springLengthRest + val;
+ this.dataDoc.spring_lengthStart = this.springLengthRest + val;
+ this._simReset++;
+ })}
+ radianEquivalent={false}
+ mode="Freeform"
+ labelWidth={'7em'}
+ />
+ </div>
+ )}
+ {this.simulationType == 'Inclined Plane' && this.dataDoc.simulation_paused && (
+ <div>
+ <InputField
+ label={<Box>&theta;</Box>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="wedge_angle"
+ step={1}
+ unit={'°'}
+ upperBound={49}
+ value={this.wedgeAngle}
+ effect={action((val: number) => {
+ this.changeWedgeBasedOnNewAngle(val);
+ this._simReset++;
+ })}
+ radianEquivalent={true}
+ mode={'Freeform'}
+ labelWidth={'2em'}
+ />
+ <InputField
+ label={
+ <Box>
+ &mu;<sub>s</sub>
+ </Box>
+ }
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="coefficientOfStaticFriction"
+ step={0.1}
+ unit={''}
+ upperBound={1}
+ value={NumCast(this.dataDoc.coefficientOfStaticFriction) ?? 0}
+ effect={action((val: number) => {
+ this.updateForcesWithFriction(val);
+ if (val < NumCast(this.dataDoc.coefficientOfKineticFriction)) {
+ this.dataDoc.soefficientOfKineticFriction = val;
+ }
+ this._simReset++;
+ })}
+ mode={'Freeform'}
+ labelWidth={'2em'}
+ />
+ <InputField
+ label={
+ <Box>
+ &mu;<sub>k</sub>
+ </Box>
+ }
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="coefficientOfKineticFriction"
+ step={0.1}
+ unit={''}
+ upperBound={NumCast(this.dataDoc.coefficientOfStaticFriction)}
+ value={NumCast(this.dataDoc.coefficientOfKineticFriction) ?? 0}
+ effect={action(() => this._simReset++)}
+ mode={'Freeform'}
+ labelWidth={'2em'}
+ />
+ </div>
+ )}
+ {this.simulationType == 'Inclined Plane' && !this.dataDoc.simulation_paused && (
+ <Typography>
+ <>
+ &theta;: {Math.round(this.wedgeAngle * 100) / 100}° ≈ {Math.round(((this.wedgeAngle * Math.PI) / 180) * 100) / 100} rad
+ <br />
+ &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
+ <br />
+ &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
+ </>
+ </Typography>
+ )}
+ {this.simulationType == 'Pendulum' && !this.dataDoc.simulation_paused && (
+ <Typography>
+ &theta;: {Math.round(this.pendulumAngle * 100) / 100}° ≈ {Math.round(((this.pendulumAngle * Math.PI) / 180) * 100) / 100} rad
+ </Typography>
+ )}
+ {this.simulationType == 'Pendulum' && this.dataDoc.simulation_paused && (
+ <div>
+ <InputField
+ label={<Box>Angle</Box>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="pendulum_angle"
+ step={1}
+ unit={'°'}
+ upperBound={59}
+ value={NumCast(this.dataDoc.pendulum_angle, 30)}
+ effect={action(value => {
+ this.dataDoc.pendulum_angleStart = value;
+ this.dataDoc.pendulum_lengthStart = this.dataDoc.pendulum_length;
+ if (this.simulationType == 'Pendulum') {
+ const mag = this.mass1 * Math.abs(this.gravity) * Math.cos((value * Math.PI) / 180);
+
+ const forceOfTension: IForce = {
+ description: 'Tension',
+ magnitude: mag,
+ directionInDegrees: 90 - value,
+ };
+ const gravityParallel: IForce = {
+ description: 'Gravity Parallel Component',
+ magnitude: Math.abs(this.gravity) * Math.cos((value * Math.PI) / 180),
+ directionInDegrees: 270 - value,
+ };
+ const gravityPerpendicular: IForce = {
+ description: 'Gravity Perpendicular Component',
+ magnitude: Math.abs(this.gravity) * Math.sin((value * Math.PI) / 180),
+ directionInDegrees: -value,
+ };
+
+ const length = this.pendulumLength;
+ const x = length * Math.cos(((90 - value) * Math.PI) / 180);
+ const y = length * Math.sin(((90 - value) * Math.PI) / 180);
+ const xPos = this.xMax / 2 - x - NumCast(this.dataDoc.radius);
+ const yPos = y - NumCast(this.dataDoc.radius) - 5;
+ this.dataDoc.mass1_positionXstart = xPos;
+ this.dataDoc.mass1_positionYstart = yPos;
+
+ 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([forceOfTension, gravityParallel, gravityPerpendicular]);
+ this._simReset++;
+ }
+ })}
+ radianEquivalent={true}
+ mode="Freeform"
+ labelWidth="5em"
+ />
+ <InputField
+ label={<Box>Rod length</Box>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop="pendulum_length"
+ step={1}
+ unit="m"
+ upperBound={400}
+ value={Math.round(this.pendulumLength)}
+ effect={action(value => {
+ if (this.simulationType == 'Pendulum') {
+ this.dataDoc.pendulum_angleStart = this.pendulumAngle;
+ this.dataDoc.pendulum_lengthStart = value;
+ this._simReset++;
+ }
+ })}
+ radianEquivalent={false}
+ mode="Freeform"
+ labelWidth="5em"
+ />
+ </div>
+ )}
+ </div>
+ )}
+ <div className="mechanicsSimulationEquation">
+ {this.simulationMode == 'Freeform' && (
+ <table>
+ <tbody>
+ <tr>
+ <td>{this.simulationType == 'Pulley' ? 'Red Weight' : ''}</td>
+ <td>X</td>
+ <td>Y</td>
+ </tr>
+ <tr>
+ <td
+ style={{ cursor: 'help' }}
+ // onClick={() => {
+ // window.open(
+ // "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+ // );
+ // }}
+ >
+ <Box>Position</Box>
+ </td>
+ {(!this.dataDoc.simulation_paused || this.simulationType == 'Inclined Plane' || this.simulationType == 'Circular Motion' || this.simulationType == 'Pulley') && (
+ <td style={{ cursor: 'default' }}>
+ <>{this.dataDoc.mass1_positionX} m</>
+ </td>
+ )}{' '}
+ {this.dataDoc.simulation_paused && this.simulationType != 'Inclined Plane' && this.simulationType != 'Circular Motion' && this.simulationType != 'Pulley' && (
+ <td
+ style={{
+ cursor: 'default',
+ }}>
+ <InputField
+ lowerBound={this.simulationType == 'Projectile' ? 1 : (this.xMax + this.xMin) / 4 - this.radius - 15}
+ dataDoc={this.dataDoc}
+ prop="mass1_positionX"
+ step={1}
+ unit={'m'}
+ upperBound={this.simulationType == 'Projectile' ? this.xMax - 110 : (3 * (this.xMax + this.xMin)) / 4 - this.radius / 2 - 15}
+ value={NumCast(this.dataDoc.mass1_positionX)}
+ effect={value => {
+ this.dataDoc.mass1_xChange = value;
+ if (this.simulationType == 'Suspension') {
+ let x1rod = (this.xMax + this.xMin) / 2 - this.radius - this.yMin - 200;
+ let x2rod = (this.xMax + this.xMin) / 2 + this.yMin + 200 + this.radius;
+ let deltaX1 = value + this.radius - x1rod;
+ let deltaX2 = x2rod - (value + this.radius);
+ let deltaY = this.getYPosFromDisplay(NumCast(this.dataDoc.mass1_positionY)) + this.radius;
+ let dir1T = Math.PI - Math.atan(deltaY / deltaX1);
+ let dir2T = Math.atan(deltaY / deltaX2);
+ let tensionMag2 = (this.mass1 * Math.abs(this.gravity)) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
+ let tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
+ dir1T = (dir1T * 180) / Math.PI;
+ dir2T = (dir2T * 180) / Math.PI;
+ const tensionForce1: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag1,
+ directionInDegrees: dir1T,
+ };
+ const tensionForce2: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag2,
+ directionInDegrees: dir2T,
+ };
+ const gravity = this.gravityForce(this.mass1);
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+ }
+ }}
+ small={true}
+ mode="Freeform"
+ />
+ </td>
+ )}{' '}
+ {(!this.dataDoc.simulation_paused || this.simulationType == 'Inclined Plane' || this.simulationType == 'Circular Motion' || this.simulationType == 'Pulley') && (
+ <td style={{ cursor: 'default' }}>{`${NumCast(this.dataDoc.mass1_positionY)} m`}</td>
+ )}{' '}
+ {this.dataDoc.simulation_paused && this.simulationType != 'Inclined Plane' && this.simulationType != 'Circular Motion' && this.simulationType != 'Pulley' && (
+ <td
+ style={{
+ cursor: 'default',
+ }}>
+ <InputField
+ lowerBound={1}
+ dataDoc={this.dataDoc}
+ prop="mass1_positionY"
+ step={1}
+ unit="m"
+ upperBound={this.yMax - 110}
+ value={NumCast(this.dataDoc.mass1_positionY)}
+ effect={value => {
+ this.dataDoc.mass1_yChange = value;
+ if (this.simulationType == 'Suspension') {
+ let x1rod = (this.xMax + this.xMin) / 2 - this.radius - this.yMin - 200;
+ let x2rod = (this.xMax + this.xMin) / 2 + this.yMin + 200 + this.radius;
+ let deltaX1 = NumCast(this.dataDoc.mass1_positionX) + this.radius - x1rod;
+ let deltaX2 = x2rod - (NumCast(this.dataDoc.mass1_positionX) + this.radius);
+ let deltaY = this.getYPosFromDisplay(value) + this.radius;
+ let dir1T = Math.PI - Math.atan(deltaY / deltaX1);
+ let dir2T = Math.atan(deltaY / deltaX2);
+ let tensionMag2 = (this.mass1 * Math.abs(this.gravity)) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
+ let tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
+ dir1T = (dir1T * 180) / Math.PI;
+ dir2T = (dir2T * 180) / Math.PI;
+ const tensionForce1: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag1,
+ directionInDegrees: dir1T,
+ };
+ const tensionForce2: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag2,
+ directionInDegrees: dir2T,
+ };
+ const gravity = this.gravityForce(this.mass1);
+ this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
+ }
+ }}
+ small={true}
+ mode="Freeform"
+ />
+ </td>
+ )}{' '}
+ </tr>
+ <tr>
+ <td
+ style={{ cursor: 'help' }}
+ // onClick={() => {
+ // window.open(
+ // "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+ // );
+ // }}
+ >
+ <Box>Velocity</Box>
+ </td>
+ {(!this.dataDoc.simulation_paused || (this.simulationType != 'One Weight' && this.simulationType != 'Circular Motion')) && (
+ <td style={{ cursor: 'default' }}>{`${NumCast(this.dataDoc.mass1_velocityX)} m/s`}</td>
+ )}{' '}
+ {this.dataDoc.simulation_paused && (this.simulationType == 'One Weight' || this.simulationType == 'Circular Motion') && (
+ <td
+ style={{
+ cursor: 'default',
+ }}>
+ <InputField
+ lowerBound={-50}
+ dataDoc={this.dataDoc}
+ prop="mass1_velocityX"
+ step={1}
+ unit={'m/s'}
+ upperBound={50}
+ value={NumCast(this.dataDoc.mass1_velocityX)}
+ effect={action(value => {
+ this.dataDoc.mass1_velocityXstart = value;
+ this._simReset++;
+ })}
+ small={true}
+ mode="Freeform"
+ />
+ </td>
+ )}{' '}
+ {(!this.dataDoc.simulation_paused || this.simulationType != 'One Weight') && (
+ <td style={{ cursor: 'default' }}>
+ <>{this.dataDoc.mass1_velocityY} m/s</>
+ </td>
+ )}{' '}
+ {this.dataDoc.simulation_paused && this.simulationType == 'One Weight' && (
+ <td
+ style={{
+ cursor: 'default',
+ }}>
+ <InputField
+ lowerBound={-50}
+ dataDoc={this.dataDoc}
+ prop="mass1_velocityY"
+ step={1}
+ unit="m/s"
+ upperBound={50}
+ value={NumCast(this.dataDoc.mass1_velocityY)}
+ effect={value => {
+ this.dataDoc.mass1_velocityYstart = -value;
+ }}
+ small={true}
+ mode="Freeform"
+ />
+ </td>
+ )}{' '}
+ </tr>
+ <tr>
+ <td
+ style={{ cursor: 'help' }}
+ // onClick={() => {
+ // window.open(
+ // "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+ // );
+ // }}
+ >
+ <Box>Acceleration</Box>
+ </td>
+ <td style={{ cursor: 'default' }}>
+ <>
+ {this.dataDoc.mass1_accelerationX} m/s<sup>2</sup>
+ </>
+ </td>
+ <td style={{ cursor: 'default' }}>
+ <>
+ {this.dataDoc.mass1_accelerationY} m/s<sup>2</sup>
+ </>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Momentum</Box>
+ </td>
+ <td>{Math.round(NumCast(this.dataDoc.mass1_velocityX) * this.mass1 * 10) / 10} kg*m/s</td>
+ <td>{Math.round(NumCast(this.dataDoc.mass1_velocityY) * this.mass1 * 10) / 10} kg*m/s</td>
+ </tr>
+ </tbody>
+ </table>
+ )}
+ {this.simulationMode == 'Freeform' && this.simulationType == 'Pulley' && (
+ <table>
+ <tbody>
+ <tr>
+ <td>Blue Weight</td>
+ <td>X</td>
+ <td>Y</td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Position</Box>
+ </td>
+ <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionX} m`}</td>
+ <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionY} m`}</td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Velocity</Box>
+ </td>
+ <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionX} m/s`}</td>
+ <td style={{ cursor: 'default' }}>{`${this.dataDoc.mass2_positionY} m/s`}</td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Acceleration</Box>
+ </td>
+ <td style={{ cursor: 'default' }}>
+ <>
+ {this.dataDoc.mass2_accelerationX} m/s<sup>2</sup>
+ </>
+ </td>
+ <td style={{ cursor: 'default' }}>
+ <>
+ {this.dataDoc.mass2_accelerationY} m/s<sup>2</sup>
+ </>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Momentum</Box>
+ </td>
+ <td>{Math.round(NumCast(this.dataDoc.mass2_velocityX) * this.mass1 * 10) / 10} kg*m/s</td>
+ <td>{Math.round(NumCast(this.dataDoc.mass2_velocityY) * this.mass1 * 10) / 10} kg*m/s</td>
+ </tr>
+ </tbody>
+ </table>
+ )}
+ </div>
+ {this.simulationType != 'Pendulum' && this.simulationType != 'Spring' && (
+ <div>
+ <p>Kinematic Equations</p>
+ <ul>
+ <li>
+ Position: x<sub>1</sub>=x<sub>0</sub>+v<sub>0</sub>t+
+ <sup>1</sup>&frasl;
+ <sub>2</sub>at
+ <sup>2</sup>
+ </li>
+ <li>
+ Velocity: v<sub>1</sub>=v<sub>0</sub>+at
+ </li>
+ <li>Acceleration: a = F/m</li>
+ </ul>
+ </div>
+ )}
+ {this.simulationType == 'Spring' && (
+ <div>
+ <p>Harmonic Motion Equations: Spring</p>
+ <ul>
+ <li>
+ Spring force: F<sub>s</sub>=kd
+ </li>
+ <li>
+ Spring period: T<sub>s</sub>=2&pi;&#8730;<sup>m</sup>&frasl;
+ <sub>k</sub>
+ </li>
+ <li>Equilibrium displacement for vertical spring: d = mg/k</li>
+ <li>
+ Elastic potential energy: U<sub>s</sub>=<sup>1</sup>&frasl;
+ <sub>2</sub>kd<sup>2</sup>
+ </li>
+ <ul>
+ <li>Maximum when system is at maximum displacement, 0 when system is at 0 displacement</li>
+ </ul>
+ <li>
+ Translational kinetic energy: K=<sup>1</sup>&frasl;
+ <sub>2</sub>mv<sup>2</sup>
+ </li>
+ <ul>
+ <li>Maximum when system is at maximum/minimum velocity (at 0 displacement), 0 when velocity is 0 (at maximum displacement)</li>
+ </ul>
+ </ul>
+ </div>
+ )}
+ {this.simulationType == 'Pendulum' && (
+ <div>
+ <p>Harmonic Motion Equations: Pendulum</p>
+ <ul>
+ <li>
+ Pendulum period: T<sub>p</sub>=2&pi;&#8730;<sup>l</sup>&frasl;
+ <sub>g</sub>
+ </li>
+ </ul>
+ </div>
+ )}
+ </div>
+ </div>
+ <div
+ style={{
+ position: 'fixed',
+ top: this.yMax - 120 + 20 + 'px',
+ left: this.xMin + 90 - 80 + 'px',
+ zIndex: -10000,
+ }}>
+ <svg width={100 + 'px'} height={100 + 'px'}>
+ <defs>
+ <marker id="miniArrow" markerWidth="20" markerHeight="20" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+ <path d="M0,0 L0,6 L9,3 z" fill={'#000000'} />
+ </marker>
+ </defs>
+ <line x1={20} y1={70} x2={70} y2={70} stroke={'#000000'} strokeWidth="2" markerEnd="url(#miniArrow)" />
+ <line x1={20} y1={70} x2={20} y2={20} stroke={'#000000'} strokeWidth="2" markerEnd="url(#miniArrow)" />
+ </svg>
+ <p
+ style={{
+ position: 'fixed',
+ top: this.yMax - 120 + 40 + 'px',
+ left: this.xMin + 90 - 80 + 'px',
+ }}>
+ {this.simulationType == 'Circular Motion' ? 'Z' : 'Y'}
+ </p>
+ <p
+ style={{
+ position: 'fixed',
+ top: this.yMax - 120 + 80 + 'px',
+ left: this.xMin + 90 - 40 + 'px',
+ }}>
+ X
+ </p>
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
new file mode 100644
index 000000000..d595a499e
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -0,0 +1,179 @@
+import { TextField, InputAdornment } from '@mui/material';
+import { Doc } from '../../../../fields/Doc';
+import React = require('react');
+import TaskAltIcon from '@mui/icons-material/TaskAlt';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { isNumber } from 'lodash';
+export interface IInputProps {
+ label?: JSX.Element;
+ lowerBound: number;
+ dataDoc: Doc;
+ prop: string;
+ step: number;
+ unit: string;
+ upperBound: number;
+ value: number | string | Array<number | string>;
+ correctValue?: number;
+ showIcon?: boolean;
+ effect?: (val: number) => any;
+ radianEquivalent?: boolean;
+ small?: boolean;
+ mode?: string;
+ update?: boolean;
+ labelWidth?: string;
+}
+
+interface IState {
+ tempValue: string | number | (string | number)[];
+ tempRadianValue: number;
+ width: string;
+ margin: string;
+}
+
+export default class InputField extends React.Component<IInputProps, IState> {
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ tempValue: this.props.mode != 'Freeform' && !this.props.showIcon ? 0 : this.props.value,
+ tempRadianValue: this.props.mode != 'Freeform' && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180,
+ width: this.props.small ? '6em' : '7em',
+ margin: this.props.small ? '0px' : '10px',
+ };
+ }
+
+ epsilon: number = 0.01;
+
+ componentDidMount(): void {
+ this.setState({ tempValue: Number(this.props.value) });
+ }
+
+ componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
+ if (prevProps.value != this.props.value && isNumber(this.props.value) && !isNaN(this.props.value)) {
+ if (this.props.mode == 'Freeform') {
+ if (isNumber(this.state.tempValue) && Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
+ this.setState({ tempValue: Number(this.props.value) });
+ }
+ }
+ }
+ if (prevProps.update != this.props.update) {
+ this.externalUpdate();
+ }
+ }
+
+ externalUpdate = () => {
+ this.setState({ tempValue: Number(this.props.value) });
+ this.setState({ tempRadianValue: (Number(this.props.value) * Math.PI) / 180 });
+ };
+
+ onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ let value = event.target.value == '' ? 0 : Number(event.target.value);
+ if (value > this.props.upperBound) {
+ value = this.props.upperBound;
+ } else if (value < this.props.lowerBound) {
+ value = this.props.lowerBound;
+ }
+ if (this.props.prop != '') {
+ this.props.dataDoc[this.props.prop] = value;
+ }
+ this.setState({ tempValue: event.target.value == '' ? event.target.value : value });
+ this.setState({ tempRadianValue: (value * Math.PI) / 180 });
+ if (this.props.effect) {
+ this.props.effect(value);
+ }
+ };
+
+ onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+ let value = event.target.value === '' ? 0 : Number(event.target.value);
+ if (value > 2 * Math.PI) {
+ value = 2 * Math.PI;
+ } else if (value < 0) {
+ value = 0;
+ }
+ if (this.props.prop != '') {
+ this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI;
+ }
+ this.setState({ tempValue: (value * 180) / Math.PI });
+ this.setState({ tempRadianValue: value });
+ if (this.props.effect) {
+ this.props.effect((value * 180) / Math.PI);
+ }
+ };
+
+ render() {
+ return (
+ <div
+ style={{
+ display: 'flex',
+ lineHeight: '1.5',
+ textAlign: 'right',
+ alignItems: 'center',
+ }}>
+ {this.props.label && (
+ <div
+ style={{
+ marginTop: '0.3em',
+ marginBottom: '-0.5em',
+ width: this.props.labelWidth ?? '2em',
+ }}>
+ {this.props.label}
+ </div>
+ )}
+ <TextField
+ type="number"
+ variant="standard"
+ value={this.state.tempValue}
+ onChange={this.onChange}
+ sx={{
+ height: '1em',
+ width: this.state.width,
+ marginLeft: this.state.margin,
+ zIndex: 'modal',
+ }}
+ inputProps={{
+ step: this.props.step,
+ min: this.props.lowerBound,
+ max: this.props.upperBound,
+ type: 'number',
+ }}
+ InputProps={{
+ startAdornment: (
+ <InputAdornment position="start">
+ {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) < this.epsilon && this.props.showIcon && <TaskAltIcon color={'success'} />}
+ {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) >= this.epsilon && this.props.showIcon && <ErrorOutlineIcon color={'error'} />}
+ </InputAdornment>
+ ),
+ endAdornment: <InputAdornment position="end">{this.props.unit}</InputAdornment>,
+ }}
+ />
+ {this.props.radianEquivalent && (
+ <div style={{ marginTop: '0.3em', marginBottom: '-0.5em', width: '1em' }}>
+ <p>≈</p>
+ </div>
+ )}
+ {this.props.radianEquivalent && (
+ <TextField
+ type="number"
+ variant="standard"
+ value={this.state.tempRadianValue}
+ onChange={this.onChangeRadianValue}
+ sx={{
+ height: '1em',
+ width: this.state.width,
+ marginLeft: this.state.margin,
+ zIndex: 'modal',
+ }}
+ inputProps={{
+ step: Math.PI / 8,
+ min: 0,
+ max: 2 * Math.PI,
+ type: 'number',
+ }}
+ InputProps={{
+ endAdornment: <InputAdornment position="end">rad</InputAdornment>,
+ }}
+ />
+ )}
+ </div>
+ );
+ }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json b/src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json
new file mode 100644
index 000000000..cc79f7aad
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationQuestions.json
@@ -0,0 +1,161 @@
+{
+ "inclinePlane": [
+ {
+ "questionSetup": [
+ "There is a 1kg weight on an inclined plane. The plane is at a ",
+ " angle from the ground. The system is in equilibrium (the net force on the weight is 0)."
+ ],
+ "variablesForQuestionSetup": ["theta - max 45"],
+ "question": "What are the magnitudes and directions of the forces acting on the weight?",
+ "answerParts": [
+ "force of gravity",
+ "angle of gravity",
+ "normal force",
+ "angle of normal force",
+ "force of static friction",
+ "angle of static friction"
+ ],
+ "answerSolutionDescriptions": [
+ "9.81",
+ "270",
+ "solve normal force magnitude from wedge angle",
+ "solve normal force angle from wedge angle",
+ "solve static force magnitude from wedge angle given equilibrium",
+ "solve static force angle from wedge angle given equilibrium"
+ ],
+ "goal": "noMovement",
+ "hints": [
+ {
+ "description": "Direction of Force of Gravity",
+ "content": "The force of gravity acts in the negative y direction: 3π/2 rad."
+ },
+ {
+ "description": "Direction of Normal Force",
+ "content": "The normal force acts in the direction perpendicular to the incline plane: π/2-θ rad, where θ is the angle of the incline plane."
+ },
+ {
+ "description": "Direction of Force of Friction",
+ "content": "The force of friction acts in the direction along the incline plane: π-θ rad, where θ is the angle of the incline plane."
+ },
+ {
+ "description": "Magnitude of Force of Gravity",
+ "content": "The magnitude of the force of gravity is approximately 9.81."
+ },
+ {
+ "description": "Magnitude of Normal Force",
+ "content": "The magnitude of the normal force is equal to m*g*cos(θ), where θ is the angle of the incline plane."
+ },
+ {
+ "description": "Net Force in Equilibrium",
+ "content": "For the system to be in equilibrium, the sum of the x components of all forces must equal 0, and the sum of the y components of all forces must equal 0."
+ },
+ {
+ "description": "X Component of Normal Force",
+ "content": "The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane."
+ },
+ {
+ "description": "X Component of Force of Friction",
+ "content": "Since the net force in the x direction must be 0, we know the magnitude of the x component of the friction force is m*g*cos(θ)*cos(π/2-θ)."
+ },
+ {
+ "description": "Y Component of Normal Force",
+ "content": "The y component of the normal force is equal to m*g*cos(θ)*sin(π/2-θ), where θ is the angle of the incline plane. The y component of gravity is equal to m*g"
+ },
+ {
+ "description": "Y Component of Force of Friction",
+ "content": "Since the net force in the x direction must be 0, we know the magnitude of the y component of the friction force is m*g-m*g*cos(θ)*sin(π/2-θ)."
+ },
+ {
+ "description": "Magnitude of Force of Friction",
+ "content": "Combining the x and y components of the friction force, we get the magnitude of the friction force is equal to sqrt((m*g*cos(θ)*cos(π/2-θ))^2 + (m*g-m*g*cos(θ)*sin(π/2-θ))^2)."
+ }
+ ]
+ },
+ {
+ "questionSetup": [
+ "There is a 1kg weight on an inclined plane. The plane is at a ",
+ " angle from the ground. The system is in equilibrium (the net force on the weight is 0)."
+ ],
+ "variablesForQuestionSetup": ["theta - max 45"],
+ "question": "What is the minimum coefficient of static friction?",
+ "answerParts": ["coefficient of static friction"],
+ "answerSolutionDescriptions": [
+ "solve minimum static coefficient from wedge angle given equilibrium"
+ ],
+ "goal": "noMovement",
+ "hints": [
+ {
+ "description": "Net Force in Equilibrium",
+ "content": "If the system is in equilibrium, the sum of the x components of all forces must equal 0. In this system, the normal force and force of static friction have non-zero x components."
+ },
+ {
+ "description": "X Component of Normal Force",
+ "content": "The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane."
+ },
+ {
+ "description": "X Component of Force of Friction",
+ "content": "The x component of the force of static friction is equal to μ*m*g*cos(θ)*cos(π-θ), where θ is the angle of the incline plane."
+ },
+ {
+ "description": "Equation to Solve for Minimum Coefficient of Static Friction",
+ "content": "Since the net force in the x direction must be 0, we can solve the equation 0=m*g*cos(θ)*cos(π/2-θ)+μ*m*g*cos(θ)*cos(π-θ) for μ to find the minimum coefficient of static friction such that the system stays in equilibrium."
+ }
+ ]
+ },
+ {
+ "questionSetup": [
+ "There is a 1kg weight on an inclined plane. The coefficient of static friction is ",
+ ". The system is in equilibrium (the net force on the weight is 0)."
+ ],
+ "variablesForQuestionSetup": ["coefficient of static friction"],
+ "question": "What is the maximum angle of the plane from the ground?",
+ "answerParts": ["wedge angle"],
+ "answerSolutionDescriptions": [
+ "solve maximum wedge angle from coefficient of static friction given equilibrium"
+ ],
+ "goal": "noMovement",
+ "hints": [
+ {
+ "description": "Net Force in Equilibrium",
+ "content": "If the system is in equilibrium, the sum of the x components of all forces must equal 0. In this system, the normal force and force of static friction have non-zero x components."
+ },
+ {
+ "description": "X Component of Normal Force",
+ "content": "The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane."
+ },
+ {
+ "description": "X Component of Force of Friction",
+ "content": "The x component of the force of static friction is equal to μ*m*g*cos(θ)*cos(π-θ), where θ is the angle of the incline plane."
+ },
+ {
+ "description": "Equation to Solve for Maximum Wedge Angle",
+ "content": "Since the net force in the x direction must be 0, we can solve the equation 0=m*g*cos(θ)*cos(π/2-θ)+μ*m*g*cos(θ)*cos(π-θ) for θ to find the maximum wedge angle such that the system stays in equilibrium."
+ },
+ {
+ "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+ "content": "Simplifying 0=m*g*cos(θ)*cos(π/2-θ)+μ*m*g*cos(θ)*cos(π-θ), we get cos(π/2-θ)=-μ*cos(π-θ)."
+ },
+ {
+ "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+ "content": "The cosine subtraction formula states that cos(A-B)=cos(A)*cos(B)+sin(A)sin(B)."
+ },
+ {
+ "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+ "content": "Applying the cosine subtraction formula to cos(π/2-θ)=-μ*cos(π-θ), we get cos(π/2)*cos(θ)+sin(π/2)*sin(θ)=-μ*(cos(π)cos(θ)+sin(π)sin(θ))."
+ },
+ {
+ "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+ "content": "Simplifying cos(π/2)*cos(θ)-sin(π/2)*sin(θ)=-μ*(cos(π)cos(θ)-sin(π)sin(θ)), we get -sin(θ)=-μ*(-cos(θ))."
+ },
+ {
+ "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+ "content": "Simplifying -sin(θ)=-μ*(-cos(θ)), we get tan(θ)=-μ."
+ },
+ {
+ "description": "Simplifying Equation to Solve for Maximum Wedge Angle",
+ "content": "Solving for θ, we get θ = atan(μ)."
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json b/src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json
new file mode 100644
index 000000000..3015deaa4
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationTutorial.json
@@ -0,0 +1,600 @@
+{
+ "freeWeight": {
+ "question": "A 1kg weight is at rest on the ground. What are the magnitude and directions of the forces acting on the weight?",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "There are two forces acting on the weight: the force of gravity and the normal force.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Normal Force",
+ "magnitude": 9.81,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Force of Gravity",
+ "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Normal Force",
+ "content": "The normal force acts in the positive y direction: π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Normal Force",
+ "magnitude": 9.81,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "All Forces",
+ "content": "Combining all of the forces, we get the following free body diagram.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Normal Force",
+ "magnitude": 9.81,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ },
+ "pendulum": {
+ "question": "A 1kg weight on a 300m rod of negligible mass is released from an angle 30 degrees offset from equilibrium. What are the magnitude and directions of the forces acting on the weight immediately after release? (Ignore air resistance)",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "There are two force acting on the weight: the force of gravity and the force of tension.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Tension",
+ "magnitude": 8.5,
+ "directionInDegrees": 60,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Force of Gravity",
+ "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Tension",
+ "content": "The force of tension acts along the direction of the rod. The rod is 30 degrees offset from equilibrium, so the direction along the rod is 90-30=60 degrees. The tension force has two components—the component creating the centripetal force and the component canceling out the parallel component of gravity. The weight has just been released, so it has velocity 0, meaning the centripetal force is 0. Thus, the tension force only acts to cancel out the parallel component of gravity. Thus, the magnitude of tension is m*g*sin(60°)",
+ "forces": [
+ {
+ "description": "Tension",
+ "magnitude": 8.5,
+ "directionInDegrees": 60,
+ "component": false
+ },
+ {
+ "description": "Gravity - Parallel Component",
+ "magnitude": 8.5,
+ "directionInDegrees": 240,
+ "component": true
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "All Forces",
+ "content": "Combining all of the forces, we get the following free body diagram.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Tension",
+ "magnitude": 8.5,
+ "directionInDegrees": 60,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ },
+ "inclinePlane": {
+ "question": "There is a 1kg weight on an inclined plane. The plane is at an angle θ from the ground, and has a coefficient of static friction μ. The system is in equilibrium (the net force on the weight is 0). What are the magnitudes and directions of the forces acting on the weight?",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "There are three forces acting on the weight: the force of gravity, the normal force, and the force of static friction.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Normal Force",
+ "magnitude": 8.817,
+ "directionInDegrees": 64,
+ "component": false
+ },
+ {
+ "description": "Friction Force",
+ "magnitude": 4.3,
+ "directionInDegrees": 154,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Force of Gravity",
+ "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Normal Force",
+ "content": "The normal force acts in the direction perpendicular to the incline plane: π/2-θ rad, where θ is the angle of the incline plane. The magnitude of the normal force is equal to m*g*cos(θ).",
+ "forces": [
+ {
+ "description": "Normal Force",
+ "magnitude": 8.817,
+ "directionInDegrees": 64,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Force of Static Friction",
+ "content": "The force of static friction acts in the direction along the incline plane: π-θ rad, where θ is the angle of the incline plane. We can use the knowledge that the system is in equilibrium to solve for the magnitude of the force of static friction.",
+ "forces": [
+ {
+ "description": "Friction Force",
+ "magnitude": 4.3,
+ "directionInDegrees": 154,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Net X Force in Equilibrium",
+ "content": "For the system to be in equilibrium, the sum of the x components of all forces must equal 0. The x component of the normal force is equal to m*g*cos(θ)*cos(π/2-θ), where θ is the angle of the incline plane. The x component of gravity is equal to 0. Since the net force in the x direction must be 0, we know the magnitude of the x component of the friction force is m*g*cos(θ)*cos(π/2-θ).",
+ "forces": [
+ {
+ "description": "Normal Force - X Component",
+ "magnitude": 3.87,
+ "directionInDegrees": 0,
+ "component": true
+ },
+ {
+ "description": "Friction Force - X Component",
+ "magnitude": 3.87,
+ "directionInDegrees": 180,
+ "component": true
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Net Y Force Normal Force",
+ "content": "For the system to be in equilibrium, the sum of the y components of all forces must equal 0. The y component of the normal force is equal to m*g*cos(θ)*sin(π/2-θ), where θ is the angle of the incline plane. The y component of gravity is equal to m*g. Since the net force in the x direction must be 0, we know the magnitude of the y component of the friction force is m*g-m*g*cos(θ)*sin(π/2-θ).",
+ "forces": [
+ {
+ "description": "Normal Force - Y Component ",
+ "magnitude": 7.92,
+ "directionInDegrees": 90,
+ "component": true
+ },
+ {
+ "description": "Gravity - Y Component ",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": true
+ },
+ {
+ "description": "Friction Force - Y Component ",
+ "magnitude": 1.89,
+ "directionInDegrees": 90,
+ "component": true
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Magnitude of Force of Friction",
+ "content": "Combining the x and y components of the friction force, we get the magnitude of the friction force is equal to sqrt((m*g*cos(θ)*cos(π/2-θ))^2 + (m*g*cos(θ)*sin(π/2-θ)-m*g)^2).",
+ "forces": [
+ {
+ "description": "Friction Force",
+ "magnitude": 4.3,
+ "directionInDegrees": 154,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "All Forces",
+ "content": "Combining all of the forces, we get the following free body diagram.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Normal Force",
+ "magnitude": 8.817,
+ "directionInDegrees": 64,
+ "component": false
+ },
+ {
+ "description": "Friction Force",
+ "magnitude": 4.3,
+ "directionInDegrees": 154,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ },
+ "spring": {
+ "question": "A 1kg weight is on a spring of negligible mass with rest length 200m and spring constant 0.5. What is the equilibrium spring length?",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "We can start by solving for the forces acting on the weight at any given point in time. There are two forces potentially acting on the weight: the force of gravity and the spring force. In equilibrium, these forces will be perfectly balanced.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Spring Force",
+ "magnitude": 9.81,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Force of Gravity",
+ "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Spring Force",
+ "content": "The spring force acts in the negative y direction (3π/2 rad) if the spring is compressed. The spring force acts in the positive y direction (π/2 rad) if the spring is extended. Because the forces are perfectly balanced and gravity acts in the negative y direction, the spring force must act in the positive y direction and have the same magnitude as the force og gravity, m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Spring Force",
+ "magnitude": 9.81,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Spring Force",
+ "content": "We can use the spring force equation, Fs=kd to solve for the displacement such that Fs=mg. Setting them equal, we get mg=kd. Plugging in for the known values of m,g, and k, we get 1*9.81=0.5d. Solving for d, we get d=19.62 as the equilibrium starting displacement",
+ "forces": [
+ {
+ "description": "Spring Force",
+ "magnitude": 9.81,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ },
+ "circular": {
+ "question": "A 1kg weight is attached to a 100m rod of negligible mass. The weight is undergoing uniform circular motion with tangential velocity 40 m/s. What are the magnitude and directions of the forces acting on the weight? (Ignore air resistance)",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "There is one force acting on the weight: the centripetal force.",
+ "forces": [
+ {
+ "description": "Centripetal Force",
+ "magnitude": 16,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Centripetal Force",
+ "content": "The centripetal force is always directed toward the center of the circle. The formula for solving for the magnitude of centripetal force for an object undergoing uniform circular motion is Fc=mv^2 / r. Plugging in for known values, we get Fc=1*(40^2)/100. Solving for this, we get Fc=16",
+ "forces": [
+ {
+ "description": "Centripetal Force",
+ "magnitude": 16,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ },
+ "pulley": {
+ "question": "A 1kg red weight is attached to a simple pulley with a rope of negligible mass. A 1.5kg blue weight is attached to the other end of the simple pulley. What are the forces acting on the red weight?",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "There are two force acting on the red weight: the force of gravity and the force of tension.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Tension",
+ "magnitude": 11.77,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Gravity",
+ "content": "The force of gravity acts in the negative y direction: 3π/2 rad. It has magnitude equal to m*g. We can approximate g as 9.81.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "Tension",
+ "content": "The force of tension acts in the positive y direction: π/2 rad. We know that the acceleration in a simple pulley system is (mass 2 - mass 1) * acceleration due to gravity / (mass 1 + mass 2) = (1.5-1) * 9.81 / (1.5+1) = 1.962 m/s^2. Because the acceleration is caused by the force of gravity and force of tension, we can solve for the force of tension acting on the weight as mass 1 * (a + acceleration due to gravity) = 1 * (1.962+9.81) = 11.77.",
+ "forces": [
+ {
+ "description": "Tension",
+ "magnitude": 11.77,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "All Forces",
+ "content": "Combining all of the forces, we get the following free body diagram.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Tension",
+ "magnitude": 11.77,
+ "directionInDegrees": 90,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ },
+ "suspension": {
+ "question": "A 1kg weight is attached to two rods hanging from 45° angles from the ceiling. The system is in equilibrium, i.e. the weight does not move. What are the magnitudes and directions of the forces acting on the weight?",
+ "steps": [
+ {
+ "description": "Forces",
+ "content": "There are three force acting on the red weight: the force of gravity, the force of tension from the left rod, and the force of tension from the right rod.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Left Tension",
+ "magnitude": 6.94,
+ "directionInDegrees": 135,
+ "component": false
+ },
+ {
+ "description": "Right Tension",
+ "magnitude": 6.94,
+ "directionInDegrees": 45,
+ "component": false
+ }
+ ],
+ "showMagnitude": false
+ },
+ {
+ "description": "Force X Components",
+ "content": "There are two forces with x components to consider: the tension from the left rod and the tension from the right rod. These must cancel each other out so that the net x force is 0.",
+ "forces": [
+ {
+ "description": "Left Tension X Component",
+ "magnitude": 4.907,
+ "directionInDegrees": 180,
+ "component": true
+ },
+ {
+ "description": "Right Tension X Component",
+ "magnitude": 4.907,
+ "directionInDegrees": 0,
+ "component": true
+ }
+ ],
+ "showMagnitude": false
+ }, {
+ "description": "Force Y Components",
+ "content": "There are three forces with y components to consider: the tension from the left rod, the tension from the right rod, and the force of gravity.",
+ "forces": [
+ {
+ "description": "Left Tension Y Component",
+ "magnitude": 4.907,
+ "directionInDegrees": 90,
+ "component": true
+ },
+ {
+ "description": "Right Tension Y Component",
+ "magnitude": 4.907,
+ "directionInDegrees": 90,
+ "component": true
+ },
+ {
+ "description": "Gravity Y Component",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": true
+ }
+ ],
+ "showMagnitude": false
+ }, {
+ "description": "Force Y Components",
+ "content": "The y components of forces must cancel each other out so that the net y force is 0. Thus, gravity = left tension y component + right tension y component. Because the x components of tension are the same and the angles of each rod are the same, the y components must be the same. Thus, the y component for each force of tension must be 9.81/2.",
+ "forces": [
+ {
+ "description": "Left Tension Y Component",
+ "magnitude": 4.907,
+ "directionInDegrees": 90,
+ "component": true
+ },
+ {
+ "description": "Right Tension Y Component",
+ "magnitude": 4.907,
+ "directionInDegrees": 90,
+ "component": true
+ },
+ {
+ "description": "Gravity Y Component",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": true
+ }
+ ],
+ "showMagnitude": true
+ }, {
+ "description": "Tension",
+ "content": "Now that we know the y component of tension for each rod is 4.907, we can solve for the full force of tension as 4.907 = T * sin(45°) -> T = 6.94.",
+ "forces": [
+ {
+ "description": "Left Tension",
+ "magnitude": 6.94,
+ "directionInDegrees": 135,
+ "component": false
+ },
+ {
+ "description": "Right Tension",
+ "magnitude": 6.94,
+ "directionInDegrees": 45,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ },
+ {
+ "description": "All Forces",
+ "content": "Combining all of the forces, we get the following free body diagram.",
+ "forces": [
+ {
+ "description": "Gravity",
+ "magnitude": 9.81,
+ "directionInDegrees": 270,
+ "component": false
+ },
+ {
+ "description": "Left Tension",
+ "magnitude": 6.94,
+ "directionInDegrees": 135,
+ "component": false
+ },
+ {
+ "description": "Right Tension",
+ "magnitude": 6.94,
+ "directionInDegrees": 45,
+ "component": false
+ }
+ ],
+ "showMagnitude": true
+ }
+ ]
+ }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
new file mode 100644
index 000000000..8cc1d0fbf
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
@@ -0,0 +1,34 @@
+import React = require('react');
+
+export interface Force {
+ magnitude: number;
+ directionInDegrees: number;
+}
+export interface IWallProps {
+ length: number;
+ xPos: number;
+ yPos: number;
+ angleInDegrees: number;
+}
+
+export default class Wall extends React.Component<IWallProps> {
+
+ constructor(props: any) {
+ super(props)
+ }
+
+ wallStyle = {
+ width: this.props.angleInDegrees == 0 ? this.props.length + "%" : "5px",
+ height: this.props.angleInDegrees == 0 ? "5px" : this.props.length + "%",
+ position: "absolute" as "absolute",
+ left: this.props.xPos + "%",
+ top: this.props.yPos + "%",
+ backgroundColor: "#6c7b8b",
+ margin: 0,
+ padding: 0,
+ };
+
+ render () {
+ return (<div style={this.wallStyle}></div>);
+ }
+};
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
new file mode 100644
index 000000000..2165c8ba9
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -0,0 +1,990 @@
+import { computed, IReactionDisposer, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import './PhysicsSimulationBox.scss';
+import React = require('react');
+
+interface IWallProps {
+ length: number;
+ xPos: number;
+ yPos: number;
+ angleInDegrees: number;
+}
+interface IForce {
+ description: string;
+ magnitude: number;
+ directionInDegrees: number;
+}
+export interface IWeightProps {
+ pause: () => void;
+ panelWidth: () => number;
+ panelHeight: () => number;
+ resetRequest: () => number;
+ circularMotionRadius: number;
+ coefficientOfKineticFriction: number;
+ color: string;
+ componentForces: () => IForce[];
+ setComponentForces: (x: IForce[]) => {};
+ displayXVelocity: number;
+ displayYVelocity: number;
+ elasticCollisions: boolean;
+ gravity: number;
+ mass: number;
+ simulationMode: string;
+ noMovement: boolean;
+ paused: boolean;
+ pendulumAngle: number;
+ pendulumLength: number;
+ radius: number;
+ showAcceleration: boolean;
+ showComponentForces: boolean;
+ showForceMagnitudes: boolean;
+ showForces: boolean;
+ showVelocity: boolean;
+ simulationSpeed: number;
+ simulationType: string;
+ springConstant: number;
+ springRestLength: number;
+ springStartLength: number;
+ startForces: () => IForce[];
+ startPendulumAngle: number;
+ startPendulumLength: number;
+ startPosX: number;
+ startPosY: number;
+ startVelX: number;
+ startVelY: number;
+ timestepSize: number;
+ updateMassPosX: number;
+ updateMassPosY: number;
+ forcesUpdated: () => IForce[];
+ setForcesUpdated: (x: IForce[]) => {};
+ setPosition: (x: number | undefined, y: number | undefined) => void;
+ setVelocity: (x: number | undefined, y: number | undefined) => void;
+ setAcceleration: (x: number, y: number) => void;
+ setPendulumAngle: (ang: number | undefined, length: number | undefined) => void;
+ setSpringLength: (length: number) => void;
+ wallPositions: IWallProps[];
+ wedgeHeight: number;
+ wedgeWidth: number;
+ xMax: number;
+ xMin: number;
+ yMax: number;
+ yMin: number;
+}
+
+interface IState {
+ angleLabel: number;
+ clickPositionX: number;
+ clickPositionY: number;
+ coordinates: string;
+ dragging: boolean;
+ kineticFriction: boolean;
+ maxPosYConservation: number;
+ timer: number;
+ updatedStartPosX: any;
+ updatedStartPosY: any;
+ xPosition: number;
+ xVelocity: number;
+ yPosition: number;
+ yVelocity: number;
+ xAccel: number;
+ yAccel: number;
+}
+@observer
+export default class Weight extends React.Component<IWeightProps, IState> {
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ angleLabel: 0,
+ clickPositionX: 0,
+ clickPositionY: 0,
+ coordinates: '',
+ dragging: false,
+ kineticFriction: false,
+ maxPosYConservation: 0,
+ timer: 0,
+ updatedStartPosX: this.props.startPosX,
+ updatedStartPosY: this.props.startPosY,
+ xPosition: this.props.startPosX,
+ xVelocity: this.props.startVelX,
+ yPosition: this.props.startPosY,
+ yVelocity: this.props.startVelY,
+ xAccel: 0,
+ yAccel: 0,
+ };
+ }
+
+ _timer: NodeJS.Timeout | undefined;
+ _resetDisposer: IReactionDisposer | undefined;
+
+ componentWillUnmount() {
+ this._timer && clearTimeout(this._timer);
+ this._resetDisposer?.();
+ }
+ componentWillUpdate(nextProps: Readonly<IWeightProps>, nextState: Readonly<IState>, nextContext: any): void {
+ if (nextProps.paused) {
+ this._timer && clearTimeout(this._timer);
+ this._timer = undefined;
+ } else if (this.props.paused) {
+ this._timer && clearTimeout(this._timer);
+ this._timer = setInterval(() => this.setState({ timer: this.state.timer + 1 }), 50);
+ }
+ }
+
+ // Constants
+ @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';
+ }
+
+ @computed get walls() {
+ return ['One Weight', 'Inclined Plane'].includes(this.props.simulationType) ? this.props.wallPositions : [];
+ }
+ epsilon = 0.0001;
+ labelBackgroundColor = `rgba(255,255,255,0.5)`;
+
+ // Variables
+ weightStyle = {
+ alignItems: 'center',
+ backgroundColor: this.props.color,
+ borderColor: 'black',
+ borderRadius: 50 + '%',
+ borderStyle: 'solid',
+ display: 'flex',
+ height: 2 * this.props.radius + 'px',
+ justifyContent: 'center',
+ left: this.props.startPosX + 'px',
+ position: 'absolute' as 'absolute',
+ top: this.props.startPosY + 'px',
+ touchAction: 'none',
+ width: 2 * this.props.radius + 'px',
+ zIndex: 5,
+ };
+
+ // Helper function to go between display and real values
+ getDisplayYPos = (yPos: number) => this.props.yMax - yPos - 2 * this.props.radius + 5;
+ gravityForce = (): IForce => ({
+ description: 'Gravity',
+ magnitude: this.props.mass * this.props.gravity,
+ directionInDegrees: 270,
+ });
+ // Update display values when simulation updates
+ setDisplayValues = (xPos: number = this.state.xPosition, yPos: number = this.state.yPosition, xVel: number = this.state.xVelocity, yVel: number = this.state.yVelocity) => {
+ this.props.setPosition(xPos, this.getDisplayYPos(yPos));
+ this.props.setVelocity(xVel, yVel);
+ const xAccel = Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100;
+ const yAccel = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100;
+ this.props.setAcceleration(xAccel, yAccel);
+ this.setState({ xAccel, yAccel });
+ };
+ componentDidMount() {
+ this._resetDisposer = reaction(() => this.props.resetRequest(), this.resetEverything);
+ }
+ componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
+ if (prevProps.simulationType != this.props.simulationType) {
+ this.setState({ xVelocity: this.props.startVelX, yVelocity: this.props.startVelY });
+ this.setDisplayValues();
+ }
+
+ // Change pendulum angle from input field
+ if (prevProps.startPendulumAngle != this.props.startPendulumAngle || prevProps.startPendulumLength !== this.props.startPendulumLength) {
+ const length = this.props.startPendulumLength;
+ const x = length * Math.cos(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
+ const y = length * Math.sin(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
+ const xPosition = this.props.xMax / 2 - x - this.props.radius;
+ const yPosition = y - this.props.radius - 5;
+ this.setState({ xPosition, yPosition, updatedStartPosX: xPosition, updatedStartPosY: yPosition });
+ this.props.setPendulumAngle(this.props.startPendulumAngle, this.props.startPendulumLength);
+ }
+
+ // When display values updated by user, update real value
+ if (prevProps.updateMassPosX !== this.props.updateMassPosX) {
+ const x = Math.min(Math.max(0, this.props.updateMassPosX), this.props.xMax - 2 * this.props.radius);
+ this.setState({ updatedStartPosX: x, xPosition: x });
+ this.props.setPosition(x, undefined);
+ }
+ if (prevProps.updateMassPosY != this.props.updateMassPosY) {
+ const y = Math.min(Math.max(0, this.props.updateMassPosY), this.props.yMax - 2 * this.props.radius);
+ const coordinatePosition = this.getDisplayYPos(y);
+ this.setState({ yPosition: coordinatePosition, updatedStartPosY: coordinatePosition });
+ this.props.setPosition(undefined, this.getDisplayYPos(y));
+
+ if (this.props.displayXVelocity != this.state.xVelocity) {
+ this.setState({ xVelocity: this.props.displayXVelocity });
+ this.props.setVelocity(this.props.displayXVelocity, undefined);
+ }
+
+ if (this.props.displayYVelocity != -this.state.yVelocity) {
+ this.setState({ yVelocity: -this.props.displayYVelocity });
+ this.props.setVelocity(undefined, this.props.displayYVelocity);
+ }
+ }
+
+ // Make sure weight doesn't go above max height
+ if ((prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) && !isNaN(this.state.updatedStartPosY) && !isNaN(this.props.startVelY)) {
+ if (this.props.simulationType == 'One Weight') {
+ let maxYPos = this.state.updatedStartPosY;
+ if (this.props.startVelY != 0) {
+ maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * this.props.gravity);
+ }
+ if (maxYPos < 0) maxYPos = 0;
+
+ this.setState({ maxPosYConservation: maxYPos });
+ }
+ }
+
+ // Check for collisions and update
+ if (!this.props.paused && !this.props.noMovement && prevState.timer != this.state.timer) {
+ let collisions = false;
+ if (this.props.simulationType == 'One Weight' || this.props.simulationType == 'Inclined Plane') {
+ const collisionsWithGround = this.checkForCollisionsWithGround();
+ const collisionsWithWalls = this.checkForCollisionsWithWall();
+ collisions = collisionsWithGround || collisionsWithWalls;
+ }
+ if (this.props.simulationType == 'Pulley') {
+ if (this.state.yPosition <= this.props.yMin + 100 || this.state.yPosition >= this.props.yMax - 100) {
+ collisions = true;
+ }
+ }
+ if (!collisions) this.update();
+
+ this.setDisplayValues();
+ }
+
+ // Convert from static to kinetic friction if/when weight slips on inclined plane
+ if (prevState.xVelocity != this.state.xVelocity) {
+ if (this.props.simulationType == 'Inclined Plane' && Math.abs(this.state.xVelocity) > 0.1 && this.props.simulationMode != 'Review' && !this.state.kineticFriction) {
+ this.setState({ kineticFriction: true });
+ const normalForce: IForce = {
+ description: 'Normal Force',
+ magnitude: this.props.mass * this.props.gravity * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+ directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+ };
+ const frictionForce: IForce = {
+ description: 'Kinetic Friction Force',
+ magnitude: this.props.mass * this.props.coefficientOfKineticFriction * this.props.gravity * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+ directionInDegrees: 180 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+ };
+ // reduce magnitude of friction force if necessary such that block cannot slide up plane
+ // prettier-ignore
+ const yForce = - this.props.gravity +
+ normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) +
+ frictionForce.magnitude * Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+ if (yForce > 0) {
+ frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + this.props.gravity) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+ }
+
+ const normalForceComponent: IForce = {
+ description: 'Normal Force',
+ magnitude: this.props.mass * this.props.gravity * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+ directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+ };
+ const gravityParallel: IForce = {
+ description: 'Gravity Parallel Component',
+ magnitude: this.props.mass * this.props.gravity * Math.sin(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+ directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI + 180,
+ };
+ const gravityPerpendicular: IForce = {
+ description: 'Gravity Perpendicular Component',
+ magnitude: this.props.mass * this.props.gravity * Math.cos(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
+ directionInDegrees: 360 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
+ };
+ const kineticFriction = this.props.coefficientOfKineticFriction != 0 ? [frictionForce] : [];
+ this.props.setForcesUpdated([this.gravityForce(), normalForce, ...kineticFriction]);
+ this.props.setComponentForces([normalForceComponent, gravityParallel, gravityPerpendicular, ...kineticFriction]);
+ }
+ }
+
+ // Update x position when start pos x changes
+ if (prevProps.startPosX != this.props.startPosX) {
+ if (this.props.paused && !isNaN(this.props.startPosX)) {
+ this.setState({ xPosition: this.props.startPosX, updatedStartPosX: this.props.startPosX });
+ this.props.setPosition(this.props.startPosX, undefined);
+ }
+ }
+
+ // Update y position when start pos y changes TODO debug
+ if (prevProps.startPosY != this.props.startPosY) {
+ if (this.props.paused && !isNaN(this.props.startPosY)) {
+ this.setState({ yPosition: this.props.startPosY, updatedStartPosY: this.props.startPosY ?? 0 });
+ this.props.setPosition(undefined, this.getDisplayYPos(this.props.startPosY));
+ }
+ }
+
+ // Update wedge coordinates
+ if (!this.state.coordinates || this.props.yMax !== prevProps.yMax || prevProps.wedgeWidth != this.props.wedgeWidth || prevProps.wedgeHeight != this.props.wedgeHeight) {
+ const left = this.props.xMax * 0.25;
+ const coordinatePair1 = Math.round(left) + ',' + this.props.yMax + ' ';
+ const coordinatePair2 = Math.round(left + this.props.wedgeWidth) + ',' + this.props.yMax + ' ';
+ const coordinatePair3 = Math.round(left) + ',' + (this.props.yMax - this.props.wedgeHeight);
+ this.setState({ coordinates: coordinatePair1 + coordinatePair2 + coordinatePair3 });
+ }
+
+ if (this.state.xPosition != prevState.xPosition || this.state.yPosition != prevState.yPosition) {
+ this.weightStyle = {
+ alignItems: 'center',
+ backgroundColor: this.props.color,
+ borderColor: 'black',
+ borderRadius: 50 + '%',
+ borderStyle: 'solid',
+ display: 'flex',
+ height: 2 * this.props.radius + 'px',
+ justifyContent: 'center',
+ left: this.state.xPosition + 'px',
+ position: 'absolute' as 'absolute',
+ top: this.state.yPosition + 'px',
+ touchAction: 'none',
+ width: 2 * this.props.radius + 'px',
+ zIndex: 5,
+ };
+ }
+ }
+
+ // Reset simulation on reset button click
+ resetEverything = () => {
+ this.setState({
+ kineticFriction: false,
+ xPosition: this.state.updatedStartPosX,
+ yPosition: this.state.updatedStartPosY,
+ xVelocity: this.props.startVelX,
+ yVelocity: this.props.startVelY,
+ angleLabel: Math.round(this.props.pendulumAngle * 100) / 100,
+ });
+ this.props.setPendulumAngle(this.props.startPendulumAngle, undefined);
+ this.props.setForcesUpdated(this.props.startForces());
+ this.props.setPosition(this.state.updatedStartPosX, this.state.updatedStartPosY);
+ this.props.setVelocity(this.props.startVelX, this.props.startVelY);
+ this.props.setAcceleration(0, 0);
+ setTimeout(() => this.setState({ timer: this.state.timer + 1 }));
+ };
+
+ // Compute x acceleration from forces, F=ma
+ getNewAccelerationX = (forceList: IForce[]) => {
+ // prettier-ignore
+ return forceList.reduce((newXacc, force) =>
+ newXacc + (force.magnitude * Math.cos((force.directionInDegrees * Math.PI) / 180)) / this.props.mass, 0);
+ };
+
+ // Compute y acceleration from forces, F=ma
+ getNewAccelerationY = (forceList: IForce[]) => {
+ // prettier-ignore
+ return forceList.reduce((newYacc, force) =>
+ newYacc + (-1 * (force.magnitude * Math.sin((force.directionInDegrees * Math.PI) / 180))) / this.props.mass, 0);
+ };
+
+ // Compute uniform circular motion forces given x, y positions
+ getNewCircularMotionForces = (xPos: number, yPos: number): IForce[] => {
+ const deltaX = (this.props.xMin + this.props.xMax) / 2 - (xPos + this.props.radius);
+ const deltaY = yPos + this.props.radius - (this.props.yMin + this.props.yMax) / 2;
+ return [
+ {
+ description: 'Centripetal Force',
+ magnitude: (this.props.startVelX ** 2 * this.props.mass) / this.props.circularMotionRadius,
+ directionInDegrees: (Math.atan2(deltaY, deltaX) * 180) / Math.PI,
+ },
+ ];
+ };
+
+ // Compute spring forces given y position
+ getNewSpringForces = (yPos: number): IForce[] => {
+ const yPosPlus = yPos - this.props.springRestLength > 0;
+ const yPosMinus = yPos - this.props.springRestLength < 0;
+ return [
+ this.gravityForce(),
+ {
+ description: 'Spring Force',
+ magnitude: this.props.springConstant * (yPos - this.props.springRestLength) * (yPosPlus ? 1 : yPosMinus ? -1 : 0),
+ directionInDegrees: yPosPlus ? 90 : 270,
+ },
+ ];
+ };
+
+ // Compute pendulum forces given position, velocity
+ getNewPendulumForces = (xPos: number, yPos: number, xVel: number, yVel: number): IForce[] => {
+ const x = this.props.xMax / 2 - xPos - this.props.radius;
+ const y = yPos + this.props.radius + 5;
+ const angle = (ang => (ang < 0 ? ang + 180 : ang))((Math.atan(y / x) * 180) / Math.PI);
+
+ let oppositeAngle = 90 - angle;
+ if (oppositeAngle < 0) {
+ oppositeAngle = 90 - (180 - angle);
+ }
+
+ const pendulumLength = Math.sqrt(x * x + y * y);
+ this.props.setPendulumAngle(oppositeAngle, undefined);
+
+ const mag = this.props.mass * this.props.gravity * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength;
+
+ return [
+ this.gravityForce(),
+ {
+ description: 'Tension',
+ magnitude: mag,
+ directionInDegrees: angle,
+ },
+ ];
+ };
+
+ // Check for collisions in x direction
+ checkForCollisionsWithWall = () => {
+ let collision = false;
+ if (this.state.xVelocity !== 0) {
+ this.walls
+ .filter(wall => wall.angleInDegrees === 90)
+ .forEach(wall => {
+ const wallX = (wall.xPos / 100) * this.props.panelWidth();
+ const minX = this.state.xPosition < wallX && wall.xPos < 0.35;
+ const maxX = this.state.xPosition + 2 * this.props.radius >= wallX && wall.xPos > 0.35;
+ if (minX || maxX) {
+ this.setState({
+ xPosition: minX ? wallX + 0.01 : wallX - 2 * this.props.radius - 0.01,
+ xVelocity: this.props.elasticCollisions ? -this.state.xVelocity : 0,
+ });
+ collision = true;
+ }
+ });
+ }
+ return collision;
+ };
+
+ // Check for collisions in y direction
+ checkForCollisionsWithGround = () => {
+ let collision = false;
+ const minY = this.state.yPosition;
+ const maxY = this.state.yPosition + 2 * this.props.radius;
+ if (this.state.yVelocity > 0) {
+ this.walls.forEach(wall => {
+ if (wall.angleInDegrees == 0 && wall.yPos > 0.4) {
+ const groundY = (wall.yPos / 100) * this.props.panelHeight();
+ const gravity = this.gravityForce();
+ if (maxY > groundY) {
+ this.setState({ yPosition: groundY - 2 * this.props.radius - 0.01 });
+ if (this.props.elasticCollisions) {
+ this.setState({ yVelocity: -this.state.yVelocity });
+ } else {
+ this.setState({ yVelocity: 0 });
+ const normalForce: IForce = {
+ description: 'Normal force',
+ magnitude: gravity.magnitude,
+ directionInDegrees: -gravity.directionInDegrees,
+ };
+ this.props.setForcesUpdated([gravity, normalForce]);
+ if (this.props.simulationType === 'Inclined Plane') {
+ this.props.setComponentForces([gravity, normalForce]);
+ }
+ }
+ collision = true;
+ }
+ }
+ });
+ }
+ if (this.state.yVelocity < 0) {
+ this.walls.forEach(wall => {
+ if (wall.angleInDegrees == 0 && wall.yPos < 0.4) {
+ const groundY = (wall.yPos / 100) * this.props.panelHeight();
+ if (minY < groundY) {
+ this.setState({
+ yPosition: groundY + 0.01,
+ yVelocity: this.props.elasticCollisions ? -this.state.yVelocity : 0,
+ });
+ collision = true;
+ }
+ }
+ });
+ }
+ return collision;
+ };
+
+ // Called at each RK4 step
+ evaluate = (currentXPos: number, currentYPos: number, currentXVel: number, currentYVel: number, currdeltaXPos: number, currdeltaYPos: number, currdeltaXVel: number, currdeltaYVel: number, dt: number) => {
+ const xPos = currentXPos + currdeltaXPos * dt;
+ const yPos = currentYPos + currdeltaYPos * dt;
+ const xVel = currentXVel + currdeltaXVel * dt;
+ const yVel = currentYVel + currdeltaYVel * dt;
+ const forces = this.getForces(xPos, yPos, xVel, yVel);
+ return {
+ xPos,
+ yPos,
+ xVel,
+ yVel,
+ deltaXPos: xVel,
+ deltaYPos: yVel,
+ deltaXVel: this.getNewAccelerationX(forces),
+ deltaYVel: this.getNewAccelerationY(forces),
+ };
+ };
+
+ getForces = (xPos: number, yPos: number, xVel: number, yVel: number) => {
+ // prettier-ignore
+ switch (this.props.simulationType) {
+ case 'Pendulum': return this.getNewPendulumForces(xPos, yPos, xVel, yVel);
+ case 'Spring' : return this.getNewSpringForces(yPos);
+ case 'Circular Motion': return this.getNewCircularMotionForces(xPos, yPos);
+ default: return this.props.forcesUpdated();
+ }
+ };
+
+ // Update position, velocity using RK4 method
+ update = () => {
+ const startXVel = this.state.xVelocity;
+ const startYVel = this.state.yVelocity;
+ let xPos = this.state.xPosition;
+ let yPos = this.state.yPosition;
+ let xVel = this.state.xVelocity;
+ let yVel = this.state.yVelocity;
+ const forces = this.getForces(xPos, yPos, xVel, yVel);
+ const xAcc = this.getNewAccelerationX(forces);
+ const yAcc = this.getNewAccelerationY(forces);
+ const coeff = (this.props.timestepSize * 1.0) / 6.0;
+ for (let i = 0; i < this.props.simulationSpeed; i++) {
+ const k1 = this.evaluate(xPos, yPos, xVel, yVel, xVel, yVel, xAcc, yAcc, 0);
+ const k2 = this.evaluate(xPos, yPos, xVel, yVel, k1.deltaXPos, k1.deltaYPos, k1.deltaXVel, k1.deltaYVel, this.props.timestepSize * 0.5);
+ const k3 = this.evaluate(xPos, yPos, xVel, yVel, k2.deltaXPos, k2.deltaYPos, k2.deltaXVel, k2.deltaYVel, this.props.timestepSize * 0.5);
+ const k4 = this.evaluate(xPos, yPos, xVel, yVel, k3.deltaXPos, k3.deltaYPos, k3.deltaXVel, k3.deltaYVel, this.props.timestepSize);
+
+ xVel += coeff * (k1.deltaXVel + 2 * (k2.deltaXVel + k3.deltaXVel) + k4.deltaXVel);
+ yVel += coeff * (k1.deltaYVel + 2 * (k2.deltaYVel + k3.deltaYVel) + k4.deltaYVel);
+ xPos += coeff * (k1.deltaXPos + 2 * (k2.deltaXPos + k3.deltaXPos) + k4.deltaXPos);
+ yPos += coeff * (k1.deltaYPos + 2 * (k2.deltaYPos + k3.deltaYPos) + k4.deltaYPos);
+ }
+ // make sure harmonic motion maintained and errors don't propagate
+ switch (this.props.simulationType) {
+ case 'Spring':
+ const equilibriumPos = this.props.springRestLength + (this.props.mass * this.props.gravity) / this.props.springConstant;
+ const amplitude = Math.abs(equilibriumPos - this.props.springStartLength);
+ if (startYVel < 0 && yVel > 0 && yPos < this.props.springRestLength) {
+ yPos = equilibriumPos - amplitude;
+ } else if (startYVel > 0 && yVel < 0 && yPos > this.props.springRestLength) {
+ yPos = equilibriumPos + amplitude;
+ }
+ break;
+ case 'Pendulum':
+ const startX = this.state.updatedStartPosX;
+ if (startXVel <= 0 && xVel > 0) {
+ xPos = this.state.updatedStartPosX;
+ if (this.state.updatedStartPosX > this.props.xMax / 2) {
+ xPos = this.props.xMax / 2 + (this.props.xMax / 2 - startX) - 2 * this.props.radius;
+ }
+ yPos = this.props.startPosY;
+ } else if (startXVel >= 0 && xVel < 0) {
+ xPos = this.state.updatedStartPosX;
+ if (this.state.updatedStartPosX < this.props.xMax / 2) {
+ xPos = this.props.xMax / 2 + (this.props.xMax / 2 - startX) - 2 * this.props.radius;
+ }
+ yPos = this.props.startPosY;
+ }
+ break;
+ case 'One Weight':
+ if (yPos < this.state.maxPosYConservation) {
+ yPos = this.state.maxPosYConservation;
+ }
+ }
+ this.setState({ xVelocity: xVel, yVelocity: yVel, xPosition: xPos, yPosition: yPos });
+
+ const forcesn = this.getForces(xPos, yPos, xVel, yVel);
+ this.props.setForcesUpdated(forcesn);
+
+ // set component forces if they change
+ if (this.props.simulationType == 'Pendulum') {
+ const x = this.props.xMax / 2 - xPos - this.props.radius;
+ const y = yPos + this.props.radius + 5;
+ let angle = (Math.atan(y / x) * 180) / Math.PI;
+ if (angle < 0) {
+ angle += 180;
+ }
+ let oppositeAngle = 90 - angle;
+ if (oppositeAngle < 0) {
+ oppositeAngle = 90 - (180 - angle);
+ }
+
+ const pendulumLength = Math.sqrt(x * x + y * y);
+
+ const tensionComponent: IForce = {
+ description: 'Tension',
+ magnitude: this.props.mass * this.props.gravity * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength,
+ directionInDegrees: angle,
+ };
+ const gravityParallel: IForce = {
+ description: 'Gravity Parallel Component',
+ magnitude: this.props.gravity * Math.cos(((90 - angle) * Math.PI) / 180),
+ directionInDegrees: 270 - (90 - angle),
+ };
+ const gravityPerpendicular: IForce = {
+ description: 'Gravity Perpendicular Component',
+ magnitude: this.props.gravity * Math.sin(((90 - angle) * Math.PI) / 180),
+ directionInDegrees: -(90 - angle),
+ };
+ if (this.props.gravity * Math.sin(((90 - angle) * Math.PI) / 180) < 0) {
+ gravityPerpendicular.magnitude = Math.abs(this.props.gravity * Math.sin(((90 - angle) * Math.PI) / 180));
+ gravityPerpendicular.directionInDegrees = 180 - (90 - angle);
+ }
+ this.props.setComponentForces([tensionComponent, gravityParallel, gravityPerpendicular]);
+ }
+ };
+
+ renderForce = (force: IForce, index: number, asComponent: boolean, color = '#0d0d0d') => {
+ if (force.magnitude < this.epsilon) return;
+
+ const angle = (force.directionInDegrees * Math.PI) / 180;
+ const arrowStartY = this.state.yPosition + this.props.radius - this.props.radius * Math.sin(angle);
+ const arrowStartX = this.state.xPosition + this.props.radius + this.props.radius * Math.cos(angle);
+ const arrowEndY = arrowStartY - Math.abs(force.magnitude) * Math.sin(angle) - this.props.radius * Math.sin(angle);
+ const arrowEndX = arrowStartX + Math.abs(force.magnitude) * Math.cos(angle) + this.props.radius * Math.cos(angle);
+
+ let labelTop = arrowEndY + (force.directionInDegrees >= 0 && force.directionInDegrees < 180 ? 40 : -40);
+ let labelLeft = arrowEndX + (force.directionInDegrees > 90 && force.directionInDegrees < 270 ? -120 : 30);
+
+ labelTop = Math.max(Math.min(labelTop, this.props.yMax + 50), this.props.yMin);
+ labelLeft = Math.max(Math.min(labelLeft, this.props.xMax - 60), this.props.xMin);
+
+ return (
+ <div key={index} style={{ zIndex: 6, position: 'absolute' }}>
+ <div
+ style={{
+ pointerEvents: 'none',
+ position: 'absolute',
+ left: this.props.xMin,
+ top: this.props.yMin,
+ }}>
+ <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
+ <defs>
+ <marker id="forceArrow" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto" markerUnits="strokeWidth">
+ <path d="M0,0 L0,4 L4,2 z" fill={color} />
+ </marker>
+ </defs>
+ <line strokeDasharray={asComponent ? '10,10' : undefined} x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />
+ </svg>
+ </div>
+ <div
+ style={{
+ pointerEvents: 'none',
+ position: 'absolute',
+ left: labelLeft + 'px',
+ top: labelTop + 'px',
+ lineHeight: 1,
+ backgroundColor: this.labelBackgroundColor,
+ }}>
+ <p>{force.description || 'Force'}</p>
+ {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
+ </div>
+ </div>
+ );
+ };
+
+ renderVector = (id: string, magX: number, magY: number, color: string, label: string) => {
+ const mag = Math.sqrt(magX * magX + magY * magY);
+ return (
+ <div className="showvecs" style={{ zIndex: 6 }}>
+ <svg width={this.panelWidth} height={this.panelHeight}>
+ <defs>
+ <marker id={id} markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+ <path d="M0,0 L0,6 L9,3 z" fill={color} />
+ </marker>
+ </defs>
+ <line
+ x1={this.state.xPosition + this.props.radius + (magX / mag) * this.props.radius}
+ y1={this.state.yPosition + this.props.radius + (magY / mag) * this.props.radius}
+ x2={this.state.xPosition + this.props.radius + (magX / mag) * this.props.radius + magX}
+ y2={this.state.yPosition + this.props.radius + (magY / mag) * this.props.radius + magY}
+ stroke={color}
+ strokeWidth="5"
+ markerEnd={`url(#${id})`}
+ />
+ </svg>
+ <div
+ style={{
+ pointerEvents: 'none',
+ position: 'absolute',
+ left: this.state.xPosition + this.props.radius + 2 * (magX / mag) * this.props.radius + magX + 'px',
+ top: this.state.yPosition + this.props.radius + 2 * (magY / mag) * this.props.radius + magY + 'px',
+ lineHeight: 1,
+ }}>
+ <p style={{ background: 'white' }}>{label}</p>
+ </div>
+ </div>
+ );
+ };
+
+ // Render weight, spring, rod(s), vectors
+ render() {
+ return (
+ <div>
+ <div
+ className="weightContainer"
+ onPointerDown={e => {
+ if (this.draggable) {
+ this.props.pause();
+ this.setState({
+ dragging: true,
+ clickPositionX: e.clientX,
+ clickPositionY: e.clientY,
+ });
+ }
+ }}
+ onPointerMove={e => {
+ if (this.state.dragging) {
+ let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
+ if (newY > this.props.yMax - 2 * this.props.radius - 10) {
+ newY = this.props.yMax - 2 * this.props.radius - 10;
+ } else if (newY < 10) {
+ newY = 10;
+ }
+
+ let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
+ if (newX > this.props.xMax - 2 * this.props.radius - 10) {
+ newX = this.props.xMax - 2 * this.props.radius - 10;
+ } else if (newX < 10) {
+ newX = 10;
+ }
+ if (this.props.simulationType == 'Suspension') {
+ if (newX < (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15) {
+ newX = (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15;
+ } else if (newX > (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15) {
+ newX = (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15;
+ }
+ }
+
+ this.setState({ yPosition: newY });
+ this.props.setPosition(undefined, Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100);
+ if (this.props.simulationType != 'Pulley') {
+ this.setState({ xPosition: newX });
+ this.props.setPosition(newX, undefined);
+ }
+ if (this.props.simulationType != 'Suspension') {
+ if (this.props.simulationType != 'Pulley') {
+ this.setState({ updatedStartPosX: newX });
+ }
+ this.setState({ updatedStartPosY: newY });
+ }
+ this.setState({
+ clickPositionX: e.clientX,
+ clickPositionY: e.clientY,
+ });
+ this.setDisplayValues();
+ }
+ }}
+ onPointerUp={e => {
+ if (this.state.dragging) {
+ if (this.props.simulationType != 'Pendulum' && this.props.simulationType != 'Suspension') {
+ this.resetEverything();
+ }
+ this.setState({ dragging: false });
+ let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
+ if (newY > this.props.yMax - 2 * this.props.radius - 10) {
+ newY = this.props.yMax - 2 * this.props.radius - 10;
+ } else if (newY < 10) {
+ newY = 10;
+ }
+
+ let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
+ if (newX > this.props.xMax - 2 * this.props.radius - 10) {
+ newX = this.props.xMax - 2 * this.props.radius - 10;
+ } else if (newX < 10) {
+ newX = 10;
+ }
+ if (this.props.simulationType == 'Spring') {
+ this.props.setSpringLength(newY);
+ }
+ if (this.props.simulationType == 'Suspension') {
+ const x1rod = (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200;
+ const x2rod = (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius;
+ const deltaX1 = this.state.xPosition + this.props.radius - x1rod;
+ const deltaX2 = x2rod - (this.state.xPosition + this.props.radius);
+ const deltaY = this.state.yPosition + this.props.radius;
+ const dir1T = Math.PI - Math.atan(deltaY / deltaX1);
+ const dir2T = Math.atan(deltaY / deltaX2);
+ const tensionMag2 = (this.props.mass * this.props.gravity) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
+ const tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
+ const tensionForce1: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag1,
+ directionInDegrees: (dir1T * 180) / Math.PI,
+ };
+ const tensionForce2: IForce = {
+ description: 'Tension',
+ magnitude: tensionMag2,
+ directionInDegrees: (dir2T * 180) / Math.PI,
+ };
+ this.props.setForcesUpdated([tensionForce1, tensionForce2, this.gravityForce()]);
+ }
+ }
+ }}>
+ <div className="weight" style={this.weightStyle}>
+ <p className="weightLabel">{this.props.mass} kg</p>
+ </div>
+ </div>
+ {this.props.simulationType == 'Spring' && (
+ <div className="spring">
+ <svg width={this.panelWidth} height={this.panelHeight}>
+ {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => {
+ const count = 10;
+ const xPos1 = this.state.xPosition + this.props.radius + (val % 2 === 0 ? -20 : 20);
+ const xPos2 = this.state.xPosition + this.props.radius + (val === 10 ? 0 : val % 2 === 0 ? 20 : -20);
+ const yPos1 = (val * this.state.yPosition) / count;
+ const yPos2 = val === 10 ? this.state.yPosition + this.props.radius : ((val + 1) * this.state.yPosition) / count;
+ return <line key={val} x1={xPos1} strokeLinecap="round" y1={yPos1} x2={xPos2} y2={yPos2} stroke={'#808080'} strokeWidth="10" />;
+ })}
+ </svg>
+ </div>
+ )}
+
+ {this.props.simulationType == 'Pulley' && (
+ <div className="rod">
+ <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>
+ )}
+ {this.props.simulationType == 'Pulley' && (
+ <div className="wheel">
+ <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>
+ )}
+ {this.props.simulationType == 'Suspension' && (
+ <div className="rod">
+ <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 + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200}
+ y2={this.props.yMin}
+ stroke={'#deb887'}
+ strokeWidth="10"
+ />
+ </svg>
+ <p
+ style={{
+ position: 'absolute',
+ left: (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200 + 80 + 'px',
+ top: 10 + 'px',
+ backgroundColor: this.labelBackgroundColor,
+ }}>
+ {Math.round(
+ ((Math.atan((this.state.yPosition + this.props.radius) / (this.state.xPosition + this.props.radius - ((this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200))) * 180) / Math.PI) * 100
+ ) / 100}
+ °
+ </p>
+ <div className="rod">
+ <svg width={this.props.panelWidth() + 'px'} height={this.panelHeight}>
+ <line
+ x1={this.state.xPosition + this.props.radius}
+ y1={this.state.yPosition + this.props.radius}
+ x2={(this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius}
+ y2={this.props.yMin}
+ stroke={'#deb887'}
+ strokeWidth="10"
+ />
+ </svg>
+ </div>
+ <p
+ style={{
+ position: 'absolute',
+ left: (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - 80 + 'px',
+ top: 10 + 'px',
+ backgroundColor: this.labelBackgroundColor,
+ }}>
+ {Math.round(
+ ((Math.atan((this.state.yPosition + this.props.radius) / ((this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - (this.state.xPosition + this.props.radius))) * 180) / Math.PI) * 100
+ ) / 100}
+ °
+ </p>
+ </div>
+ )}
+ {this.props.simulationType == 'Circular Motion' && (
+ <div className="rod">
+ <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.xMin + this.props.xMax) / 2}
+ y2={(this.props.yMin + this.props.yMax) / 2}
+ stroke={'#deb887'}
+ strokeWidth="10"
+ />
+ </svg>
+ </div>
+ )}
+ {this.props.simulationType == 'Pendulum' && (
+ <div className="rod">
+ <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 && (
+ <div>
+ <p
+ style={{
+ position: 'absolute',
+ zIndex: 5,
+ left: this.state.xPosition + 'px',
+ top: this.state.yPosition - 70 + 'px',
+ backgroundColor: this.labelBackgroundColor,
+ }}>
+ {Math.round(this.props.pendulumLength)} m
+ </p>
+ <p
+ style={{
+ position: 'absolute',
+ left: this.props.xMax / 2 + 'px',
+ top: 30 + 'px',
+ backgroundColor: this.labelBackgroundColor,
+ }}>
+ {Math.round(this.props.pendulumAngle * 100) / 100}°
+ </p>
+ </div>
+ )}
+ </div>
+ )}
+ {this.props.simulationType == 'Inclined Plane' && (
+ <div>
+ <div className="wedge">
+ <svg width={this.panelWidth} height={this.props.yMax + 'px'}>
+ <polygon points={this.state.coordinates} style={{ fill: 'burlywood' }} />
+ </svg>
+ </div>
+ <p
+ style={{
+ position: 'absolute',
+ left: Math.round(this.props.xMax * 0.25 + this.props.wedgeWidth / 3) + 'px',
+ top: Math.round(this.props.yMax - 40) + 'px',
+ }}>
+ {Math.round(((Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI) * 100) / 100}°
+ </p>
+ </div>
+ )}
+ {!this.state.dragging &&
+ this.props.showAcceleration &&
+ this.renderVector(
+ 'accArrow',
+ this.getNewAccelerationX(this.props.forcesUpdated()),
+ this.getNewAccelerationY(this.props.forcesUpdated()),
+ 'green',
+ `${Math.round(100 * Math.sqrt(this.state.xAccel * this.state.xAccel + this.state.yAccel * this.state.yAccel)) / 100} m/s^2`
+ )}
+ {!this.state.dragging &&
+ this.props.showVelocity &&
+ this.renderVector(
+ 'velArrow',
+ this.state.xVelocity,
+ this.state.yVelocity,
+ 'blue',
+ `${Math.round(100 * Math.sqrt(this.props.displayXVelocity * this.props.displayXVelocity + this.props.displayYVelocity * this.props.displayYVelocity)) / 100} m/s`
+ )}
+ {!this.state.dragging && this.props.showComponentForces && this.props.componentForces().map((force, index) => this.renderForce(force, index, true))}
+ {!this.state.dragging && this.props.showForces && this.props.forcesUpdated().map((force, index) => this.renderForce(force, index, false))}
+ </div>
+ );
+ }
+}
diff --git a/src/fields/DocSymbols.ts b/src/fields/DocSymbols.ts
new file mode 100644
index 000000000..65decc147
--- /dev/null
+++ b/src/fields/DocSymbols.ts
@@ -0,0 +1,26 @@
+export const Update = Symbol('DocUpdate');
+export const Self = Symbol('DocSelf');
+export const SelfProxy = Symbol('DocSelfProxy');
+export const FieldKeys = Symbol('DocFieldKeys');
+export const FieldTuples = Symbol('DocFieldTuples');
+export const Width = Symbol('DocWidth');
+export const Height = Symbol('DocHeight');
+export const Animation = Symbol('DocAnimation');
+export const Highlight = Symbol('DocHighlight');
+export const DocData = Symbol('DocData');
+export const DocLayout = Symbol('DocLayout');
+export const DocFields = Symbol('DocFields');
+export const DocCss = Symbol('DocCss');
+export const DocAcl = Symbol('DocAcl');
+export const DirectLinks = Symbol('DocDirectLinks');
+export const AclUnset = Symbol('DocAclUnset');
+export const AclPrivate = Symbol('DocAclOwnerOnly');
+export const AclReadonly = Symbol('DocAclReadOnly');
+export const AclAugment = Symbol('DocAclAugment');
+export const AclSelfEdit = Symbol('DocAclSelfEdit');
+export const AclEdit = Symbol('DocAclEdit');
+export const AclAdmin = Symbol('DocAclAdmin');
+export const UpdatingFromServer = Symbol('DocUpdatingFromServer');
+export const Initializing = Symbol('DocInitializing');
+export const ForceServerWrite = Symbol('DocForceServerWrite');
+export const CachedUpdates = Symbol('DocCachedUpdates');
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:47:00 +0000