aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/PhysicsSimulationBox.tsx190
-rw-r--r--src/client/views/nodes/PhysicsSimulationWeight.tsx95
2 files changed, 152 insertions, 133 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsSimulationBox.tsx
index a78d899e0..e7d5e48f0 100644
--- a/src/client/views/nodes/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsSimulationBox.tsx
@@ -51,6 +51,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
yMax = 300;
color = `rgba(0,0,0,0.5)`;
radius = 0.1*this.yMax
+ update = true
constructor(props: any) {
super(props);
@@ -88,7 +89,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
this.dataDoc.wedge = false;
this.dataDoc.pendulum = false;
this.addWalls();
- this.dataDoc.simulationReset = !this.dataDoc.simulationReset;
};
// Set weight defaults
@@ -218,11 +218,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
this.dataDoc.startPosX = xPos;
this.dataDoc.startPosY = this.getDisplayYPos(yPos);
+ console.log('update start pos x')
+ console.log('update start pos y')
this.updateForcesWithFriction(
Number(this.dataDoc.coefficientOfStaticFriction),
width,
height
);
+ this.dataDoc['updateDisplay'] = !this.dataDoc['updateDisplay']
};
// Helper function to go between display and real values
@@ -270,14 +273,11 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
// Add weight
if (this.dataDoc.simulationType == "Inclined Plane") {
- console.log('add wedge on mount')
this.addWedge()
} else if (this.dataDoc.simulationType == "Pendulum") {
- console.log('add pendulum on mount')
this.addPendulum()
} else {
this.dataDoc.simulationType = "Free Weight"
- console.log('add weight on mount')
this.addWeight()
}
@@ -298,97 +298,107 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
this.dataDoc.accelerationXDisplay = 0;
this.dataDoc.accelerationYDisplay = 0;
this.dataDoc.adjustPendulumAngle = true;
- this.dataDoc.timer = 0;
}
- render () {
- return (
- <div>
- <div className="mechanicsSimulationContainer">
- <div className="mechanicsSimulationContentContainer">
- <div className="mechanicsSimulationButtonsAndElements">
- <div className="mechanicsSimulationElements">
- {this.dataDoc.weight && (
- <Weight
- color={"red"}
- dataDoc={this.dataDoc}
- mass={1}
- radius={this.radius}
- timestepSize={0.002}
- xMax={this.xMax}
- yMax={this.yMax}
- xMin={this.xMin}
- yMin={this.yMin}
- />
- )}
- {this.dataDoc.wedge && (
- <Wedge
- startWidth={this.dataDoc.wedgeWidth}
- startHeight={this.dataDoc.wedgeHeight}
- startLeft={this.xMax * 0.2}
- xMax={this.xMax}
- yMax={this.yMax}
- />
- )}
+ componentDidUpdate() {
+ this.xMax = this.layoutDoc._width;
+ this.yMax = this.layoutDoc._height;
+ this.radius = 0.1*this.yMax
+ }
+
+ render () {
+ return (
+ <div>
+ <div className="mechanicsSimulationContainer">
+ <div className="mechanicsSimulationContentContainer">
+ <div className="mechanicsSimulationButtonsAndElements">
+ <div className="mechanicsSimulationElements">
+ {this.dataDoc.weight && (
+ <Weight
+ adjustPendulumAnge={this.dataDoc.adjustPendulumAnge}
+ color={"red"}
+ dataDoc={this.dataDoc}
+ mass={1}
+ radius={this.radius}
+ simulationReset={this.dataDoc.simulationReset}
+ startPosX={this.dataDoc.startPosX}
+ startPosY={this.dataDoc.startPosY}
+ timestepSize={0.002}
+ updateDisplay={this.dataDoc.updateDisplay}
+ xMax={this.xMax}
+ xMin={this.xMin}
+ yMax={this.yMax}
+ yMin={this.yMin}
+ />
+ )}
+ {this.dataDoc.wedge && (
+ <Wedge
+ startWidth={this.dataDoc.wedgeWidth}
+ startHeight={this.dataDoc.wedgeHeight}
+ startLeft={this.xMax * 0.2}
+ xMax={this.xMax}
+ yMax={this.yMax}
+ />
+ )}
+ </div>
+ <div>
+ {/* {this.dataDoc.wallPositions && (
+ {this.dataDoc.wallPositions.map((element: { length: number; xPos: number; yPos: number; angleInDegrees: number; }, index: React.Key | null | undefined) => {
+ return (
+ <div key={index}>
+ <Wall
+ length={element.length}
+ xPos={element.xPos}
+ yPos={element.yPos}
+ angleInDegrees={element.angleInDegrees}
+ />
+ </div>
+ );
+ })}
+ )} */}
+ </div>
</div>
+ </div>
+ <div className="mechanicsSimulationEquationContainer">
+ <div className="mechanicsSimulationControls">
<div>
- {/* {this.dataDoc.wallPositions && (
- {this.dataDoc.wallPositions.map((element: { length: number; xPos: number; yPos: number; angleInDegrees: number; }, index: React.Key | null | undefined) => {
- return (
- <div key={index}>
- <Wall
- length={element.length}
- xPos={element.xPos}
- yPos={element.yPos}
- angleInDegrees={element.angleInDegrees}
- />
- </div>
- );
- })}
- )} */}
+ {this.dataDoc.simulationPaused && (
+ <button onClick={() => {
+ this.dataDoc.simulationPaused = false}
+ } >START</button>
+ )}
+ {!this.dataDoc.simulationPaused && (
+ <button onClick={() => {
+ this.dataDoc.simulationPaused = true}
+ } >PAUSE</button>
+ )}
+ {this.dataDoc.simulationPaused && (
+ <button onClick={() => {
+ this.dataDoc.simulationReset = !this.dataDoc.simulationReset}
+ } >RESET</button>
+ )}
+ {this.dataDoc.simulationPaused && ( <button onClick={() => {
+ if (!this.dataDoc.pendulum && !this.dataDoc.wedge) {
+ this.addWedge()
+ this.setToWedgeDefault()
+ this.dataDoc.simulationType = "Inclined Plane"
+ }
+ else if (!this.dataDoc.pendulum && this.dataDoc.wedge) {
+ this.setToPendulumDefault()
+ this.addPendulum()
+ this.dataDoc.simulationType = "Pendulum"
+ }
+ else {
+ this.setToWeightDefault()
+ this.addWeight()
+ this.dataDoc.simulationType = "Free Weight"
+ }
+ }} >TYPE</button>)}
+ </div>
</div>
</div>
</div>
- <div className="mechanicsSimulationEquationContainer">
- <div className="mechanicsSimulationControls">
- <div>
- {this.dataDoc.simulationPaused && (
- <button onClick={() => {
- this.dataDoc.simulationPaused = false}
- } >START</button>
- )}
- {!this.dataDoc.simulationPaused && (
- <button onClick={() => {
- this.dataDoc.simulationPaused = true}
- } >PAUSE</button>
- )}
- {this.dataDoc.simulationPaused && (
- <button onClick={() => {
- this.dataDoc.simulationReset = !this.dataDoc.simulationReset}
- } >RESET</button>
- )}
- {this.dataDoc.simulationPaused && ( <button onClick={() => {
- if (!this.dataDoc.pendulum && !this.dataDoc.wedge) {
- this.addWedge()
- this.setToWedgeDefault()
- this.dataDoc.simulationType = "Inclined Plane"
- }
- else if (!this.dataDoc.pendulum && this.dataDoc.wedge) {
- this.setToPendulumDefault()
- this.addPendulum()
- this.dataDoc.simulationType = "Pendulum"
- }
- else {
- this.addWeight()
- this.setToWeightDefault()
- this.dataDoc.simulationType = "Free Weight"
- }
- }} >TYPE</button>)}
- </div>
- </div>
- </div>
</div>
- </div>
- );
- }
-} \ No newline at end of file
+ );
+ }
+ } \ No newline at end of file
diff --git a/src/client/views/nodes/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsSimulationWeight.tsx
index e7bd86915..fc75fa5aa 100644
--- a/src/client/views/nodes/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWeight.tsx
@@ -8,20 +8,25 @@ export interface IForce {
directionInDegrees: number;
}
export interface IWeightProps {
- dataDoc: Doc;
+ adjustPendulumAngle: boolean;
color: string;
+ dataDoc: Doc;
mass: number;
- wedge: boolean;
radius: number;
+ simulationReset: boolean;
+ startPosX: number;
+ startPosY: number;
startVelX?: number;
startVelY?: number;
timestepSize: number;
+ updateDisplay: boolean,
walls: IWallProps[];
- wedgeWidth: number;
+ wedge: boolean;
wedgeHeight: number;
+ wedgeWidth: number;
xMax: number;
- yMax: number;
xMin: number;
+ yMax: number;
yMin: number;
}
@@ -37,6 +42,7 @@ interface IState {
yPosition: number,
xVelocity: number,
yVelocity: number,
+ update: boolean,
}
export default class Weight extends React.Component<IWeightProps, IState> {
@@ -133,8 +139,9 @@ export default class Weight extends React.Component<IWeightProps, IState> {
}
componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
+
// When display values updated by user, update real values
- if (this.props.dataDoc['updateDisplay'] != prevProps.dataDoc['updateDisplay']) {
+ if (this.props.updateDisplay != prevProps.updateDisplay) {
if (this.props.dataDoc['positionXDisplay'] != this.state.xPosition) {
let x = this.props.dataDoc['positionXDisplay'];
x = Math.max(0, x);
@@ -167,47 +174,29 @@ export default class Weight extends React.Component<IWeightProps, IState> {
}
}
// Update sim
- if (this.state.timer != prevState.timer) {
- if (!this.props.dataDoc['simulationPaused']) {
- console.log('update')
- let collisions = false;
- if (!this.props.dataDoc['pendulum']) {
- const collisionsWithGround = this.checkForCollisionsWithGround();
- const collisionsWithWalls = this.checkForCollisionsWithWall();
- collisions = collisionsWithGround || collisionsWithWalls;
- }
- if (!collisions) {
- this.update();
- }
- this.setDisplayValues();
+ if (!this.props.dataDoc['simulationPaused']) {
+ if (this.state.timer != prevState.timer) {
+ console.log('update sim')
+ console.log('update')
+ let collisions = false;
+ if (!this.props.dataDoc['pendulum']) {
+ const collisionsWithGround = this.checkForCollisionsWithGround();
+ const collisionsWithWalls = this.checkForCollisionsWithWall();
+ collisions = collisionsWithGround || collisionsWithWalls;
+ }
+ if (!collisions) {
+ this.update();
+ }
+ this.setDisplayValues();
}
}
- this.weightStyle = {
- backgroundColor: this.props.color,
- borderStyle: "solid",
- borderColor: this.state.dragging ? "lightblue" : "black",
- position: "absolute" as "absolute",
- left: this.state.xPosition + "px",
- top: this.state.yPosition + "px",
- width: 2 * this.props.radius + "px",
- height: 2 * this.props.radius + "px",
- borderRadius: 50 + "%",
- display: "flex",
- zIndex: 5,
- justifyContent: "center",
- alignItems: "center",
- touchAction: "none",
- };
- if (this.props.dataDoc['simulationReset'] != prevProps.dataDoc['simulationReset']) {
+ if (this.props.simulationReset != prevProps.simulationReset) {
+ console.log('reset sim')
this.resetEverything();
}
- if (this.props.dataDoc['startForces'] != prevProps.dataDoc['startForces']) {
- this.setState({xVelocity: this.props.startVelX ?? 0})
- this.setState({yVelocity: this.props.startVelY ?? 0})
- this.setDisplayValues();
- }
- if (this.props.dataDoc['adjustPendulumAngle'] != prevProps.dataDoc['adjustPendulumAngle']) {
+ if (this.props.adjustPendulumAngle != prevProps.adjustPendulumAngle) {
+ console.log('update angle')
// Change pendulum angle based on input field
let length = this.props.dataDoc['pendulumLength'] ?? 0;
const x =
@@ -222,18 +211,21 @@ export default class Weight extends React.Component<IWeightProps, IState> {
this.setState({updatedStartPosY: yPos})
}
// Update x start position
- if (this.props.dataDoc['startPosX'] != prevProps.dataDoc['startPosX']) {
+ if (this.props.startPosX != prevProps.startPosX) {
+ console.log('update start x pos')
this.setState({updatedStartPosX: this.props.dataDoc['startPosX']})
this.setState({xPosition: this.props.dataDoc['startPosX']})
this.setXPosDisplay(this.props.dataDoc['startPosX']);
}
// Update y start position
- if (this.props.dataDoc['startPosY'] != prevProps.dataDoc['startPosY']) {
+ if (this.props.startPosY != prevProps.startPosY) {
+ console.log('update start y pos')
this.setState({updatedStartPosY: this.props.dataDoc['startPosY']})
this.setState({yPosition: this.props.dataDoc['startPosY']})
this.setYPosDisplay(this.props.dataDoc['startPosY']);
}
if (this.state.xVelocity != prevState.xVelocity) {
+ console.log('check for kinetic friction')
if (this.props.dataDoc['wedge'] && this.state.xVelocity != 0 && !this.state.kineticFriction) {
this.setState({kineticFriction: true});
//switch from static to kinetic friction
@@ -276,6 +268,23 @@ export default class Weight extends React.Component<IWeightProps, IState> {
}
}
}
+
+ this.weightStyle = {
+ backgroundColor: this.props.color,
+ borderStyle: "solid",
+ borderColor: this.state.dragging ? "lightblue" : "black",
+ position: "absolute" as "absolute",
+ left: this.state.xPosition + "px",
+ top: this.state.yPosition + "px",
+ width: 2 * this.props.radius + "px",
+ height: 2 * this.props.radius + "px",
+ borderRadius: 50 + "%",
+ display: "flex",
+ zIndex: 5,
+ justifyContent: "center",
+ alignItems: "center",
+ touchAction: "none",
+ };
}
resetEverything = () => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 09:47:28 +0000