How do i centre a rotating object in P5JS

**This is my code.** 
It can rotate but it is moving at the same time. I want it to stay centred. Thank you.


var cY
var cX
var cX1
var cY1var cY
var cX
var cX1
var cY1
var cX2
var cY2
var rX
var rY
var r
var t

function setup() {
  r = 1
  translate(width / 2, height / 2);
  createCanvas(400, 400);
  background('black');

  cX = 80
  cY = 100
  cX1 = 250
  cY1 = 440
  cX2 = 167
  cY2 = 250
  fill('red')
  rect(70, 60, 150, 72)
  fill('red')
  noStroke()
  translate(width / 2, height / 2);
  rotate(45.09);
  rect(-104, 27, 150, 72);
  rotate(-45.09);
  translate(-width / 2, -height / 2);
  translate(width / 2, height / 2);
  rotate(90.18);
  rect(-100, -32, 160, 72);
  rotate(-90.18);
  translate(-width / 2, -height / 2);
  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX, cY, 100, 100)
  fill('grey')
  ellipse(cX, cY, 100, 100)
  fill('black')
  ellipse(cX, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX1, cY, 100, 100)
  fill('grey')
  ellipse(cX1, cY, 100, 100)
  fill('black')
  ellipse(cX1, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX2, cY2, 100, 100)
  fill('grey')
  ellipse(cX2, cY2, 100, 100)
  fill('black')
  ellipse(cX2, cY2, 70, 70)

  function setup() {
    createCanvas(400, 400);
  }


}
rX = 100
rY = 150

function draw() {
  background('black')
  r = r + 0.1
  translate(width / 2 - 40, height / 2 - 12);
  rotate(r)
  translate(-width / 2 + 40, -height / 2 + 12);
  fill('red')
  rect(70, 60, 150, 72)
  fill('red')
  noStroke()
  translate(width / 2, height / 2);
  rotate(45.09);
  rect(-104, 27, 150, 72);
  rotate(-45.09);
  translate(-width / 2, -height / 2);
  translate(width / 2, height / 2);
  rotate(90.18);
  rect(-100, -32, 160, 72);
  rotate(-90.18);
  translate(-width / 2, -height / 2);
  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX, cY, 100, 100)
  fill('grey')
  ellipse(cX, cY, 100, 100)
  fill('black')
  ellipse(cX, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX1, cY, 100, 100)
  fill('grey')
  ellipse(cX1, cY, 100, 100)
  fill('black')
  ellipse(cX1, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX2, cY2, 100, 100)
  fill('grey')
  ellipse(cX2, cY2, 100, 100)
  fill('black')
  ellipse(cX2, cY2, 70, 70)



}
var cX2
var cY2
var rX
var rY
var r
var t

function setup() {
  r = 1
  translate(width / 2, height / 2);
  createCanvas(400, 400);
  background('black');

  cX = 80
  cY = 100
  cX1 = 250
  cY1 = 440
  cX2 = 167
  cY2 = 250
  fill('red')
  rect(70, 60, 150, 72)
  fill('red')
  noStroke()
  translate(width / 2, height / 2);
  rotate(45.09);
  rect(-104, 27, 150, 72);
  rotate(-45.09);
  translate(-width / 2, -height / 2);
  translate(width / 2, height / 2);
  rotate(90.18);
  rect(-100, -32, 160, 72);
  rotate(-90.18);
  translate(-width / 2, -height / 2);
  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX, cY, 100, 100)
  fill('grey')
  ellipse(cX, cY, 100, 100)
  fill('black')
  ellipse(cX, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX1, cY, 100, 100)
  fill('grey')
  ellipse(cX1, cY, 100, 100)
  fill('black')
  ellipse(cX1, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX2, cY2, 100, 100)
  fill('grey')
  ellipse(cX2, cY2, 100, 100)
  fill('black')
  ellipse(cX2, cY2, 70, 70)

  function setup() {
    createCanvas(400, 400);
  }


}
rX = 100
rY = 150

function draw() {
  background('black')
  r = r + 0.1
  translate(width / 2 - 40, height / 2 - 12);
  rotate(r)
  translate(-width / 2 + 40, -height / 2 + 12);
  fill('red')
  rect(70, 60, 150, 72)
  fill('red')
  noStroke()
  translate(width / 2, height / 2);
  rotate(45.09);
  rect(-104, 27, 150, 72);
  rotate(-45.09);
  translate(-width / 2, -height / 2);
  translate(width / 2, height / 2);
  rotate(90.18);
  rect(-100, -32, 160, 72);
  rotate(-90.18);
  translate(-width / 2, -height / 2);
  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX, cY, 100, 100)
  fill('grey')
  ellipse(cX, cY, 100, 100)
  fill('black')
  ellipse(cX, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX1, cY, 100, 100)
  fill('grey')
  ellipse(cX1, cY, 100, 100)
  fill('black')
  ellipse(cX1, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX2, cY2, 100, 100)
  fill('grey')
  ellipse(cX2, cY2, 100, 100)
  fill('black')
  ellipse(cX2, cY2, 70, 70)



}

Answers

Sign In or Register to comment.