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

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

Answers

  • 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].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();
    }
    

Sign In or Register to comment.