I have a current code but I need to make the outer squares move, please help

KingSpagooter

// =================================================================
//Variables
StopWatchTimer sw;
float x = 0;
float y = 100;
float speed = 1;
// =================================================================
// Main
void setup() {
  size(700, 560);
  println (millis());
  sw = new StopWatchTimer();
  sw.start();
  rectMode(CENTER);
}
// Draw
void draw () {
  time();
  println(mouseX);
  println(mouseY);
  stroke (153);
  fill (204, 102, 0);
  rect (555, 275, 50, 50);
  rect (345, 475, 50, 50);
  rect (115, 275, 50, 50);
  rect (345, 75, 50, 50);
  frame.setTitle(int(frameRate) + " fps");
  fill (235, 235, 0);
  noStroke();
  rect (mouseX, mouseY, 30, 30);
}
// =================================================================
// Other
void time() {
  background(#C9C9C9);
  fill(#000000);
  textAlign(CENTER);
  text(nf(sw.minute(), 2)+":"+nf(sw.second(), 2), 656, 14);
}
// =================================================
// classes
class StopWatchTimer {
  int startTime = 0, stopTime = 0;
  boolean running = false; 
  void start() {
    startTime = millis();
    running = true;
  }
  void stop() {
    stopTime = millis();
    running = false;
  }
  int getElapsedTime() {
    int elapsed;
    if (running) {
      elapsed = (millis() - startTime);
    } else {
      elapsed = (stopTime - startTime);
    }
    return elapsed;
  }
  int second() {
    return (getElapsedTime() / 1000) % 60;
  }
  int minute() {
    return (getElapsedTime() / (1000*60)) % 60;
  }
}
// ====================================================
//High Rez
void saveHiRes(int scaleFactor) {
  PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, JAVA2D);
  beginRecord(hires);
  hires.scale(scaleFactor);
  draw();
  endRecord();
  hires.save("hires.png");
}
//=======================================================
//collision 
boolean mouseOverRect(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+w && mouseY >= y && mouseY <= y+h);
}
// =====================================================
void move() {
  x = x + speed;
  if (x > width) {
    x = 0;
  }
}
void display() {
  rect(x,y,30,10);
}``

TfGuy44

Lines 23 to 26 are what draw the outer squares:

  rect (555, 275, 50, 50);
  rect (345, 475, 50, 50);
  rect (115, 275, 50, 50);
  rect (345, 75, 50, 50);

As you can see, each one is always drawn at a fixed position. If you want them to move, you need to change where they are drawn! Since you will want to remember where they are, you should probably add some variables that can remember the X and Y position of each square. What values should those variables start with? Once those variables are defined, use them! Where will you change the values stored in them (and thus make the squares move)? When? How?

KingSpagooter

@TFGuy44 Where would I put it is there any fix? I cant find anything

kfrajer

What TfGuy44 is saying is that we need more information. Where do they start? How do they move? Do they move all together in the same direction, different direction, opposite directions, random directions? Does their speed change? Do they stop? What happens when they reach the boundary? You need to describe exactly what you want to do. You have a good title, but no description.

Kf

KingSpagooter

@kfrajer @TfGuy44 I am trying to move the outer squares in a random direction to where you have to dodge the outer squares with the inner square (yellow) making it stop once you're hit, stopping the timer

TfGuy44

Okay. Here are some edits that move the red squares in a random direction.

// =================================================================
//Variables
StopWatchTimer sw;
float x = 0;
float y = 100;
float speed = 1;
RedRectangle[] rrs = new RedRectangle[4];
// =================================================================
// Main
void setup() {
  size(700, 560);
  println (millis());
  sw = new StopWatchTimer();
  sw.start();
  rectMode(CENTER);
  rrs[0] = new RedRectangle(555, 275);
  rrs[1] = new RedRectangle(345, 475);
  rrs[2] = new RedRectangle(115, 275);
  rrs[3] = new RedRectangle(345, 75);
}
// Draw
void draw () {
  time();
  println(mouseX);
  println(mouseY);
  stroke (153);
  fill (204, 102, 0);
  for(int i=0;i<rrs.length;rrs[i++].draw());
  frame.setTitle(int(frameRate) + " fps");
  fill (235, 235, 0);
  noStroke();
  rect (mouseX, mouseY, 30, 30);
}
// =================================================================
// Other
void time() {
  background(#C9C9C9);
  fill(#000000);
  textAlign(CENTER);
  text(nf(sw.minute(), 2)+":"+nf(sw.second(), 2), 656, 14);
}
// =================================================
// classes
class StopWatchTimer {
  int startTime = 0, stopTime = 0;
  boolean running = false; 
  void start() {
    startTime = millis();
    running = true;
  }
  void stop() {
    stopTime = millis();
    running = false;
  }
  int getElapsedTime() {
    int elapsed;
    if (running) {
      elapsed = (millis() - startTime);
    } else {
      elapsed = (stopTime - startTime);
    }
    return elapsed;
  }
  int second() {
    return (getElapsedTime() / 1000) % 60;
  }
  int minute() {
    return (getElapsedTime() / (1000*60)) % 60;
  }
}
// ====================================================
//High Rez
void saveHiRes(int scaleFactor) {
  PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, JAVA2D);
  beginRecord(hires);
  hires.scale(scaleFactor);
  draw();
  endRecord();
  hires.save("hires.png");
}
//=======================================================
//collision 
boolean mouseOverRect(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+w && mouseY >= y && mouseY <= y+h);
}
// =====================================================
void move() {
  x = x + speed;
  if (x > width) {
    x = 0;
  }
}
void display() {
  rect(x,y,30,10);
}

PVector randomDirection = new PVector(random(-2,2),random(-2,2));

class RedRectangle {
  PVector p;
 RedRectangle(float ipx, float ipy){
   p = new PVector(ipx, ipy);
 }
 void draw(){
   p.add(randomDirection);
   rect(p.x, p.y, 20, 20);
 }
}

KingSpagooter

Thanks! that helps alot @TFGuy44 is their a way i can add end of the screen collision and collision with the moving orange squares? Also is their a way to speed them up overtime? Thank you again so much

TfGuy44

Yes. Let's start with the collision. Since this is something that the RedRectangles do, you will need to edit the RedRectangle class. Start by moving the randomized velocity vector (AKA randomDirection) into the class so that each RedRectangle has its own velocity vector.

You can test that you have this working right because each redRectangle will move in a different random direction.

Then, determine what conditions must be true for a RedRectangle to be in a position that would mandate it bounces off the edges of the screen. Don't try to do this for all the edges at once! Do them one at a time. Start with the top edge. What can you say about the position of the RedRectangle when it is at the top edge of the screen? What needs to change at this point? How does it change?

You can test that you have this working right because RedRectangles will bounce off the top edge. Does it work properly? Chances are that it won't - your RedRectangles may sometimes get stuck! You will also need to change the RedRectangle's POSITION when they bounce - set it to the limiting value from your condition!

Now do the same for the left edge. Then the bottom edge. Then the right edge.

Test it again.

What conditions must be true for two RedRectangles to be colliding? How can you check each RedRectangle's position against every other RedRectangle position? Hint: Loops, yo! You may find it helpful to give each RedRectange and ID number, so you aren't comparing a RedRectangle against itself. Again, when a redRectangle collides, how does its velocity change?

Test it again.

With all that taken care of, you can now work on increasing a Redrectangle's speed over time. How does the velocity vector need to change for the speed to increase? For example, say I want the speed to increase by 100% (that is, double) each time draw() runs - how could this be accomplished? You might realize that this speeds them up too fast. Instead of doubling, could you increase their speed each frame by only, say, 1%?

---

This is quite an undertaking. You may need more help along the way. Once you've written some changes to your code and have reached a "test it!" step, feel free to post your code again and describe what is not working. You might also consider looking at the numerous examples of bouncing things that have already been written, as well as the many guides on using Objects properly.

---

KingSpagooter

@TFGuy44 could i change the outside to just one big red square?

TfGuy44

Four of them, one for each edge, sure. But you'd have to simulate them a little differently, and it's not the most straight-forward approach.

koogs

continued here: https://forum.processing.org/two/discussion/23039/i-need-help-with-collision