p5js mousePressed on a 2D grid

Question

So in the p5js editor, I am trying to visualize a 2d array using squares. I want a square to change color via mousPressed() depending on the coordinates of the mouse in relation to the square. I am getting color changes but the square I click isn't the one that changes.

I am logging the node that I am clicking, and it seems like it is correct, but the visualization of the 2d array seems wrong.

I have a 3x3 grid of square x's such that:

x x x

I expect when I click the top left then top middle, it would change color to blue such that

o o x

x x x

But when I click the top left then the top middle, i get

x o o

x x x

it seems the square that I click changes the square next to it, rather than the one I expect.

example in 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&&mouseXy1&&mouseY< y2)){
      console.log(this)
      this.fill = 'black'
    }
  }
 
  this.show = function(){
    rect(i*20,j*20,20,20)
    fill(this.fill)
    stroke('blue')
  }
}

user_5577765 · Answer

You do not draw the quads at the correct position. The position of the quads is (this.x, this.y) rather than (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)
    }
}

Example:

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

p5js mousePressed on a 2D grid

1 Answers