diff --git a/docs/pages/collision.md b/docs/pages/collision.md index bbc9d362..1ddfd529 100644 --- a/docs/pages/collision.md +++ b/docs/pages/collision.md @@ -24,7 +24,7 @@ These points share the same normal vector so Planck.js groups them into a manifold structure. The contact solver takes advantage of this to improve stacking stability. -![Contact Manifold](/images/manifolds.svg) +![Contact Manifold](/planck.js/docs/images/manifolds.svg) Normally you don't need to compute contact manifolds directly, however you will likely use the results produced in the simulation. @@ -70,13 +70,13 @@ shapes. The distance function needs both shapes to be converted into a `DistanceProxy`. There is also some caching used to warm start the distance function for repeated calls. -![Distance Function](/images/distance.svg) +![Distance Function](/planck.js/docs/images/distance.svg) ### Time of Impact If two shapes are moving fast, they may *tunnel* through each other in a single time step. -![Tunneling](/images/tunneling2.svg) +![Tunneling](/planck.js/docs/images/tunneling2.svg) The `TimeOfImpact` function is used to determine the time when two moving shapes collide. This is called the *time of impact* (TOI). The @@ -94,9 +94,9 @@ ensures the shapes do not cross on that axis. This might miss collisions that are clear at the final positions. While this approach may miss some collisions, it is very fast and adequate for tunnel prevention. -![Captured Collision](/images/captured_toi.svg) +![Captured Collision](/planck.js/docs/images/captured_toi.svg) -![Missed Collision](/images/missed_toi.svg) +![Missed Collision](/planck.js/docs/images/missed_toi.svg) It is difficult to put a restriction on the rotation magnitude. There may be cases where collisions are missed for small rotations. Normally, @@ -132,9 +132,9 @@ A region query uses the tree to find all leaf AABBs that overlap a query AABB. This is faster than a brute force approach because many shapes can be skipped. -![Raycast](/images/raycast.svg) +![Raycast](/planck.js/docs/images/raycast.svg) -![Overlap Test](/images/overlap_test.svg) +![Overlap Test](/planck.js/docs/images/overlap_test.svg) Normally you will not use the dynamic tree directly. Rather you will go through the `World` class for ray casts and region queries. If you plan diff --git a/docs/pages/core-concepts.md b/docs/pages/core-concepts.md index 493ad0fc..2a0641bc 100644 --- a/docs/pages/core-concepts.md +++ b/docs/pages/core-concepts.md @@ -48,7 +48,7 @@ The Planck.js solver is a high-performance iterative solver that operates in ord ### Continuous Collision The solver advances bodies in time using discrete time steps. Without intervention this can lead to tunneling. -![Tunneling Effect](/images/tunneling1.svg) +![Tunneling Effect](/planck.js/docs/images/tunneling1.svg) Planck.js contains specialized algorithms to deal with tunneling. First, the collision algorithms can interpolate the motion of two bodies to find the first time of impact (TOI). Second, there is a sub-stepping solver that moves bodies to their first time of impact and then resolves the collision. diff --git a/docs/pages/install.md b/docs/pages/install.md index f735d5c9..7d6e0c6f 100644 --- a/docs/pages/install.md +++ b/docs/pages/install.md @@ -2,27 +2,18 @@ showOutline: false --- -## Get Started +## Install -### Running Your Code - -Planck.js is a physics simulation library, and it doesn't draw anything. - -[Piqnt](https://piqnt.com/) is an online playground for Planck.js. You can explore [examples](https://piqnt.com/planck.js/), inspect and edit them, or create new ones. - -[Testbed](./testbed) is a simple tool (included in the project repository) to visualize and interact with physics simulation. Testbed is compatible with Piqnt playground. - -You can use Planck.js with any game engines or frameworks, or use an existing integrations. See [Simulation](./world/simulation) and [Rendering](./rendering) page for more information. - -### Install +Planck can be installed or downloaded from NPM or a CDN. #### NPM +First install the package. ```sh npm install planck ``` -Import the library in your code: +Then import the library in your code: ```js import { World } from 'planck'; @@ -30,7 +21,15 @@ import { World } from 'planck'; const world = new World(); ``` -Import the library with testbed: +You can alternatively import planck namespace to access all classes: + +```js +import planck from 'planck'; + +const world = new planck.World(); +``` + +To use testbed you need to import `planck/with-testbed` instead: ```js import { World, Testbed } from 'planck/with-testbed'; @@ -54,6 +53,8 @@ Planck.js is available on [jsDelivr](https://www.jsdelivr.com/package/npm/planck ``` +To use testbed you need to use `planck-with-testbed.min.js` instead: + ```html diff --git a/docs/pages/joint/distance-joint.md b/docs/pages/joint/distance-joint.md index f63a2d1f..1d16566d 100644 --- a/docs/pages/joint/distance-joint.md +++ b/docs/pages/joint/distance-joint.md @@ -10,7 +10,7 @@ you specify the two anchor points in world coordinates. The first anchor point is connected to body 1, and the second anchor point is connected to body 2. These points imply the length of the distance constraint. -![Distance Joint](/images/distance_joint.gif) +![Distance Joint](/planck.js/docs/images/distance_joint.gif) Here is an example of a distance joint definition. In this case we decide to allow the bodies to collide. diff --git a/docs/pages/joint/gear-joint.md b/docs/pages/joint/gear-joint.md index 7ff3dda0..d0d5094e 100644 --- a/docs/pages/joint/gear-joint.md +++ b/docs/pages/joint/gear-joint.md @@ -10,7 +10,7 @@ might be tedious to author. You also have to be careful to line up the gears so the teeth mesh smoothly. Planck.js has a simpler method of creating gears: the gear joint. -![Gear Joint](/images/gear_joint.gif) +![Gear Joint](/planck.js/docs/images/gear_joint.gif) The gear joint can only connect revolute and/or prismatic joints. diff --git a/docs/pages/joint/prismatic-joint.md b/docs/pages/joint/prismatic-joint.md index 3c7bd5f2..bec3fbcf 100644 --- a/docs/pages/joint/prismatic-joint.md +++ b/docs/pages/joint/prismatic-joint.md @@ -7,7 +7,7 @@ A prismatic joint allows for relative translation of two bodies along a specified axis. A prismatic joint prevents relative rotation. Therefore, a prismatic joint has a single degree of freedom. -![Prismatic Joint](/images/prismatic_joint.gif) +![Prismatic Joint](/planck.js/docs/images/prismatic_joint.gif) The prismatic joint definition is similar to the revolute joint description; just substitute translation for angle, and force for torque. diff --git a/docs/pages/joint/pulley.md b/docs/pages/joint/pulley.md index c4ea0476..3005586d 100644 --- a/docs/pages/joint/pulley.md +++ b/docs/pages/joint/pulley.md @@ -25,7 +25,7 @@ For example, if the ratio is 2, then `length1` will vary at twice the rate of `length2`. Also the force in the rope attached to `body1` will have half the constraint force as the rope attached to `body2`. -![Pulley Joint](/images/pulley_joint.gif) +![Pulley Joint](/planck.js/docs/images/pulley_joint.gif) Pulleys can be troublesome when one side is fully extended. The rope on the other side will have zero length. At this point the constraint diff --git a/docs/pages/joint/revolute-joint.md b/docs/pages/joint/revolute-joint.md index 8e3984f7..7bd105a2 100644 --- a/docs/pages/joint/revolute-joint.md +++ b/docs/pages/joint/revolute-joint.md @@ -7,7 +7,7 @@ A revolute joint forces two bodies to share a common anchor point, often called a hinge point. The revolute joint has a single degree of freedom: the relative rotation of the two bodies. This is called the joint angle. -![Revolute Joint](/images/revolute_joint.gif) +![Revolute Joint](/planck.js/docs/images/revolute_joint.gif) To specify a revolute you need to provide two bodies and a single anchor point in world space. The initialization function assumes that the diff --git a/docs/pages/joint/wheel-joint.md b/docs/pages/joint/wheel-joint.md index 28d0f711..888fe6ae 100644 --- a/docs/pages/joint/wheel-joint.md +++ b/docs/pages/joint/wheel-joint.md @@ -7,4 +7,4 @@ The wheel joint restricts a point on bodyB to a line on bodyA. The wheel joint also provides a suspension spring. See WheelJoint.js and Car.js for details. -![Wheel Joint](/images/wheel_joint.svg) \ No newline at end of file +![Wheel Joint](/planck.js/docs/images/wheel_joint.svg) \ No newline at end of file diff --git a/docs/pages/rendering.md b/docs/pages/rendering.md index c128772e..3866c78f 100644 --- a/docs/pages/rendering.md +++ b/docs/pages/rendering.md @@ -2,7 +2,7 @@ showOutline: false --- -### Rendering +## Rendering Planck.js is a physics engine and it can be used with any graphics library or ui framework for rendering. diff --git a/docs/pages/run-your-code.md b/docs/pages/run-your-code.md new file mode 100644 index 00000000..dd64fff1 --- /dev/null +++ b/docs/pages/run-your-code.md @@ -0,0 +1,14 @@ +--- +showOutline: false +--- + +## Run Your Code + +Planck.js is a physics simulation library, and it doesn't draw anything. + +[Piqnt](https://piqnt.com/) is an online playground for Planck.js. You can explore [examples](https://piqnt.com/planck.js/), inspect and edit them, or create new ones. + +[Testbed](./testbed) is a simple tool (included in the project repository) to visualize and interact with physics simulation. Testbed is compatible with Piqnt playground. + +You can use Planck.js with any game engines or frameworks, or use an existing integrations. See [Simulation](./world/simulation) and [Rendering](./rendering) page for more information. + diff --git a/docs/pages/shape/chain.md b/docs/pages/shape/chain.md index e65a0a02..363c213e 100644 --- a/docs/pages/shape/chain.md +++ b/docs/pages/shape/chain.md @@ -8,7 +8,7 @@ The chain shape provides an efficient way to connect many edges together to construct your static game worlds. Chain shapes automatically eliminate ghost collisions and provide two-sided collision. -![Chain Shape](/images/chain_shape.svg) +![Chain Shape](/planck.js/docs/images/chain_shape.svg) ```js // This is a chain shape with isolated vertices @@ -44,7 +44,7 @@ might not. The code that prevents ghost collisions assumes there are no self-intersections of the chain. Also, very close vertices can cause problems. Make sure all your edges are longer than Settings.linearSlop (5mm). -![Self Intersection](/images/self_intersect.svg) +![Self Intersection](/planck.js/docs/images/self_intersect.svg) Each edge in the chain is treated as a child shape and can be accessed by index. When a chain shape is connected to a body, each edge gets its diff --git a/docs/pages/shape/edge.md b/docs/pages/shape/edge.md index 414ef613..7dae0683 100644 --- a/docs/pages/shape/edge.md +++ b/docs/pages/shape/edge.md @@ -22,7 +22,7 @@ see a box colliding with an internal vertex. These *ghost* collisions are caused when the polygon collides with an internal vertex generating an internal collision normal. -![Ghost Collision](/images/ghost_collision.svg) +![Ghost Collision](/planck.js/docs/images/ghost_collision.svg) If edge1 did not exist this collision would seem fine. With edge1 present, the internal collision seems like a bug. But normally when @@ -32,7 +32,7 @@ Fortunately, the edge shape provides a mechanism for eliminating ghost collisions by storing the adjacent *ghost* vertices. Planck.js uses these ghost vertices to prevent internal collisions. -![Ghost Vertices](/images/ghost_vertices.svg) +![Ghost Vertices](/planck.js/docs/images/ghost_vertices.svg) ```js // This is an edge shape with ghost vertices. diff --git a/docs/pages/shape/polygon.md b/docs/pages/shape/polygon.md index 166103cd..e6aba2fc 100644 --- a/docs/pages/shape/polygon.md +++ b/docs/pages/shape/polygon.md @@ -8,7 +8,7 @@ line segments connecting two points in the interior do not cross any edge of the polygon. Polygons are solid and never hollow. A polygon must have 3 or more vertices. -![Convex and Concave Polygons](/images/convex_concave.gif) +![Convex and Concave Polygons](/planck.js/docs/images/convex_concave.gif) Polygon vertices are stored with a counter-clockwise winding (CCW). We must be careful because the notion of CCW is with respect to a @@ -16,7 +16,7 @@ right-handed coordinate system with the z-axis pointing out of the plane. This might turn out to be clockwise on your screen, depending on your coordinate system conventions. -![Polygon Winding Order](/images/winding.svg) +![Polygon Winding Order](/planck.js/docs/images/winding.svg) The initialization functions create normal vectors and perform validation. So you should use initialization functions to create a polygon. @@ -55,10 +55,10 @@ the polygon. The skin is used in stacking scenarios to keep polygons slightly separated. This allows continuous collision to work against the core polygon. -![Polygon Skin](/images/skinned_polygon.svg) +![Polygon Skin](/planck.js/docs/images/skinned_polygon.svg) The polygon skin helps prevent tunneling by keeping the polygons separated. This results in small gaps between the shapes. Your visual representation can be larger than the polygon to hide any gaps. -![Skin Collision](/images/skin_collision.svg) +![Skin Collision](/planck.js/docs/images/skin_collision.svg) diff --git a/docs/styles.css b/docs/styles.css index 0a7fc494..2e5e4710 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -12,3 +12,31 @@ p img { font-weight: var(--vocs-fontWeight_medium); color: var(--vocs-color_text3); } + +.vocs_Sidebar_section { + border-bottom: none !important; + border-top: none !important; +} + +.vocs_Sidebar_level { + padding-top: 0px; + padding-bottom: 0px; +} + +.vocs_Sidebar_level .vocs_Sidebar_sectionHeader { + padding-top: 0px; + padding-bottom: 0px; +} + +.vocs_Sidebar_level .vocs_Sidebar_items { + padding-left: 12px; +} + +.vocs_Sidebar_items { + padding-top: var(--vocs-space_4) !important; + padding-bottom: var(--vocs-space_4) !important; +} + +.vocs_Sidebar_group { + padding-top: var(--vocs-space_12); +} diff --git a/docs/vocs.config.ts b/docs/vocs.config.ts index 08fb1a95..30715495 100644 --- a/docs/vocs.config.ts +++ b/docs/vocs.config.ts @@ -11,14 +11,15 @@ export default defineConfig({ { text: 'Discord', link: 'https://discord.gg/znjh6J7'}, ], sidebar: [ + { link: "/", text: "Introduction" }, { - text: 'Getting Started', + text: 'Get Started', collapsed: true, items: [ - { link: "/", text: "Introduction" }, - { link: "/install", text: "Install" }, + { link: "/run-your-code", text: "Run Your Code" }, { link: "/hello-world", text: "Hello World" }, { link: "/core-concepts", text: "Core Concepts" }, + { link: "/install", text: "Install" }, ], },