pendulum angle

1 files changed, 56 insertions, 20 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsSimulationBox.tsx
index 7eb9092bf..1a64ec795 100644
--- a/src/client/views/nodes/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsSimulationBox.tsx
@@ -119,6 +119,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     let mag = 9.81 * Math.cos((angle * Math.PI) / 180);
     this.dataDoc.pendulumAngle = angle;
     this.dataDoc.pendulumLength = length;
+    this.dataDoc.startPendulumAngle = angle;
     this.dataDoc.adjustPendulumAngle = !this.dataDoc.adjustPendulumAngle;
   }
 
@@ -316,7 +317,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
               <div className="mechanicsSimulationElements">
                 {this.dataDoc.weight && (
                   <Weight
-                    adjustPendulumAnge={this.dataDoc.adjustPendulumAnge}
+                    adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
                     color={"red"}
                     dataDoc={this.dataDoc}
                     mass={1}
@@ -326,6 +327,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     startPosY={this.dataDoc.startPosY}
                     timestepSize={0.002}
                     updateDisplay={this.dataDoc.updateDisplay}
+                    walls={this.dataDoc.wallPositions}
+                    wedge={this.dataDoc.wedge}
+                    wedgeWidth={this.dataDoc.wedgeWidth}
+                    wedgeHeight={this.dataDoc.wedgeHeight}
                     xMax={this.xMax}
                     xMin={this.xMin}
                     yMax={this.yMax}
@@ -365,32 +370,63 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     <FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
                 </div>
                 <h4>Simulation Settings</h4>
-                <div className="mechanicsSimulationSettingsMenuContents">
-                  <div className="mechanicsSimulationSettingsMenuColumn">
-                    <div><p>Show forces</p></div>
-                    <div><p>Show acceleration</p></div>
-                    <div><p>Show velocity</p></div>
-                    {this.dataDoc.simulationType == "Free Weight" && <div><p>Elastic collisions </p></div>}
-                  </div>
-                  <div className="mechanicsSimulationSettingsMenuColumn">
-                    <div><input type="checkbox" checked={this.dataDoc.showForces} onClick={() => {this.dataDoc.showForces = !this.dataDoc.showForces}}/></div>
-                    <div><input type="checkbox" checked={this.dataDoc.showAcceleration}  onClick={() => {this.dataDoc.showAcceleration = !this.dataDoc.showAcceleration}}/></div>
-                    <div><input type="checkbox" checked={this.dataDoc.showVelocity} onClick={() => {this.dataDoc.showVelocity = !this.dataDoc.showVelocity}}/></div>
-                    {this.dataDoc.simulationType == "Free Weight" && <div><input type="checkbox" checked={this.dataDoc.elasticCollisions} onClick={() => {this.dataDoc.elasticCollisions = !this.dataDoc.elasticCollisions}}/></div>}
-                  </div>
+                <div className="mechanicsSimulationSettingsMenuRow">
+                   <div className="mechanicsSimulationSettingsMenuRowDescription"><p>Show forces</p></div>
+                   <div><input type="checkbox" checked={this.dataDoc.showForces} onClick={() => {this.dataDoc.showForces = !this.dataDoc.showForces}}/></div>
+                </div>
+                <div className="mechanicsSimulationSettingsMenuRow">
+                  <div className="mechanicsSimulationSettingsMenuRowDescription"><p>Show acceleration</p></div>
+                  <div><input type="checkbox" checked={this.dataDoc.showAcceleration}  onClick={() => {this.dataDoc.showAcceleration = !this.dataDoc.showAcceleration}}/></div>
                 </div>
+                <div className="mechanicsSimulationSettingsMenuRow">
+                <div className="mechanicsSimulationSettingsMenuRowDescription">
+                  <p>Show velocity</p></div>
+                  <div><input type="checkbox" checked={this.dataDoc.showVelocity} onClick={() => {this.dataDoc.showVelocity = !this.dataDoc.showVelocity}}/></div>
+                </div>
+                <br/>
+                {this.dataDoc.simulationType == "Free Weight" && <div className="mechanicsSimulationSettingsMenuRow">
+                  <div className="mechanicsSimulationSettingsMenuRowDescription"><p>Elastic collisions </p></div>
+                  <div><input type="checkbox" checked={this.dataDoc.elasticCollisions} onClick={() => {this.dataDoc.elasticCollisions = !this.dataDoc.elasticCollisions}}/></div>
+                </div>}
+                {this.dataDoc.simulationType == "Pendulum" && <div className="mechanicsSimulationSettingsMenuRow">
+                  <div className="mechanicsSimulationSettingsMenuRowDescription"><p>Pendulum start angle</p></div>
+                  <div>
+                    <input 
+                      type="number" 
+                      value={this.dataDoc.startPendulumAngle} 
+                      max={35} 
+                      min={0} 
+                      step={1} 
+                      onInput={(e) => {
+                        let angle = e.target.value;
+                        if (angle > 35) {
+                          angle = 35
+                        }
+                        if (angle < 0) {
+                          angle = 0
+                        }
+                        let length = this.xMax*0.7;
+                        let x = length * Math.cos(((90 - angle) * Math.PI) / 180);
+                        let y = length * Math.sin(((90 - angle) * Math.PI) / 180);
+                        let xPos = this.xMax / 2 - x - this.radius;
+                        let yPos = y - this.radius;
+                        this.dataDoc.startPosX = xPos;
+                        this.dataDoc.startPosY = yPos;
+                        let mag = 9.81 * Math.cos((angle * Math.PI) / 180);
+                        this.dataDoc.pendulumAngle = angle;
+                        this.dataDoc.pendulumLength = length;
+                        this.dataDoc.startPendulumAngle = angle;
+                        this.dataDoc.adjustPendulumAngle = !this.dataDoc.adjustPendulumAngle;
+                      }}
+                    />
+                  </div>
+                </div>}
                 {/* {this.dataDoc.simulationType == "Inclined Plane" &&
                   <div className="mechanicsSimulationSettingsMenuRow">
                     <p>Inclined plane angle </p>
                     <p>input field!</p>
                   </div>
                 } */}
-                {/* {this.dataDoc.simulationType == "Pendulum" &&
-                  <div className="mechanicsSimulationSettingsMenuRow">
-                    <p>Pendulum angle </p>
-                    <p>input field!</p>
-                  </div>
-                } */}
               </div>
             )}
           </div>