Simple gravity input

ftripier · Sep 3, 2018 · 2563330 · 2563330
1 parent 87f001f
commit 2563330
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 6 deletions.
diff --git a/index.css b/index.css
@@ -1,7 +1,32 @@
 body {
   margin:0;
   padding:0;
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  color: #444444;
+  font-weight: 400;
 }
 
 html, body { width:100%; height:100%; }
-canvas { display:block; }
+canvas { display:block; }
+
+.system-input input {
+  font: unset;
+  font-size:14pt;
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  color: #444444;
+  font-weight: 400;
+}
+
+.system-input label {
+  margin-right: 12px;
+}
+
+.system-input {
+  padding: 12px;
+}
+
+.input-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
   <head>
     <title>Classical Mechanics</title>
     <link rel="stylesheet" type="text/css" href="index.css">
+    <script src="lib/system.js"></script>
   </head>
   <body>
     <canvas id="canvas"></canvas>
     <script src="dist/index.js"></script>
+    <script>
+      SystemJS.import("index");
+    </script>
   </body>
 </html>
diff --git a/lib/system.js b/lib/system.js
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "tslint-config-airbnb": "^5.10.0"
   },
+  "main": "src/index.ts",
   "scripts": {
     "dev": "tsc -w"
   }

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,5 @@
+import Input from "./input";
+
 interface Map<T> {
   [key: string]: T;
 }
@@ -100,7 +102,7 @@ const INITIAL_ANGULAR_VELOCITY = Math.PI * (1 / 128);
 const INITIAL_THETA = 0;
 
 function evolveSystem(state: State, dt: number) {
-  const gravity = 0.001;
+  const gravity = state.system.gravity;
   const mass = 1;
   const gravitationalAcceleration = -gravity * Math.sin(state.system.theta);
 
@@ -160,3 +162,7 @@ const loop = (state: State, ctx: CanvasRenderingContext2D) => {
 };
 engine.nextFrame(loop);
 window.requestAnimationFrame(engine.run.bind(engine));
+const input = new Input("Gravity", "0.001", (e: Event) => {
+  engine.state.system.gravity = input.getValue();
+});
+engine.state.system.gravity = input.getValue();
diff --git a/src/input.ts b/src/input.ts
@@ -0,0 +1,29 @@
+export default class Input {
+  element: HTMLInputElement;
+  constructor(name = "", value = "", onchange = (e: Event) => {}) {
+    let inputArea = document.querySelector(".input-area");
+    if (!inputArea) {
+      inputArea = document.createElement("div");
+      inputArea.classList.add("input-area");
+      document.body.appendChild(inputArea);
+    }
+    const container = document.createElement("div");
+    container.classList.add("system-input");
+    const docfrag = document.createElement("input");
+    const label = document.createElement("label");
+    label.innerText = name;
+    docfrag.type = "number";
+    docfrag.name = name;
+    docfrag.value = value;
+    docfrag.onchange = onchange;
+    container.appendChild(label);
+    container.appendChild(docfrag);
+    inputArea.appendChild(container);
+
+    this.element = docfrag;
+  }
+
+  getValue() {
+    return this.element.value;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,17 +1,17 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "system",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "dist",                        /* Redirect output structure to the directory. */
+    "outFile": "dist/index.js",                       /* Concatenate and emit output to single file. */
+    // "outDir": "dist",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "removeComments": true,                /* Do not emit comments to output. */