While Loop and rotations. Is there a way to keep it within in the boundaries?

Question

I am using a while loop, rotate and translate in order to get the effect I want for my program. I want to be able to contain the loop within the boundaries of the sketch. Can anyone explain to me how that can be done, please?

Here is the code:

   float x, y, r, g, b, radius;

    void setup()
    {
      size(800, 700);
      smooth();
      frameRate(15);
    }

void draw()
{
  handleRedBox();
}

void handleRedBox() {
  background(255);
  stroke(255, 0, 0);
  color from = color(100, random(255), 2);
  color to = color(0, 200, 0);
  color interA = lerpColor (to, from, .44);
  int x = 100;
  while (x < width/2 || x> width/2 ) {
    int y = 100;
    while (y <height/2 || y > height/2) {
      blendMode(DIFFERENCE);
      noStroke();
      fill(interA);
      quadstuff(); 
      strokeWeight(5);
      stroke(0, random(255), 0);
      line(width/2, height/2, mouseY, mouseX);
      translate(width, height);
      rotate(radians(frameCount));
      y = y + 50;
    }
    x = x + 50;
  }
  ghostcirc();
  ghostcirc2();
}

void ghostcirc() {
  int w = 0;
  while (w < width) {
    int q = 0;
    while (q <height) {
      blendMode(ADD);
      fill(random(61), random(90), random(250));
      ellipse(255, 255, 100, 100);
      ; 
      noStroke();
      translate(width, height);
      rotate(radians(frameCount));
      q = q + 100;
    }
    w = w + 50;
  }
}

void ghostcirc2() {
  for (int w= 0; w < width; w+=10) {    
    blendMode(ADD);
    fill(random(61), random(90), random(250));
    ellipse(50, 50, 75, 75);
    ; 
    noStroke();
    translate(width, height);
    rotate(radians(frameCount));
    //if (keyPressed == true){
    //    fill(random(100), random(90), random(250));
  }
}

void quadstuff() {
  int rad = 60;      // Width of the shape
  float xpos, ypos;    // Starting position of shape    

  float xspeed = 2.8;  // Speed of the shape
  float yspeed = 2.2;  // Speed of the shape

  xpos = width/2;
  ypos = height/2; 
  //ellipse(mouseX+x, mouseY+y, 100,100);
  quad(xpos, ypos, rad, rad, mouseX+rad, mouseY+rad, xspeed, yspeed);
  stroke(0);
  strokeWeight(5);
}

Answer 1

Your question is still pretty broad, and that's still a lot of code to try to debug. But I appreciate that you went through the trouble of narrowing it down, so I'm going to try to help in general terms.

Your code involves a lot of stuff that I don't really understand, so I'm going to start with a simpler example. Honestly you might be better off doing the same- start over with something more basic, and add the bounding logic from the beginning. That's going to be much easier than trying to add it in after you've already written everything.

So, there are two main ways to do this type of animation in Processing. I'll cover both.

Option 1: Rely on translate() and rotate() to position stuff for you.

This is what your code does. Here is a simpler example that shows an ellipse rotating around the mouse position:

float angle = 0;

void setup() {
  size(500, 500);
}

void draw() {

  angle+=.1;

  background(0);
  translate(mouseX, mouseY);
  rotate(angle);
  translate(100, 0);

  ellipse(0, 0, 50, 50);
}

Now, if you want to bound the ellipse to stay inside the window, first you need to determine where the ellipse will be on the screen. This could be complicated since we're using the translate() and rotate() functions, which are a little like moving the camera instead of moving the ellipse- the ellipse "thinks" it's still at position 0,0. So we need to get the position of the ellipse after we move the camera. Luckily Processing gives us the screenX() and screenY() functions:

float screenX = screenX(0, 0);
float screenY = screenY(0, 0);

This will tell us where on the screen the ellipse will be drawn (or more accurately, where position 0,0 will be after the transforms are applied). We can use this to check whether these go outside the bounds of the window, and then do whatever bounding you want.

Exactly what type of bounding you do depends on what you want to happen. You could wrap the animation around the screen so that when it goes off the right side it reappears on the left side. You could limit the positions so they only go to the border of the window instead of moving past it. Here is that:

float angle = 0;

void setup() {
  size(500, 500);
}

void draw() {

  angle+=.1;

  background(0);
  translate(mouseX, mouseY);
  rotate(angle);
  translate(100, 0);

  float screenX = screenX(0, 0);
  float screenY = screenY(0, 0);

  if (screenX < 25) {
    rotate(-angle);
    translate(25-screenX, 0); 
    rotate(angle);
  } else if (screenX > 475) {
    rotate(-angle);
    translate(475-screenX, 0); 
    rotate(angle);
  }

  if (screenY < 25) {
    rotate(-angle);
    translate(0, 25-screenY);
    rotate(angle);
  } else if (screenY > 475) {
    rotate(-angle);
    translate(0, 475-screenY);
    rotate(angle);
  }

  ellipse(0, 0, 50, 50);
}

This code is the same as above, except now it uses screenX() and screenY() to determine when the ellipse will be off the screen, and then uses translate() to move it back inside the bounds of the screen.

Option 2: Keep track of the position yourself.

Instead of relying on translate() and rotate() to do the positioning for you, you could also just use some basic algebra and trig to do the positioning yourself.

Here is the simple program, without bounding yet:

float angle = 0;

void setup() {
  size(500, 500);
}

void draw() {

  angle+=.1;

  background(0);

  float circleX = mouseX + cos(angle)*100;
  float circleY = mouseY + sin(angle)*100;

  ellipse(circleX, circleY, 50, 50);
}

Notice that I'm calculating the position of the ellipse myself instead of relying on translate() and rotate(). Now it might be easier to think about exactly where the circle will be, so I can do the bounding:

float angle = 0;

void setup() {
  size(500, 500);
}

void draw() {

  angle+=.1;

  background(0);

  float circleX = mouseX + cos(angle)*100;
  float circleY = mouseY + sin(angle)*100;

  if (circleX < 25) {
    circleX = 25;
  } else if (circleX > 475) {
    circleX = 475;
  }

  if (circleY < 25) {
    circleY = 25;
  } else if (circleY > 475) {
    circleY = 475;
  }

  ellipse(circleX, circleY, 50, 50);
}

This might be a little easier to think about, since you can work with the screen coordinates directly. Both options do the same thing, they're just different ways of thinking about it.

From here it's just a matter of defining exactly how your bounding should work. I've given you one example, but you could do anything you want.

You might also want to restrict your input variables (in my case, mouseX and mouseY) so the animation never leaves the window. Adding this at the top of the draw() function of either one of the above options will prevent the animation from leaving the screen:

  if (mouseX < 150) {
    mouseX = 150;
  } else if (mouseX > 350) {
    mouseX = 350;
  }

  if (mouseY < 150) {
    mouseY = 150;
  } else if (mouseY > 350) {
    mouseY = 350;
  }

Again, how you do this is really up to you and what you want to happen. It will probably be easier if you start over with a basic program like mine and then add one small thing at a time instead of trying to add it to your existing huge sketch. Good luck.