改变正方形相交区域的颜色

Question

我这几天在做一个项目。我的目标是改变两个正方形相交区域的颜色。我已经编写了检测两个正方形何时相交的代码，但我无法弄清楚如何更改相交区域的颜色。请帮我解决这个问题。

    var sketch = function (p) {
      with(p) {

        let squares = [];
        let dragObject = null; // variable to hold the object being dragged

        p.setup = function() {
          createCanvas(600, 520);
          button1 = createButton("Alpha");
          button2 = createButton("Bravo");
          button3 = createButton("Charlie");
          button4 = createButton("Delta");
          button5 = createButton("Echo");
          button6 = createButton("Foxtrot");
          button7 = createButton("Golf");
          button8 = createButton("Hotel");
          button9 = createButton("India");
          button10 = createButton("Juliet");

          button1.mousePressed(doSomething);
        };
    
        p.draw = function() {

          background(25, 240, 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++) {
              if (i != j && squares[i].collides(squares[j])) {
                squares[i].changecolor();

              }
            }
          }
        };

        p.mousePressed = function () {

          if (this.dragObject == null) {

            //ask every square if they are being "hit"
            for (let i = 0; i < squares.length; i++) {
              let s = squares[i];
              if (s.hitTest()) {
                //if so, set the drag object as this square and return
                this.dragObject = s;
                return;
              }
            }

            //no squares are hit, create a new square.
            let square = new Square(mouseX, mouseY);
            squares.push(square);
          }
        };

        //mouse is released, release the current dragged object if there is one
        p.mouseReleased = function () {
          this.dragObject = null;
        };

        class Square {
          constructor(InitialX, InitialY) {
            this.w = 60;
            this.h = 60;
            this.position = {
              x: InitialX,
              y: InitialY
            };
          }

          //basic test of mouse position against square position and if its inside the rectangle
          hitTest() {
            let x = mouseX - this.position.x;
            let y = mouseY - this.position.y;
            return (x > 0 && x < this.w) && (y > 0 && y < this.h);
          }

          show() {
            fill(50);
            rect(this.position.x, this.position.y, this.w, this.h);
          }

          collides(sqr) {
            if (this.position.x < sqr.position.x + sqr.w &&
              this.position.x + this.w > sqr.position.x &&
              this.position.y < sqr.position.y + sqr.h &&
              this.position.y + this.h > sqr.position.y) {

              return true;
            }
            return false;
          }

          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();
            }
          }
        }

        function doSomething() {
          // fill(230, 170, 90);
          // ellipse(random(600), random(410), 30, 30);
          squares.pop();
        }

     
      }
    };
    
    let node = document.createElement('div');
    window.document.getElementById('p5-container').appendChild(node);
    new p5(sketch, node);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<div id="p5-container"></div>

Answer 1

让我们考虑一下如何表示两个正方形之间的相交区域。当然，其中一种方法就是将其简单地表示为 另一个 矩形，我们只需根据截取区域更改其颜色即可。要绘制一个矩形，我们需要知道左上角的坐标、宽度和高度。因此，挑战在于在我们拖动方块时计算这些。这应该在 draw() 函数中完成。您已经实现了相交检查，剩下的就是计算新矩形的左上角点 (newX, newY)、宽度 (newW) 和高度 (newH)。

为了计算左上角的宽度和高度，我们可以将其添加到我们检查碰撞的块中：

  ...
  //block checking collision
  if (i != j && squares[i].collides(squares[j])) {
    squares[i].changecolor();

    //set intersection color
    fill(50);

    //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
    rect(newX, newY, newW, newH);
  }

结果：

改变正方形相交区域的颜色

Changing color of intersecting area of squares

javascript

processing

p5.js