How would I get the console to show the position of a button when I click on it p5js?

banana

That would help me to do the following: click let say btnArr[2][0] then btnArr[0][0] then a function will be use. I am trying to do a non-physical puzzle in the shape of a torus aka donut so the surface can be folded into a rectangle. Later I would like to work with a hypertorus. Maybe I should be using vectors but idk... Hope I am making sense. Anyways, I tried doing the button function in line 35:

var arr = [
  [1, 1, 2, 2],
  [1, 1, 2, 2],
  [3, 3, 4, 4],
  [3, 3, 4, 4]
];
var btnsArr = [];

function setup() {
  createCanvas(400, 400);
  background(0);
  noLoop();
}

function draw() {
  btns();
}

function btns() {
  for (var j = 0; j < 4; j++) {
    btnsArr[j] = [];
    for (var i = 0; i < 4; i++) {
      btnsArr[j][i] = createButton(arr[j][i]).position(i * 75 + 60, j * 75 + 60); //60 + 225 + ~50 + 60

      btnsArr[j][i].style('background-color', 'black').style('color', 'blue');
      btnsArr[j][i].style('border', '0px solid black');
      btnsArr[j][i].style('font-size', '32px').style('font-weight', 'bold');
      btnsArr[j][i].style('padding', '5px 15px 5px 15px')
      
      btnsArr[j][i].mousePressed(firstClick);
    }
  }
}

function firstClick() {
  console.log(btnsArr[j][i].x);
}

//----- btns functions [y][x] -----

function r1() {
  arr[0].push(arr[0][0], arr[0][1]);
  arr[0] = arr[0].slice(2);

  arr[3].push(arr[3][0], arr[3][1]);
  arr[3] = arr[3].slice(2);
  redraw();
}

function r2() {
  arr[1].push(arr[1][0], arr[1][1]);
  arr[1] = arr[1].slice(2);

  arr[2].push(arr[2][0], arr[2][1]);
  arr[2] = arr[2].slice(2);
  redraw();
}

function u1() {
  var ln = [];
  var ln2 = [];
  for (var v = 0; v < 4; v++) {
    ln.push(arr[v][0]);
    ln2.push(arr[v][3]);
  }
  ln.push(ln[0], ln[1]);
  ln = ln.slice(2);

  ln2.push(ln2[0], ln2[1]);
  ln2 = ln2.slice(2);
  for (var n = 0; n < 4; n++) {
    arr[n][0] = ln[n];
    arr[n][3] = ln2[n];
  }
  redraw();
}

function u2() {
  var ln = [];
  var ln2 = [];
  for (var v = 0; v < 4; v++) {
    ln.push(arr[v][1]);
    ln2.push(arr[v][2]);
  }
  ln.push(ln[0], ln[1]);
  ln = ln.slice(2);

  ln2.push(ln2[0], ln2[1]);
  ln2 = ln2.slice(2);
  for (var n = 0; n < 4; n++) {
    arr[n][1] = ln[n];
    arr[n][2] = ln2[n];
  }
  redraw();
}

kfrajer

function firstClick() {
  console.log(btnsArr[j][i].x);
}

That shouldn't work... as i and j are not accessible, wrong scope. Your title says you want to access the position of the button? Try this: https://p5js.org/reference/#/p5.Element/position and check the part where no arguments are provided. You still need a way to access your current button. Not totally sure if "this" could be use here as in this.position().

Kf

banana

Thank you very much. I didn't knew about ".position()". I am using "this.x".

If you have any suggestion on how to make my code shorter or whatnot let me know. Here is my code so far:

var arr = [
  [1, 1, 2, 2],
  [1, 1, 2, 2],
  [3, 3, 4, 4],
  [3, 3, 4, 4]
];
var btnsArr = [];

var firstClick = false;
var secondClick = false;

var x, y, x2, y2;

function setup() {
  createCanvas(400, 400);
  background(0);
  noLoop();
}

function draw() {
  btns();
}

function btns() {
  for (var j = 0; j < 4; j++) {
    btnsArr[j] = [];
    for (var i = 0; i < 4; i++) {
      btnsArr[j][i] = createButton(arr[j][i]).position(i * 75 + 60, j * 75 + 60); //60 + 225 + ~50 + 60

      btnsArr[j][i].style('background-color', 'black').style('color', 'blue');
      btnsArr[j][i].style('border', '0px solid black');
      btnsArr[j][i].style('font-size', '32px').style('font-weight', 'bold');
      btnsArr[j][i].style('padding', '5px 15px 5px 15px')

      btnsArr[j][i].mousePressed(clickFunction);
    }
  }
}

function clickFunction() {
  secondClick = firstClick;
  firstClick = !firstClick;
  // console.log('firstClick: ' + firstClick);

  if (firstClick) {
    x = (this.x - 60) / 75;
    y = (this.y - 60) / 75;
  } else {
    x2 = (this.x - 60) / 75;
    y2 = (this.y - 60) / 75; //is there a better way to work with possible clicks?

    if (x === x2 && (x === 0 || x === 3) && abs(y - y2) === 2) {
      u1();
    } else if (x === x2 && (x === 1 || x === 2) && abs(y - y2) === 2) {
      u2();
    } else if (y === y2 && (y === 0 || y === 3) && abs(x - x2) === 2) {
      r1();
    } else if (y === y2 && (y === 1 || y === 2) && abs(x - x2) === 2) {
      r2();
    }
  }
}

//mouse is click in bg to reset clicks? and how to make this shorter ?

//how would undoing a move be possible? scramble? 

//----- btns functions [y][x] -----

function r1() {
  arr[0].push(arr[0][0], arr[0][1]);
  arr[0] = arr[0].slice(2);

  arr[3].push(arr[3][0], arr[3][1]);
  arr[3] = arr[3].slice(2);
  redraw();
}

function r2() {
  arr[1].push(arr[1][0], arr[1][1]);
  arr[1] = arr[1].slice(2);

  arr[2].push(arr[2][0], arr[2][1]);
  arr[2] = arr[2].slice(2);
  redraw();
}

function u1() {
  var ln = [];
  var ln2 = [];
  for (var v = 0; v < 4; v++) {
    ln.push(arr[v][0]);
    ln2.push(arr[v][3]);
  }
  ln.push(ln[0], ln[1]);
  ln = ln.slice(2);

  ln2.push(ln2[0], ln2[1]);
  ln2 = ln2.slice(2);
  for (var n = 0; n < 4; n++) {
    arr[n][0] = ln[n];
    arr[n][3] = ln2[n];
  }
  redraw();
}

function u2() {
  var ln = [];
  var ln2 = [];
  for (var v = 0; v < 4; v++) {
    ln.push(arr[v][1]);
    ln2.push(arr[v][2]);
  }
  ln.push(ln[0], ln[1]);
  ln = ln.slice(2);

  ln2.push(ln2[0], ln2[1]);
  ln2 = ln2.slice(2);
  for (var n = 0; n < 4; n++) {
    arr[n][1] = ln[n];
    arr[n][2] = ln2[n];
  }
  redraw();
}