p5js mousePressed 在二维网格上

Question

所以在 p5js 编辑器中，我尝试使用正方形可视化二维数组。我想要一个正方形根据鼠标相对于正方形的坐标通过 mousPressed() 改变颜色。我的颜色发生了变化，但我点击的方块并没有发生变化。

我正在记录我正在点击的节点，它似乎是正确的，但二维数组的可视化似乎是错误的。

我有一个 3x3 的正方形 x 网格，这样：

xxx

我预计当我点击左上角然后点击中上角时，颜色会变为蓝色，这样

o x

xxx

但是当我点击左上角然后点击中上部时，我得到

xoo

xxx

似乎我点击的方块改变了它旁边的方块，而不是我期望的那个。

p5.editor 中的示例： https://editor.p5js.org/julien24lopez/present/8_vwyHTjRW

let arr = [];
function setup(){
  canvas = createCanvas(200, 200);
  for(var j = 0; j < 3; j++){
    var inArr = [];
    for(var i = 0; i < 3; i++){
          var rect = new Rect(i,j);
      inArr.push(rect);
    }
    arr.push(inArr)  
  }
}

function draw(){
  for(var i = 0; i < arr.length; i++){
    for(var j = 0; j < arr[i].length; j++){
     arr[i][j].show()
    }
  }
}
function mousePressed(){
  arr.forEach(function(e, index){
    e.forEach(function(d,index2){
      arr[index][index2].clicked()
    });
  });
}

function Rect(i,j){
  this.fill = 'red'
  this.i = i;
  this.j = j;
  this.x = i * 20
  this.y = j * 20
 
  this.clicked = function(){
    let x1 = this.x, x2 = x1 + 20,
        y1 = this.y, y2 = y1 + 20;
    
    if((mouseX>x1&&mouseX<x2)&&(mouseY>y1&&mouseY< y2)){
      console.log(this)
      this.fill = 'black'
    }
  }
 
  this.show = function(){
    rect(i*20,j*20,20,20)
    fill(this.fill)
    stroke('blue')
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Answer 1

您没有在正确的位置绘制四边形。四边形的位置是 (this.x, this.y) 而不是 (i*20, j*20):

function Rect(i,j){
    // [...]

    this.show = function(){
        fill(this.fill)
        stroke('blue')

        // rect(i*20,j*20,20,20)
        rect(this.x, this.y, 20, 20)
    }
}

示例：

let arr = [];
function setup(){
    canvas = createCanvas(200, 200);
    for(var j = 0; j < 3; j++){
        var inArr = [];
        for(var i = 0; i < 3; i++){
            var rect = new Rect(i,j);
            inArr.push(rect);
        }
        arr.push(inArr)  
    }
}

function draw(){
    background(255);
    for(var i = 0; i < arr.length; i++){
        for(var j = 0; j < arr[i].length; j++){
            arr[i][j].show()
        }
    }
}
function mousePressed(){
    arr.forEach(function(e, index){
        e.forEach(function(d,index2){
            arr[index][index2].clicked()
        });
    });
}

function Rect(i,j){
    this.fill = 'red'
    this.i = i;
    this.j = j;
    this.x = i * 20
    this.y = j * 20

    this.clicked = function(){
        let x1 = this.x, x2 = x1 + 20,
            y1 = this.y, y2 = y1 + 20;

        if( mouseX > x1 && mouseX < x2 && mouseY > y1 && mouseY < y2){
            console.log(this)
            this.fill = 'black'
        }
    }

    this.show = function(){
        fill(this.fill)
        stroke('blue')
        rect(this.x, this.y, 20, 20)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

p5js mousePressed 在二维网格上

p5js mousePressed on a 2D grid

javascript

processing

p5.js