How do i centre a rotating object in P5JS

crashpotato · June 2017

**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)



}

crashpotato · June 2017

Anyone can help me? :(

jeremydouglass · June 2017

Try using rectMode():

https://p5js.org/reference/#/p5/rectMode

To understand why rotation is surprising you, read this tutorial:

https://processing.org/tutorials/transform2d/

kfrajer · June 2017

Edit your post (gear icon in the top right corner of your post), select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code.

Kf

Howdy, Stranger!

Categories

In this Discussion

How do i centre a rotating object in P5JS

Answers