Growing and shrinking ellipse

Processing Coding Questions
1

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

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);
  }
}
1 Like
2

Try this:

initial variables:

int radius;
boolean ellipseDiameter = true;
color strokeColor;

draw() method:

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:

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

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

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. :slightly_smiling_face:

3 Likes
4

@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?

1 Like
5

Haha. Your right. :sweat_smile:
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. :slight_smile: I could have responded in a more helpful way!

3 Likes
6

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!!

7

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! :laughing:

1 Like