改变正方形相交区域的颜色 [英] Changing color of intersecting area of squares

问题描述

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

I am working on a project these days. My goal is to change the color of the intersecting areas of the two squares. I have written the code which detects whenever two squares intersect but I cant figure out how to change the color of the intersecting area. Kindly help me with this.

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

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

function draw() {

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

      }
    }
  }
}

function mousePressed() {

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

推荐答案

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

Lets think a bit how we could represent the intersecting area between two squares. Surely, one of the ways to do is simply to represent it as another rectangle, whose color we simply change based on the intercepting area. To draw a rectangle, we need to know the coordinates of the upper left corner, the width and the height. Therefore the challenge is to calculate those as we drag our squares around. This should be done in the draw() function. You already have the intersection check implemented, whats left is to calculate the new rectangle upper left point (newX, newY), width (newW) and height (newH).

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

In order to calculate the upper left corner, the width and height, we can add this to the block where we check for collision:

  ...
  //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);
  }

结果:

这篇关于改变正方形相交区域的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！