# How to wrap with circular motion

**URL:** <https://discourse.processing.org/t/how-to-wrap-with-circular-motion/23906>\
**Category:** Coding Questions\
**Created:** [September 17, 2020, 12:37am UTC](https://discourse.processing.org/t/how-to-wrap-with-circular-motion/23906 "2020-09-17T00:37:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lkalotihos](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@lkalotihos](https://discourse.processing.org/u/lkalotihos)\
**Post date:** [September 17, 2020, 12:37am UTC](https://discourse.processing.org/t/how-to-wrap-with-circular-motion/23906/1 "2020-09-17T00:37:56Z")

</div>

Hi there,

I’m trying to get this circular motion to bound off the border of my container (wrap I think) how would I go about that?

Thanks,  
Lena

```auto
float x;
float y;
float x1;
float y1;
float x2;
float y2;
//float = decimal number
float angle;
float axis_x;
float axis_y;
float radius;

float speed_x;
float direction_x;

float speed_y;
float direction_y;

void setup(){
  size(600,600);
  background(255);
  
  axis_x = 10;
  axis_y = 10;
  
  angle = 0.01;
  
  x = 0;
  y = 0;
  
  x1 = 0;
  y1 = 0;
  x2 = 0;
  y2 = 0;
  
  frameRate(120);
  
}

void update(){
  
  angle = angle + .1;
  
  //add slope (linear motion) = compound motion
  x2 = x2 + 1;
  y2 = y2 * 1; 
 

}

void draw(){
  
  //background (255);
  update();
  
 radius = (x1 + 1);
 radius = (x2 + 1);
 radius = (y1 + 1);
 radius = (y2 + 1);
 
 //calculation of angles
 x1 = 1 + cos(angle * .01) * 1.5 * TWO_PI;
 y1 = 300 + sin(angle * 20) * 1.5 * TWO_PI;
  
  //calculate x
  x = x1 + x2;
  y = y1 + y2;
  
  //render
  fill(255,0,0);
  noStroke();
  ellipse(x,y,5,5);
  
}

  void keyPressed (){
 if(key == 'x') saveFrame("check_in_05_Lena_####.png"); 
  
}

```

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 17, 2020, 3:37am UTC](https://discourse.processing.org/t/how-to-wrap-with-circular-motion/23906/2 "2020-09-17T03:37:13Z")

</div>

its not very elegant, since controlling the angle to bounce off depends on 2 variables.

however: instead of using an absolute number, use a variable that you change when you reach the edge

```auto
  x2 = x2 + 1;
  y2 = y2 * 1;

```

replace 1 with addX and addY

say something like:

```auto
 if (x>=width) { 
addX *= -1;
}

```

in this case your motion will change 180°

since you are not changing y2 it does not much I guess.

but a next step could be to bounce of at an angle, for which you calculate addX and addY accordingly.

so addX = 1 and addY = 1 will move 45°

and so on…

---

<div class="post-metadata">

**Author:** ![lkalotihos](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@lkalotihos](https://discourse.processing.org/u/lkalotihos)\
**Post date:** [September 17, 2020, 12:54pm UTC](https://discourse.processing.org/t/how-to-wrap-with-circular-motion/23906/3 "2020-09-17T12:54:20Z")

</div>

It doesn’t seem to be working, even though I defined and initialized it. Any idea?

```auto
float x;
float y;
float x1;
float y1;
float x2;
float y2;
//float = decimal number
float angle;
float axis_x;
float axis_y;
float radius;

float speed_x;
float direction_x;

float speed_y;
float direction_y;

float addX;
float addY;

void setup(){
  size(600,600);
  background(255);
  
  axis_x = 10;
  axis_y = 10;
  
  angle = 0.01;
  
  x = 0;
  y = 0;
  
  x1 = 0;
  y1 = 0;
  x2 = 0;
  y2 = 0;
  
  addX = 1;
  addY = 1;
  
  
  frameRate(120);
  
}

void update(){
  
  if (x>=width) addX *= 1;
  if (y>=width) addY *= 1;
  
  angle = angle + .1;
  
  //add slope (linear motion) = compound motion
  
  x2 = x2 + 1;
  y2 = y2 * 1; 
  
}

void draw(){
  
  //background (255);
  update();
  
 radius = (x1 + 1);
 radius = (x2 + 1);
 radius = (y1 + 1);
 radius = (y2 + 1);
 
 //calculation of angles
 x1 = 1 + cos(angle * .01) * 1.5 * TWO_PI;
 y1 = 300 + sin(angle * 20) * 1.5 * TWO_PI;
  

  
  //calculate x
  x = x1 + x2;
  y = y1 + y2;
  
  //render
  fill(255,0,0);
  noStroke();
  ellipse(x,y,5,5);
  
}

```

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 17, 2020, 1:34pm UTC](https://discourse.processing.org/t/how-to-wrap-with-circular-motion/23906/4 "2020-09-17T13:34:31Z")

</div>

yes, but you make no use of it anywhere…

update should look like this:

```auto
 void update(){  
  if (x>=width) addX *= -1; // multiply with -1 -> if addX is 1 it will become -1, if its -1 it will become 1
                             // that way you toggle between two directions
  if (y>=height) addY *= -1; // same here, but y is for height...
  angle = angle + .1;  
  //add slope (linear motion) = compound motion  
  x2 = x2 + addX; // now USE addX instead of a number - so it either grows or shrinks
  y2 = y2 + addY; // same here  
}

```