P5js How to rotate an object about its center?

codedanddied

I have this pretty Grid object. It can create the infinite set of black-and-white grid visuals. You can even move it with your mouse or keys if you call those functions on the object in draw().

function Grid(xStart, yStart, vN, hN, vW, hW, vS, hS) {
    this.x = xStart;
    this.y = yStart;
    this.vertNum = vN;
    this.horizNum = hN;
    this.vertSpace = vS;
    this.horizSpace = hS;
    this.vertWidth = vW;
    this.horizWidth = hW;
    this.gridWidth = (vN - 1) * (vW + vS);
    this.gridHeight = (hN - 1) * (hW + hS);

    this.middleX = this.x + this.gridWidth / 2;
    this.middleY = this.y + this.gridHeight / 2;
    this.underneath = this.gridHeight + 10;
    //this.angleRotated = 0;

    this.moveWithMouse = function() {
        this.x = mouseX - this.middleX;
        this.y = mouseY - this.underneath;
    }

    this.moveWithArrowKeys = function() {
        if (keyIsDown(LEFT_ARROW)) this.x -= 1;
        if (keyIsDown(RIGHT_ARROW)) this.x += 1;
        if (keyIsDown(UP_ARROW)) this.y -= 1;
        if (keyIsDown(DOWN_ARROW)) this.y += 1;
    }

    this.rotation = function() {
        if (keyIsDown(188)) {
             // If comma key, rotate me counterclockwise!!!
        }
        if (keyIsDown(190)) {
            // If period key, rotate me clockwise!!!
        }
    }

    this.display = function() {
        noStroke();
        this.drawVerticals();
        this.drawHorizontals();
    }

    this.drawVerticals = function() {
        // fill(0, 200);
        for (var ix = 0; ix < this.vertNum; ix++) {
            rect(this.x + (ix * (this.vertSpace + this.vertWidth)), this.y, this.vertWidth, this.gridHeight + this.horizWidth);
        }
    }

    this.drawHorizontals = function() {
        // fill(0, 50);
        for (var iy = 0; iy < this.horizNum; iy++) {
            rect(this.x, this.y + (iy * (this.horizSpace + this.horizWidth)), this.gridWidth + this.vertWidth, this.horizWidth);
        }
    }
}
function draw() {
    background(255);
    stroke(0);
    fill(0);
    gridObjectName.display();
}

A grid object is instantiated in setup(). I show what I do in draw() above as well.

My question is how can I take this object, which is drawn in default rectMode(CORNER) from starting point (xStart, yStart), and has attributes 'middleX' and 'middleY' (='center'), and rotate it with about its center and most importantly, save that rotation to the object (so it draws correctly rotated every keypress)?

codedanddied

Here's a fun one to initialize: grid = new Grid(0,0,width,height,1,1,1,1);

Move your head back and forth from your canvas. Tripped yet? ;)

codedanddied

The following are the changes I've done in Grid() {} to make rotation saving on each draw possible:

    this.rotateAngle = 0;

    this.rotation = function() {
        if (keyIsDown(188)) {
            this.rotateAngle -= 1;
        } else if (keyIsDown(190)) {
            this.rotateAngle += 1;
        }

    }

    this.display = function() {
        noStroke();
        this.rotation();
        rotate(this.rotateAngle);
        this.drawVerticals();
        this.drawHorizontals();
    }

However it still rotates about the top-left corner. I'm also noticing a new bug:

If I call gridObject.display() and then gridObject.moveWithArrayKeys(), both in draw(), I find that when I rotate the object, so do the native x- and y- axes, so then when I go to move the object with the arrow keys it moves in the direction of the rotated axes. And although I move, the point of rotation does not move with me!!

Essentially I want the point of rotation always to be the center of the grid object, not (0,0) of the canvas. And does rotation just rotate the native canvas / native axes themselves? Rotation is confusing mayne

Gonna watch these videos on transformations by Daniel Shiffman

codedanddied

Accomplished with the following code:

    this.display = function() {
        noStroke();
        this.rotation();
        push();
        translate(this.x + this.middleX, this.y + this.middleY)
        rotate(this.rotateAngle);
        translate(-this.x - this.middleX, -this.y - this.middleY)
        this.drawVerticals();
        this.drawHorizontals();
        pop();
    }

Dan the man!