# Implementing Shiffman Box 2D Library For p5js

**URL:** <https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676>\
**Category:** Libraries\
**Created:** [June 8, 2020, 3:01pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676 "2020-06-08T15:01:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![noah1211](https://avatars.discourse-cdn.com/v4/letter/n/ce7236/32.png) [@noah1211](https://discourse.processing.org/u/noah1211)\
**Post date:** [June 8, 2020, 3:01pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676/1 "2020-06-08T15:01:16Z")

</div>

Hello, I recently watched the nature of code video on the box2d library, and it looks very useful! I am having quite the tough time setting up the library for p5js (I am trying to use shiffman’s library). Is this library: ([https://github.com/shiffman/Box2D-for-Processing](https://github.com/shiffman/Box2D-for-Processing)) not compatible with p5js? I feel like I’m doing something wrong and I would love to be pointed in the right direction.

thanks!  
Noah

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 8, 2020, 3:39pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676/2 "2020-06-08T15:39:13Z")

</div>

That lib is for Processing …

There are some google search results of users implementing it in .js.

At a glance this one seems promising …

> **[p5.js Web Editor](https://editor.p5js.org/djuliette/sketches/kj8mQ2wwM)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

Another option would be to use matter.js.

> **[Matter.js](https://brm.io/matter-js/)**
>
> Matter.js is 2D rigid body physics engine for the web, using JavaScript and HTML5

https://www.youtube.com/embed/videoseries?list=PLRqwX-V7Uu6bLh3T_4wtrmVHOrOEM1ig_&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1

---

<div class="post-metadata">

**Author:** ![noah1211](https://avatars.discourse-cdn.com/v4/letter/n/ce7236/32.png) [@noah1211](https://discourse.processing.org/u/noah1211)\
**Post date:** [June 8, 2020, 4:46pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676/3 "2020-06-08T16:46:44Z")

</div>

Ah matter js looks like a pretty good alternative

Thanks  
Noah

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 8, 2020, 4:52pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676/4 "2020-06-08T16:52:09Z")

</div>

> [@noah1211](#):
>
> Ah matter js looks like a pretty good alternative

Another 1 is Toxic: 🐍

> <https://gist.github.com/GoSubRoutine/f4e383cfc4de8b063df3ee1c3fc66419>
>
> There are more than three files. show original

[![](https://img.youtube.com/vi/jrk_lOg_pVA/hqdefault.jpg "Coding Challenge #20: 3D Cloth with toxiclibs") ](https://www.youtube.com/watch?v=jrk_lOg_pVA)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 8, 2020, 5:18pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676/5 "2020-06-08T17:18:54Z")

</div>

BtW, I also did a Matter.js sketch, but only for canvas bouncing: 🏐

> [@Sketch with classes implementation in a Reactjs project](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358/5):
>
> Well, it took a couple of days for me to learn enough Matter.js in order to change my “Bouncing Colorful Balls” sketch to rely on it instead for all movement & bouncing. The file “sketch.mjs” can pass around both the World & p5 instance references to the files “ball.mjs” & “addCanvasWalls.mjs”! Maybe you can find out a way to adapt the “technique” to your own React.js components. Here’s the complete browser-runnable code: And some extras which run 2 & 4 instances of it in the same page: …

https://glitch.com/embed/#!/embed/matter-js-bouncing-colorful-balls?path=sketches/global.mjs&previewSize=0&sidebarCollapsed=true