# Constricting shape movement in p5js

**URL:** <https://discourse.processing.org/t/constricting-shape-movement-in-p5js/35361>\
**Category:** Coding Questions\
**Created:** [February 21, 2022, 4:21pm UTC](https://discourse.processing.org/t/constricting-shape-movement-in-p5js/35361 "2022-02-21T16:21:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rorywilliams](https://avatars.discourse-cdn.com/v4/letter/r/bc8723/32.png) [@rorywilliams](https://discourse.processing.org/u/rorywilliams)\
**Post date:** [February 21, 2022, 4:21pm UTC](https://discourse.processing.org/t/constricting-shape-movement-in-p5js/35361/1 "2022-02-21T16:21:27Z")

</div>

Hi, I’m a beginner with p5js and I’ve run into some trouble with some code I’m writing. I have three circles of decreasing size, with the smallest and middle circles mapped to mouseX and mouseY. My issue is that I want to make it so that the smallest circle cannot move outside the boundaries of the middle circle, while the middle circle cannot move outside the boundaries of the largest circle, the position of which is fixed. How do I do this?

---

<div class="post-metadata">

**Author:** ![nicolaskellum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolaskellum/32/15860_2.png) [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)\
**Post date:** [March 8, 2022, 9:41pm UTC](https://discourse.processing.org/t/constricting-shape-movement-in-p5js/35361/2 "2022-03-08T21:41:39Z")

</div>

Hey,

I think the `constrain()` function is what you are looking for:

> **[reference | p5.js](https://p5js.org/reference/#/p5/constrain)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.