projects / xy-pid-controller / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (initial)
init: setup parcel and planck
authorRobin Krens <robin@robinkrens.nl>
Tue, 23 Jan 2024 11:52:01 +0000 (12:52 +0100)
committerRobin Krens <robin@robinkrens.nl>
Tue, 23 Jan 2024 11:52:01 +0000 (12:52 +0100)
.eslintrc.js [new file with mode: 0644] patch | blob
package.json [new file with mode: 0644] patch | blob
src/app.js [new file with mode: 0644] patch | blob
src/index.html [new file with mode: 0644] patch | blob
src/styles.css [new file with mode: 0644] patch | blob

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644 (file)
index 0000000..fb66cc6
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,64 @@
+module.exports = {
+       "env": {
+               "browser": true,
+               "es2021": true
+       },
+       "extends": "eslint:recommended",
+       "parserOptions": {
+               "ecmaVersion": "latest",
+               "sourceType": "module"
+       },
+       "rules": {
+               "indent": [
+                       "error",
+                       "tab"
+               ],
+               "linebreak-style": [
+                       "error",
+                       "unix"
+               ],
+               "quotes": [
+                       "error",
+                       "double"
+               ],
+               "semi": [
+                       "error",
+                       "always"
+               ],
+               "block-spacing": [
+                       "error",
+                       "never"
+               ],
+               "array-bracket-newline": [
+                       "error",
+                       "never"
+               ],
+               "array-element-newline": [
+                       "error",
+                       "never"
+               ],
+               "space-in-parens": [
+                       "error",
+                       "never"
+               ],
+               "array-bracket-spacing": [
+                       "error",
+                       "never"
+               ],
+               "object-curly-spacing": [
+                       "error",
+                       "never"
+               ],
+               "newline-per-chained-call": [
+                       "error",
+                       {"ignoreChainWithDepth": 1}
+               ],
+               "no-multi-spaces": [
+                       "error"
+               ],
+               "dot-location": [
+                       "error",
+                       "object"
+               ]
+       }
+};
diff --git a/package.json b/package.json
new file mode 100644 (file)
index 0000000..af4002f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "pid",
+  "version": "1.0.0",
+  "description": "",
+  "source": "src/index.html",
+  "scripts": {
+    "start": "parcel serve --no-cache",
+    "build": "parcel build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Robin Krens",
+  "license": "ISC",
+  "dependencies": {
+    "planck": "^1.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "parcel": "^2.11.0"
+  }
+}
diff --git a/src/app.js b/src/app.js
new file mode 100644 (file)
index 0000000..628b3af
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,45 @@
+import {Vec2, Box, World} from "planck";
+
+// Get the canvas element
+const canvas = document.getElementById("area");
+const ctx = canvas.getContext("2d");
+
+// Create a <link>Planck.js</link> world
+const world = World(Vec2(0, 0));
+
+// Define the box properties
+const boxWidth = 50;
+const boxHeight = 50;
+
+// Create a dynamic body for the box
+const box = world.createDynamicBody(Vec2(200, 100));
+box.createFixture({
+       shape: Box(boxWidth / 2, boxHeight / 2),
+       density: 1.0,
+});
+
+// Render the box on the canvas
+function render() {
+       const position = box.getPosition();
+       const angle = box.getAngle();
+
+       // Clear the canvas
+       ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+       // Draw the box
+       ctx.save();
+       ctx.translate(position.x, position.y);
+       ctx.rotate(angle);
+       ctx.fillStyle = "#0095DD";
+       ctx.fillRect(-boxWidth / 2, -boxHeight / 2, boxWidth, boxHeight);
+       ctx.restore();
+}
+
+// Animation loop
+function animate() {
+       world.step(1 / 60);
+       render();
+       requestAnimationFrame(animate);
+}
+
+animate();
diff --git a/src/index.html b/src/index.html
new file mode 100644 (file)
index 0000000..36bc581
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>robinkrens.nl - Simple JS PID</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script type="module" src="app.js"></script>
+  </head>
+  <body>
+         <canvas id="area"></canvas>
+  </body>
+</html>
diff --git a/src/styles.css b/src/styles.css
new file mode 100644 (file)
index 0000000..59169e3
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,11 @@
+#area {
+       margin: auto;
+       padding: 0;
+       display: block;
+       background: #ccc;
+}
+
+h1 {
+  color: blue;
+  font-family: cursive;
+}
X-Y axis PID controller