From dd4bdae44beedb77cbb4bd7b4db42a633f146bc2 Mon Sep 17 00:00:00 2001 From: Robin Krens Date: Tue, 23 Jan 2024 12:52:01 +0100 Subject: [PATCH 1/1] init: setup parcel and planck --- .eslintrc.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 21 +++++++++++++++++++ src/app.js | 45 +++++++++++++++++++++++++++++++++++++++++ src/index.html | 12 +++++++++++ src/styles.css | 11 ++++++++++ 5 files changed, 153 insertions(+) create mode 100644 .eslintrc.js create mode 100644 package.json create mode 100644 src/app.js create mode 100644 src/index.html create mode 100644 src/styles.css diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 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 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 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 Planck.js 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 index 0000000..36bc581 --- /dev/null +++ b/src/index.html @@ -0,0 +1,12 @@ + + + + + robinkrens.nl - Simple JS PID + + + + + + + diff --git a/src/styles.css b/src/styles.css new file mode 100644 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; +} -- 2.7.4