# Interaction between objects and 2D detector?

**URL:** <https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374>\
**Category:** Libraries\
**Created:** [November 7, 2021, 3:04pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374 "2021-11-07T15:04:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [November 7, 2021, 3:04pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374/1 "2021-11-07T15:04:10Z")

</div>

Hi community, I am currently exploring P5js with posenet 2D pose detector. I have currently fiddled around sketched by following objects in the canvas and doing a similar action. I was wondering how can one make some simple interactions. I am , thinking for example to move a rectangular box from one corner of the canvas to another corner using the detected keypoints. I am basically looking for some material to understand how interaction works and if that is even possible.

If any one has explored this and has some theory / example suggestions that would be really helpful.  
Regards  
T

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 8, 2021, 7:47pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374/2 "2021-11-08T19:47:19Z")

</div>

Hi @Timo,

If you want to have 2d physics running in JavaScript with p5js maybe this can help:

> [@Implementing Shiffman Box 2D Library For p5js](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676/2):
>
> That lib is for Processing … There are some google search results of users implementing it in .js. At a glance this one seems promising … [https://editor.p5js.org/djuliette/sketches/kj8mQ2wwM](https://editor.p5js.org/djuliette/sketches/kj8mQ2wwM) Another option would be to use matter.js.

You could setup a collider attached on your posenet detection and make it collide with other objects in the canvas.

---

<div class="post-metadata">

**Author:** ![Timo](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@Timo](https://discourse.processing.org/u/Timo)\
**Post date:** [November 10, 2021, 9:37am UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374/3 "2021-11-10T09:37:19Z")

</div>

Hi @josephh does the sketch work for you . It actually throws me an error. It seems like there is a video tutorial on top of that . I will go through it thanks .

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 11, 2021, 11:06pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374/4 "2021-11-11T23:06:53Z")

</div>

Yeah, that sketch was broken do to some old [editor.p5js.org](http://editor.p5js.org) funkiness. [Here’s a fixed version](https://editor.p5js.org/Kumu-Paul/sketches/KtOjrICBt)

https://preview.p5js.org/Kumu-Paul/embed/KtOjrICBt

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 11, 2021, 11:08pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374/5 "2021-11-11T23:08:33Z")

</div>

However, I would definitely recommend using [Matter.js](https://brm.io/matter-js/) over Box2d. It has better documentation, community support, and is a native JavaScript library instead of a C++ library ported to JavaScript.

---

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [December 28, 2021, 10:30pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374/6 "2021-12-28T22:30:09Z")

</div>

Thanks for the matter js example. Could there be examples of moving objects using detectors (posenet ) movenet perhaps