# Keeping a moving shape inside an area

**URL:** <https://discourse.processing.org/t/keeping-a-moving-shape-inside-an-area/11819>\
**Category:** Coding Questions\
**Created:** [June 4, 2019, 12:58am UTC](https://discourse.processing.org/t/keeping-a-moving-shape-inside-an-area/11819 "2019-06-04T00:58:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GuilhermeVolker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/guilhermevolker/32/5657_2.png) [@GuilhermeVolker](https://discourse.processing.org/u/GuilhermeVolker)\
**Post date:** [June 4, 2019, 12:58am UTC](https://discourse.processing.org/t/keeping-a-moving-shape-inside-an-area/11819/1 "2019-06-04T00:58:41Z")

</div>

Hello! I’am trying to develop an artificial horizon, an aircraft instrument. I made some code but i dont know how to mantain this shape inside the circle of the instrument (when move the mouse the shapes goes outside the image area). I got stuck on this part, i would like some suggestion to solve this problem 🙃

```auto
PImage img;
float dist;
float a,b,c,d,e,f,g;

  
void setup(){
  size(720,720);
  background(0);
  smooth();
  rectMode(CENTER);
  img = loadImage("horizonteartificial.png");
  
}

void draw(){
  
  fundo();
  img(); 
}
void img(){
  
 float rot = rotacao();
 rotate(-rot);
 translate(-width/2,-height/2);
 image(img, 0, 0, width, height); 
}

void fundo(){
    background(0);
  //calcula as distancias para referenciar no programa
  //distancias no eixo Y
  a = dist(mouseX, 0, mouseX, mouseY); //distance from the top
  b = dist(mouseX, height/2, mouseX, mouseY); //distance from the half of the screem
  c= dist(mouseX, height, mouseX, mouseY); //distance from the botton
  d= dist(mouseX, height-height/4, mouseX, mouseY);   
  e = dist(mouseX, height/4, mouseX, mouseY);         

  //distance on X
  f = dist(0,mouseY,mouseX,mouseY); //distance from the left side
  g = dist(width,mouseY,mouseX,mouseY); //distance from the right side
//=============================

  float rot = rotacao();
  rotate(rot);
  
  //ground
  translate(-width/2,-height/2);
  if(a<=height/2){
    strokeWeight(0);
    fill(#834022);
    arc(width/2,height/2,width,height,0,PI); //ground
    //arc(width/2,height/2-b,width,height+b,0,PI); //ground
    rect(width/2,height/2-b/2,width,b);
    fill(#2D20F5);
    arc(width/2,height/2-b,width,height,PI,2*PI); //sky
  } 
  
  //ceu
  if(a>height/2){
    strokeWeight(0);
    fill(#834022);
    arc(width/2,height/2+b,width,height,0,PI); //ground
    fill(#2D20F5);
    arc(width/2,height/2,width,height,PI,2*PI); //sky
    //arc(width/2,height/2,width,height,PI,2*PI); //sky
    rect(width/2,height/2+b/2,width,b);
  } 

}

float rotacao(){
  translate(width/2,height/2);
  if(f<width/2){
    dist = width-g;
  }else if(f>width/2){
    dist = f;
  }
  float rot = map(dist,width/2,width,0,PI);
  return rot;
}

```

the image i’am using on the code is that one:

![horizonteartificial](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fa4fbd7b29e8aa9d1aee523f32d91d8536c30759.png)  
:

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 4, 2019, 12:55pm UTC](https://discourse.processing.org/t/keeping-a-moving-shape-inside-an-area/11819/2 "2019-06-04T12:55:51Z")

</div>

Hey There!

My suggestion would be is to not allow the shape to be drawn if it’s larger than the image above ( Simple Collision ). Also how about get pictures of the orange and blue ? And use those rather than draw them as shapes.

---

<div class="post-metadata">

**Author:** ![GuilhermeVolker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/guilhermevolker/32/5657_2.png) [@GuilhermeVolker](https://discourse.processing.org/u/GuilhermeVolker)\
**Post date:** [June 4, 2019, 1:21pm UTC](https://discourse.processing.org/t/keeping-a-moving-shape-inside-an-area/11819/3 "2019-06-04T13:21:35Z")

</div>

nice ideia, i’ll try 👍

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 4, 2019, 1:36pm UTC](https://discourse.processing.org/t/keeping-a-moving-shape-inside-an-area/11819/4 "2019-06-04T13:36:48Z")

</div>

> [@GuilhermeVolker](#):
>
> rotate(-rot);  
> translate(-width/2,-height/2);

Swap these lines that are in `void img(){` ? … translate must be first

Chrisir