# Triangle is Moving but is getting Bigger as it moves

**URL:** https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205
**Category:** Coding Questions
**Created:** [September 2, 2018, 8:30pm UTC](https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205 "2018-09-02T20:30:30Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ant](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@ant](https://discourse.processing.org/u/ant)
#### Post date: [September 2, 2018, 8:30pm UTC](https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205/1 "2018-09-02T20:30:30Z")

</div>

I’m having trouble getting my triangle to stop getting bigger as it moves, any suggestions?

```auto
float xa=30;
float ya=75;
float xb=58;
float yb=20;
float xc=86;
float yc=75;
float xSpeed=10;
float ySpeed=10;

void setup(){
  size(800,600);
}

void draw (){
  background (0);
  fill (225,225,225);
  text("Cliking the mouse on the background might slow down the ball",200,20);
  Ball();
}

void Ball(){
  fill(255,0,0);
  triangle (xa,ya,xb,yb,xc,yc); 
  xa=xa+xSpeed;
  if (xa>width || xa<0){
    xSpeed=xSpeed*-1;
  }
  ya=ya+ySpeed;
  if (ya>height || ya<0){
    ySpeed=ySpeed*-1;
  }
  xb=xb+xSpeed;
  if (xb>width || xb<0){
    xSpeed=xSpeed*-1;
  }
  yb=yb+ySpeed;
  if (yb>height || yb<0){
    ySpeed=ySpeed*-1;
  }
      xc=xc+xSpeed;
  if (xc>width || xc<0){
    xSpeed=xSpeed*-1;
  }
  yc=yc+ySpeed;
  if (yc>height || yc<0){
    ySpeed=ySpeed*-1;
  }
}

void mouseReleased() {
  if (.5<random(1)){
    xSpeed=1;
    ySpeed=1;
  }
  else{
    xSpeed=10;
    ySpeed=10;
 }}

```

---

<div class="post-metadata">

### Author: ![EnhancedLoop7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/enhancedloop7/32/1040_2.png) [@EnhancedLoop7](https://discourse.processing.org/u/EnhancedLoop7)
#### Post date: [September 2, 2018, 8:38pm UTC](https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205/2 "2018-09-02T20:38:56Z")

</div>

In essence, this is what you want to do:

```auto
void Ball(){
  fill(255,0,0);
  triangle (xa,ya,xb,yb,xc,yc); 
 //have ALL of your points moving
  xa=xa+xSpeed;
  xb=xb+xSpeed;
  xc=xc+xSpeed;
  ya=ya+ySpeed; 
  yb=yb+ySpeed; 
  yc=yc+ySpeed; 
  
  if (xa>width || xa<0 || xb>width || xb<0 || xc>width || xc<0){ //if ANY of the X values s goes out of bounds, reverse everyone's speed
    xSpeed=xSpeed*-1;
  }
  
  if (ya>height || ya<0 || yb>height || yb<0 || yc>height || yc<0 ){ //if ANY of the Y values s goes out of bounds, reverse everyone's speed
    ySpeed=ySpeed*-1;
  }

}

```

You have all the right code, just the problem is you’re a little too specific. What you want, is that as soon as ANY point of the triangle goes out, to change xSpeed or ySpeed to the opposite direction. And then the triangle won’t grow or stretch. It used to grow, because sometimes some points would be going at an opposite xSpeed, while the rest would keep on going normally.

Hopefully this helps!

EnhancedLoop7

---

<div class="post-metadata">

### Author: ![ant](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@ant](https://discourse.processing.org/u/ant)
#### Post date: [September 2, 2018, 8:42pm UTC](https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205/3 "2018-09-02T20:42:33Z")

</div>

> [@EnhancedLoop7](#):
>
> void Ball(){ fill(255,0,0); triangle (xa,ya,xb,yb,xc,yc); //have ALL of your points moving xa=xa+xSpeed; xb=xb+xSpeed; xc=xc+xSpeed; ya=ya+ySpeed; yb=yb+ySpeed; yc=yc+ySpeed; if (xa\>width || xa\<0 || xb\>width || xb\<0 || xc\>width || xc\<0){ //if ANY of the X values s goes out of bounds, reverse everyone’s speed xSpeed=xSpeed\*-1; } if (ya\>height || ya\<0 || yb\>height || yb\<0 || yc\>height || yc\<0 ){ //if ANY of the Y values s goes out of bounds, reverse everyone’s speed ySpeed=ySpeed\*-1; } }

Thank you very much I see what you mean.

---

<div class="post-metadata">

### Author: ![EnhancedLoop7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/enhancedloop7/32/1040_2.png) [@EnhancedLoop7](https://discourse.processing.org/u/EnhancedLoop7)
#### Post date: [September 2, 2018, 8:43pm UTC](https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205/4 "2018-09-02T20:43:19Z")

</div>

Glad to hear that 😃

EnhancedLoop7

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 3, 2018, 6:02pm UTC](https://discourse.processing.org/t/triangle-is-moving-but-is-getting-bigger-as-it-moves/3205/5 "2018-09-03T18:02:40Z")

</div>

In general – with a triangle, rectangle, or anything else – don’t apply bounce rules to each point individually. This is asking for trouble.

Instead, track the center point of the object, and only move that – then draw the perimeter relative to that center. You can still do bounce checking logic on those perimeter points, but calculate them on the fly from the center – that way you only have one center, and the shape can never distort. (Unless you _want_ it to distort!)
