Multiple intersecting squares

Question

This is in continuation to my previous post here Changing color of intersecting area of squares

I was able to make the intersecting area of the squares change color. The issue was that I wanted multiple intersecting squares and not a single one so I modified the code. Now the problem is that the square is leaving a trail since it is drawing square wherever it moves. And it starts to slow down after a while. How can I overcome this

function draw() {

  background(135,206,250);
  myColour = (255); 

  // if a square is being dragged, update its position
  if (this.dragObject != null) {
    this.dragObject.position.x = mouseX;
    this.dragObject.position.y = mouseY;
  }

  //draw all squares
  for (let i = 0; i < squares.length; i++) {
    let s = squares[i];
    s.show();
  }

  for (let i = 0; i < squares.length; i++) {
    for (let j = i + 1; j < squares.length; j++) {
      //block checking collision
      if (i != j && squares[i].collides(squares[j])) {
        squares[i].changecolor();

        //set intersection color
        fill(myColour);

        //calculate parameters
        newX = Math.max(squares[i].position.x, squares[j].position.x);
        newY = Math.max(squares[i].position.y, squares[j].position.y);

        newW = Math.min(squares[i].position.x + squares[i].w, squares[j].position.x + squares[j].w) - newX;
        newH = Math.min(squares[i].position.y + squares[i].h, squares[j].position.y + squares[j].h) - newY;

        //draw rectangle
        let Osquare = new OverlappingSquares(newX, newY, newW, newH);
        overlappingsquares.push(Osquare);
      }
    }
  }
}

changecolor() {
    // fill(random(255), random(255), random(255));
    // background(200, 255, 100);
    for (let i = 0; i < squares.length; i++) {
      let s = squares[i];
      s.show();

    }
    for (let i = 0; i < overlappingsquares.length; i++) {
      let s = overlappingsquares[i];
      s.show();

    }
  }

//Overlapping sqaures class
class OverlappingSquares {
  constructor(X, Y, W, H) {
    this.w = W;
    this.h = H;
    this.position = {
      x: X,
      y: Y
    };
  }
  show() {
    fill(myColour)
    rect(this.position.x, this.position.y, this.w, this.h);
  }
}

You're creating a **new square** and adding it to your `overlappingsquares` on every loop at `//draw rectangle`. Flush this object and clear the canvas before the next run. — Lewis, Jul 11 '19 at 08:50
Hey I cant understand what you are trying to say. My issue is that I want the new overlapping rectangle to be on the final position when I stop dragging the square and not draw continuously. How can I do that. — Osama Younus, Jul 11 '19 at 08:58
_"clear the canvas before the next run"_ - Since you are drawing every rectangle every time, I'm advising you to [clear your canvas first](https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing). This wipes the canvas clean and allows for new objects to be drawn there - this will get rid of the "trails". — Lewis, Jul 11 '19 at 09:02
You're also creating new squares every time, `new OverlappingSquares(newX, newY, newW, newH);`, meaning that eventually `overlappingsquares` is going to contain a lot of objects. Since you're recreating them all every time you run the loop, you might as well empty the object first so you don't build up thousands of uneeded squares. — Lewis, Jul 11 '19 at 09:03
where exactly in my code should I clear the canvas? and how can I empty the object and where? — Osama Younus, Jul 11 '19 at 10:52
Whenever you draw the overlap, you are drawing a new overlapping square and adding it to your list of overlapping squares. You are then showing these squares, and this is what results in the trail effect. This is not a case of simply clearing the canvas. The `draw()` function operates 60 times per second in a loop - therefore, whenever you are overlapping, you are drawing and adding to your list 60 squares per second. You end up with a huge amount of squares in your overlapping squares collection - this obviously slows the system down. — vs97, Jul 11 '19 at 16:47
@vs97 what is the way around it. I want to add only the overlapping square of the final position in the list. How can I overcome this trailing problem — Osama Younus, Jul 12 '19 at 12:03
@vs97 That's pretty much what I was trying to get at with the array they're pushing to - but we keep answering them and getting the same question back. — Lewis, Jul 12 '19 at 13:41

Multiple intersecting squares

0 Answers0