# How to wrap with circular motion

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

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

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");

}
``````

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

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

say something like:

`````` if (x>=width) {
}
``````

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…

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

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

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(){

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);

}
``````

yes, but you make no use of it anywhere…

update should look like this:

`````` 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
}
``````