diff options
| author | Arjun Satarkar <me@arjunsatarkar.net> | 2024-10-31 03:24:28 +0000 |
|---|---|---|
| committer | Arjun Satarkar <me@arjunsatarkar.net> | 2024-10-31 03:24:28 +0000 |
| commit | 15be06b415c693dfe6a10750e619d3128b0b59de (patch) | |
| tree | 6612c79573216026c5b1601fbb33ad37e10112ff | |
| parent | bcb38594492aec4f1116b3fdf0e9821d4016903a (diff) | |
| download | throw_simulation-15be06b415c693dfe6a10750e619d3128b0b59de.tar throw_simulation-15be06b415c693dfe6a10750e619d3128b0b59de.tar.gz throw_simulation-15be06b415c693dfe6a10750e619d3128b0b59de.zip | |
Add image support, page title; fix sleep issue
Passing the ?image query param will use that as the background-image
for the throwable div. I also had to add a `true` to the applyImpulse
call to stop the ball from going unresponsive (this is because it can
go to "sleep", the extra parameter ensures it's woken up.)
| -rw-r--r-- | src/index.html | 5 | ||||
| -rw-r--r-- | src/index.js | 22 |
2 files changed, 19 insertions, 8 deletions
diff --git a/src/index.html b/src/index.html index aa49141..da667a9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Document</title> + <title>Throw</title> <script type="module" src="index.js"></script> <style> html, @@ -14,8 +14,9 @@ div#throwable { position: fixed; transform: translate(-50%, -50%); - background-color: red; border-radius: 50%; + background-color: black; + background-size: cover; } </style> </head> diff --git a/src/index.js b/src/index.js index 1275360..e07ac8a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,13 @@ import RAPIER from "./rapier.es.js"; +const objElement = document.querySelector("div#throwable"); + +const queryParams = new URLSearchParams(window.location.search); +const image = queryParams.get("image"); +if (image !== null) { + objElement.style.backgroundImage = `url(${decodeURI(image)})`; +} + RAPIER.init().then(() => { const CLICK_IMPULSE_MULTIPLIER = 300_000; const GRAVITY = { x: 0.0, y: 2000 }; @@ -36,7 +44,6 @@ RAPIER.init().then(() => { obj, ); - const objElement = document.querySelector("div#throwable"); const objSize = { x: OBJ_BASE_SIZE.x, y: OBJ_BASE_SIZE.y, @@ -81,12 +88,15 @@ RAPIER.init().then(() => { y: clickPosition.y - objPosition.y, }; const distance = Math.sqrt(direction.x ** 2 + direction.y ** 2); - obj.setLinvel({x: 0, y: 0}); + obj.setLinvel({ x: 0, y: 0 }); if (distance > 0) { - obj.applyImpulse({ - x: (direction.x * CLICK_IMPULSE_MULTIPLIER) / distance, - y: (direction.y * CLICK_IMPULSE_MULTIPLIER) / distance, - }); + obj.applyImpulse( + { + x: (direction.x * CLICK_IMPULSE_MULTIPLIER) / distance, + y: (direction.y * CLICK_IMPULSE_MULTIPLIER) / distance, + }, + true, + ); } }); |