How do I rotate an object in p5js? - p5.js

Question

I'm currently making a project similar to John Conway's Game of Life, and I would like to know how to rotate a point without using rotate().
When I use it it rotates it around the canvas, its difficult to explain here's the code:
//Setup
var x;
var y;
var x2;
var y2;
var x3;
var y3;
let slider;
function setup() {
//Setup and Varibles
createCanvas(400, 400);
x = 200;
y = 200;
x2 = 150;
y2 = 100;
x3 = 300;
y3 = 220;
slider = createSlider(0, 255, 100);
slider.position(10, 10);
slider.style("width", "80px");
}
function draw() {
let val = slider.value();
background(54);
stroke(255);
strokeWeight(1);
line(x, y, x + 30, y - 10);
strokeWeight(10);
point(x, y);
var r = ceil(random(5));
//Player 1 AI
switch (r) {
case 0:
x = x + 2;
break;
case 1:
x = x - 2;
break;
case 2:
y = y + 2;
break;
case 3:
y = y - 2;
break;
case 4:
//EXTRA
break;
}
point(x2, y2);
var ra = floor(random(5));
//Player 2 AI
switch (ra) {
case 0:
x2 = x2 + 2;
break;
case 1:
x2 = x2 - 2;
break;
case 2:
y2 = y2 + 2;
break;
case 3:
y2 = y2 - 2;
break;
case 4:
//EXTRA
break;
}
//Player 3 AI
var ran = ceil(random(5));
point(x3, y3);
switch (ran) {
case 0:
x3 = x3 + 2;
break;
case 1:
x3 = x3 - 2;
break;
case 2:
y3 = y3 + 2;
break;
case 3:
y3 = y3 - 2;
break;
case 4:
//EXTRA
break;
}
//Collision detection between Players
var d = int(dist(x2, y2, x, y));
var d2 = int(dist(x3, y3, x, y));
var d3 = int(dist(x2, y2, x3, y3));
function reset() {
x = 200;
y = 200;
x2 = 150;
y2 = 100;
x3 = 300;
y3 = 220;
}
noStroke();
text("1", x - 3, y - 5);
text("2", x2 - 3, y2 - 5);
text("3", x3 - 3, y3 - 5);
if (d === 10) {
reset();
}
if (d2 === 10) {
reset();
}
if (d3 === 10) {
reset();
}
//Barriers
if (y === 0) {
reset();
}
if (y2 === 0) {
reset();
}
if (y3 === 0) {
reset();
}
if (y === 400) {
reset();
}
if (y2 === 400) {
reset();
}
if (y3 === 400) {
reset();
}
if (x === 400) {
reset();
}
if (x2 === 400) {
reset();
}
if (x3 === 400) {
reset();
}
if (x === 0) {
reset();
}
if (x2 === 0) {
reset();
}
if (x3 === 0) {
reset();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
Thank You
https://editor.p5js.org/
I'm new p5js so sorry if the answer is simple!

Answer 1

Unless the shape in question is trivially simple (i.e. just a line). Then I think you will definitely want to utilize the rotate() function. It sounds like you've been trying to use just rotate(), which will rotate all future drawing commands around the origin (position 0, 0) of the canvas. In order to rotate a particular object around its own origin you need to translate that origin, then perform the rotation, then draw the object. After drawing a rotated object you can use pop() to reset the translation and rotation back to the original. Here's an example:
function setup() {
createCanvas(windowWidth, windowHeight);
// Draw squares centered on the origin
rectMode(CENTER);
}
function draw() {
background(100);
for (let i = 1; i <= 4; i++) {
// Save the current state (translation/rotation/etc)
push();
// Translate to the origin of the shape
translate(mouseX * i / 4, mouseY * i / 4);
// Rotate around the origin
rotate(millis() / 1000 * PI / 2);
// Because we've translated to the origin, we draw the square at 0, 0
square(0, 0, 50);
// Restore the state saved with push();
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
In order to demonstrate why this is easier than the alternative, here is an example that does the same thing but does not use translate() or rotate():
function setup() {
createCanvas(windowWidth, windowHeight);
}
// Declare each vertex of our geometry as a vector from the origin.
const rectPoints = [
new p5.Vector(-25, -25),
new p5.Vector(25, -25),
new p5.Vector(25, 25),
new p5.Vector(-25, 25)
];
function draw() {
background(100);
let angle = millis() / 1000 * PI / 2;
// Use p5.Vector.rotate to rotate each of the points that defines our geometry
let rotatedRectPoints = rectPoints.map(v => v.copy().rotate(angle));
for (let i = 1; i <= 4; i++) {
// We can't using normal primitives like square(), so we have to draw shapes
// with beginShape/endShape
beginShape();
for (const p of rotatedRectPoints) {
vertex(p.x + mouseX * i / 4, p.y + mouseY * i / 4);
}
endShape();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>