1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
import "./PhysicsSimulationBox.scss";
import { FieldView, FieldViewProps } from './FieldView';
import React = require('react');
import { ViewBoxAnnotatableComponent } from '../DocComponent';
import { observer } from 'mobx-react';
export interface IForce {
description: string;
magnitude: number;
directionInDegrees: number;
}
export interface IWallProps {
length: number;
xPos: number;
yPos: number;
angleInDegrees: number;
}
@observer
export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
forceOfGravity: IForce = {
description: "Gravity",
magnitude: 9.81,
directionInDegrees: 270,
};
// Logic for Dash integration
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PhysicsSimulationBox, fieldKey); }
constructor(props: any) {
super(props);
this.state = {
timer: 0,
weight: true,
pendulum: false,
wedge: false,
startPosX: 0,
startPosY: 0,
showVelocity: false,
showAcceleration: false,
showForces: false,
elasticCollisions: false,
updatedForces: [this.forceOfGravity],
wallPositions: []
}
}
// Add one weight to the simulation
addWeight = () => {
this.setState({weight: true});
this.setState({wedge: false});
this.setState({pendulum: false});
};
// Remove floor and walls from simulation
removeWalls = () => {
this.setState({wallPositions: []});
};
// Add floor and walls to simulation
addWalls = () => {
const walls: IWallProps[] = [];
walls.push({ length: 70, xPos: 0, yPos: 80, angleInDegrees: 0 });
walls.push({ length: 80, xPos: 0, yPos: 0, angleInDegrees: 90 });
walls.push({ length: 80, xPos: 69.5, yPos: 0, angleInDegrees: 90 });
this.setState({wallPositions: walls});
};
// Timer for animating the simulation
// setInterval(() => {
// const time = this.timer ?? 0
// this.setState({timer: time+1});
// }, 60);
render () {
return (
<div className = "physicsSimulationContainer">
</div>
);
}
}
|
