How to Centre an object in any cell of an 8x8 grid in p5.js framework

Question

This is my code of making a chess game.

let pawn1; //variable for object
var offset = 10;
function setup(){
 createCanvas(600,600); // canvas
 pawn1 = new Pawn(); // pawn1 is a new Pawn object
}

function draw(){
 background(0); //black background
 checkboard();  //to make an 8x8 grid 
 pawn1.show();  //shows pawn1 object on canvas
 drag();        //allows the pawn object to be dragged
}

function Pawn(){
 this.x = 25; // x position of object
 this.y = 25; // y position of object
 this.w = 20; // width of object
 this.h = 20; // height of object

 this.show = function(){
  fill(255); // object is white
  rect(this.x, this.y, this.w, this.h); //object is a rectangle with x,y,w,h variables
 }
}

// grid maker function
function checkboard(){
 for (var x = 0; x < width; x += width / 8) {
  for (var y = 0; y < height; y += height / 8) {
   stroke(255); //grid lines is white
   strokeWeight(1); // lines drawn are 1 units thick
   line(x, 0, x, height); // vertical lines
   line(0, y, width, y); // horizontal lines
  }
 }
}

function drag(){
    // if mouse is clicked down and inside of the dimensions of the object then:
 if(mouseIsPressed){
  if(mouseX > pawn1.x && mouseY > pawn1.y){
   if(mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)){
                //square will move with the mouse pointer 
    pawn1.x = mouseX - offset;
    pawn1.y = mouseY - offset;
   }
  }
 }
}

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

I do not have any idea of how to make sure when the dragged object is dropped, that it will be centered in the cell it has been dropped in. I suppose the code would go in the " drag function " as an else statement but other than that I am stuck. Can anyone help?

Thanks in advance!

score 1 · Accepted Answer · answered Oct 12 '19 at 11:39

Calculate the width and height of a cell. e.g:

var cell_w = width / 8;
var cell_h = height / 8;

I the width and height of a cell is fixed then you can use constant values, too. e.g:

var cell_w = 75;
var cell_h = 75;

Calculate the index of the current cell, be dividing the current mouse position, by the size of a cell and truncating the result by int() . e.g.:

var cell_ix = int(mouseX / cell_w);
var cell_iy = int(mouseY / cell_h);

Calculate the center point of the cell where the mouse is on:

var cell_cx = (cell_ix+0.5) * cell_w;
var cell_cy = (cell_iy+0.5) * cell_h;

Calculate the new position of the object, dependent on the center of the cell and the size of the object:

pawn1.x = cell_cx - pawn1.w/2;
pawn1.y = cell_cy - pawn1.h/2;

You can do that in the mouseReleased() call back. That causes, that the object can be smoothly dragged, but immediately "jumps" to the center of the cell when the mouse is released:

function mouseReleased() {
    if (mouseX > pawn1.x && mouseY > pawn1.y &&
        mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)) {

        var cell_w = width / 8;
        var cell_h = height / 8;

        var cell_ix = int(mouseX / cell_w);
        var cell_iy = int(mouseY / cell_h);

        var cell_cx = (cell_ix+0.5) * cell_w;
        var cell_cy = (cell_iy+0.5) * cell_h;

        pawn1.x = cell_cx - pawn1.w/2;
        pawn1.y = cell_cy - pawn1.h/2;
    }
}

See the example, where I've added the function to your original code:

let pawn1; //variable for object
var offset = 10;
function setup(){
    createCanvas(600,600); // canvas
    pawn1 = new Pawn(); // pawn1 is a new Pawn object
}

function draw(){
    background(0); //black background
    checkboard();  //to make an 8x8 grid    
    pawn1.show();  //shows pawn1 object on canvas
    drag();        //allows the pawn object to be dragged
}

function Pawn(){
    this.x = 25; // x position of object
    this.y = 25; // y position of object
    this.w = 20; // width of object
    this.h = 20; // height of object

    this.show = function(){
        fill(255); // object is white
        rect(this.x, this.y, this.w, this.h); //object is a rectangle with x,y,w,h variables
    }
}

// grid maker function
function checkboard(){
    for (var x = 0; x < width; x += width / 8) {
        for (var y = 0; y < height; y += height / 8) {
            stroke(255); //grid lines is white
            strokeWeight(1); // lines drawn are 1 units thick
            line(x, 0, x, height); // vertical lines
            line(0, y, width, y); // horizontal lines
        }
    }
}

function drag(){
    // if mouse is clicked down and inside of the dimensions of the object then:
    if(mouseIsPressed){
        if(mouseX > pawn1.x && mouseY > pawn1.y){
            if(mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)){
                //square will move with the mouse pointer 
                pawn1.x = mouseX - offset;
                pawn1.y = mouseY - offset;
            }
        }
    }
}

function mouseReleased() {
    if (mouseX > pawn1.x && mouseY > pawn1.y &&
        mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)) {

        var cell_w = width / 8;
        var cell_h = height / 8;
        
        var cell_ix = int(mouseX / cell_w);
        var cell_iy = int(mouseY / cell_h);

        var cell_cx = (cell_ix+0.5) * cell_w;
        var cell_cy = (cell_iy+0.5) * cell_h;

        pawn1.x = cell_cx - pawn1.w/2;
        pawn1.y = cell_cy - pawn1.h/2;
    }
}

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

How to Centre an object in any cell of an 8x8 grid in p5.js framework

1 Answers1