#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

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

edited May 2017

That would help me to do the following: click let say btnArr then btnArr 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].mousePressed(firstClick);
}
}
}

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

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

function r1() {
arr.push(arr, arr);
arr = arr.slice(2);

arr.push(arr, arr);
arr = arr.slice(2);
redraw();
}

function r2() {
arr.push(arr, arr);
arr = arr.slice(2);

arr.push(arr, arr);
arr = arr.slice(2);
redraw();
}

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

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

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

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

• ``````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

• edited May 2017

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].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.push(arr, arr);
arr = arr.slice(2);

arr.push(arr, arr);
arr = arr.slice(2);
redraw();
}

function r2() {
arr.push(arr, arr);
arr = arr.slice(2);

arr.push(arr, arr);
arr = arr.slice(2);
redraw();
}

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

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

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

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