# Growing and shrinking ellipse

**URL:** https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838
**Category:** Coding Questions
**Tags:** homework
**Created:** [May 13, 2020, 5:31pm UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838 "2020-05-13T17:31:57Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Filo96ge](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@Filo96ge](https://discourse.processing.org/u/Filo96ge)
#### Post date: [May 13, 2020, 5:31pm UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/1 "2020-05-13T17:31:57Z")

</div>

Hello! I’m working on a simple exercise but I am stuck, basically my goal is to have an animation of a ellipse growing untill touch the square’s corner and shrinking in the opposite direction untill its diameter is 0 then starts again in a loop.

The second problem is the color releated to the keyboard. I never used this function! I would like to achive a interactive loop animation

```auto
int x;
int y;
int radius;
boolean ellipseDiameter = true;
color strokeColor; 

void setup() {
  colorMode (RGB);
  smooth();
  background(0);
  size (500, 500);
}

void draw () {
  translate(width/2, height/2);

  if (ellipseDiameter) {
    strokeColor();
    ellipse(x, y, radius, radius);
    radius=radius+10;
  } else {
    radius=radius-10;
  }
}

void strokeColor () {

  if ( key == '1') { 
    fill (0);
    background (255);
  }

  if ( key == '2') { 
    fill (255, 0, 0);
    background (0, 255, 0);
  }
}

```

---

<div class="post-metadata">

### Author: ![Java.SourceForger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/java.sourceforger/32/9831_2.png) [@Java.SourceForger](https://discourse.processing.org/u/Java.SourceForger)
#### Post date: [May 13, 2020, 11:25pm UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/2 "2020-05-13T23:25:21Z")

</div>

Try this:

initial variables:

```auto
int radius;
boolean ellipseDiameter = true;
color strokeColor;

```

`draw()` method:

```auto
void draw () {
  if (ellipseDiameter) radius=radius+10;
  else radius=radius-10;

  strokeColor();
  ellipse(width/2, height/2, radius, radius);

  if (radius >= width || radius <= 0) ellipseDiameter = !ellipseDiameter;
}

```

`strokeColor()` method:

```auto
void strokeColor () {
  if ( key == '1') {
    fill (0);
    background (255);
  } else if ( key == '2') {
    fill (255, 0, 0);
    background (0, 255, 0);
  } else background(0);
}

```

---

<div class="post-metadata">

### Author: ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [May 14, 2020, 12:11am UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/3 "2020-05-14T00:11:01Z")

</div>

Hello @Java.SourceForger and welcome to the forum!

If you haven’t already, please take a moment to read the forum’s guidelines regarding homework questions – asking for and offering help.

[https://discourse.processing.org/faq#homework](https://discourse.processing.org/faq#homework)

While providing full code solutions could be viewed as helpful, it denies the student the experience of working through a problem as well as the satisfaction of arriving at a solution on their own. 🙂

---

<div class="post-metadata">

### Author: ![Filo96ge](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@Filo96ge](https://discourse.processing.org/u/Filo96ge)
#### Post date: [May 14, 2020, 8:01am UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/4 "2020-05-14T08:01:53Z")

</div>

@Java.SourceForger Thank you so much!!  
This part:

if (radius \>= width || radius \<= 0) ellipseDiameter = !ellipseDiameter;

is the core of the loop animation but I can’t figure out why it is important the" radius Less than or equal to 0" for the !ellipseDiameter. Because if radius is greater of width it must come back, right, but why less to 0?

---

<div class="post-metadata">

### Author: ![Java.SourceForger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/java.sourceforger/32/9831_2.png) [@Java.SourceForger](https://discourse.processing.org/u/Java.SourceForger)
#### Post date: [May 14, 2020, 4:44pm UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/5 "2020-05-14T16:44:13Z")

</div>

Haha. Your right. 😅  
The `<=` doesn’t really matter, As long as you are iterating over the same number.

I just used the `<` just to play it safe. But I am pretty sure its not needed.

And, sorry about that, debxyz. 🙂 I could have responded in a more helpful way!

---

<div class="post-metadata">

### Author: ![Filo96ge](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@Filo96ge](https://discourse.processing.org/u/Filo96ge)
#### Post date: [May 14, 2020, 7:50pm UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/6 "2020-05-14T19:50:39Z")

</div>

I tried to delete the \<=0 and something wired happens. Basically the ball grows one time, it reachs the width, then it comes back but when arrives at 0 it grows again to infinite!! So the \<=0 number makes the loop closed!!

---

<div class="post-metadata">

### Author: ![Java.SourceForger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/java.sourceforger/32/9831_2.png) [@Java.SourceForger](https://discourse.processing.org/u/Java.SourceForger)
#### Post date: [May 15, 2020, 4:38am UTC](https://discourse.processing.org/t/growing-and-shrinking-ellipse/20838/7 "2020-05-15T04:38:08Z")

</div>

I would assume that would mean that as the ball is shrinking, the number never actually hits 0. So the radius then becomes negative and grows likewise…

Haha. better safe than sorry, right! 😆
