# Need some help with translate() and rotate()

**URL:** <https://discourse.processing.org/t/need-some-help-with-translate-and-rotate/35372>\
**Category:** Processing.py\
**Created:** [February 22, 2022, 6:59am UTC](https://discourse.processing.org/t/need-some-help-with-translate-and-rotate/35372 "2022-02-22T06:59:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adora](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@adora](https://discourse.processing.org/u/adora)\
**Post date:** [February 22, 2022, 6:59am UTC](https://discourse.processing.org/t/need-some-help-with-translate-and-rotate/35372/1 "2022-02-22T06:59:23Z")

</div>

Hi, so for my code, I want the heart shape to continuously rotate 360 degrees while keeping its position in the center of the screen. Currently, however, it rotates around the screen for some reason. How can I make it stick to the center?

```auto
def setup():
    size(800, 600)
    frameRate(50)

x = 0
def draw():
    global x
    background(255)
    
    translate(400, 300)
    rotate(radians(x))
    createShape()
    smooth()
    noStroke()
    beginShape()
    vertex(width/2, height/7*3.2) 
    bezierVertex(width/2, height/5*1.4, width/10*8, height/7*3, width/2, height/7*5)
    vertex(width/2, height/7*3.2)
    bezierVertex(width/2, height/5*1.4, width/10*2, height/7*3, width/2, height/7*5)
    endShape()
    fill(random(255), random(255), random(255))
    x = x+1

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 22, 2022, 9:07am UTC](https://discourse.processing.org/t/need-some-help-with-translate-and-rotate/35372/2 "2022-02-22T09:07:57Z")

</div>

> [@adora](#):
>
> `vertex(width/2, height/7*3.2) `

All these values must place the heart around 0,0 so some of these will be negative

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 22, 2022, 1:55pm UTC](https://discourse.processing.org/t/need-some-help-with-translate-and-rotate/35372/3 "2022-02-22T13:55:49Z")

</div>

Hello @adora,

You are rotating about the corner of the shape.  
Translate it after the rotation to center it.

Example:

```auto

def setup():
    size(300, 300)

x = 0
def draw():
    global x
    background(255)
    
    translate(width/2, height/2) # (0, 0) is center of canvas
    
    strokeWeight(2);
    rotate(radians(x))
    #translate(-50, -25) #uncomment this
    
    fill(255, 0, 0);
    noStroke()
    
    beginShape()
    rect(0, 0, 100, 50);
    fill(0); #black
    circle(0, 0, 10); #corner of rectangle   
    fill(255, 255, 0); #yellow
    circle(50, 25, 10); # (50, 25) is center of rectangle    
    endShape()
    
    x = x+1

```

I did the same for this example with an image:  
_[Help in Rotate Image in JAVA2D - #4 by glv](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/4)_

`:)`

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [February 22, 2022, 9:21pm UTC](https://discourse.processing.org/t/need-some-help-with-translate-and-rotate/35372/4 "2022-02-22T21:21:59Z")

</div>

As @Chrisir said, the way to think about it is to draw your shape around the point (0, 0) so the transformations act the way you want.

The first thing that you can do, is simply re-center your value around 0 manually:

```auto
def setup():
    size(800, 600)
    frameRate(50)

x = 0
def draw():
    global x
    background(255)
    
    translate(400, 300)
    rotate(radians(x))
    
    createShape()
    smooth()
    noStroke()
    beginShape()
    
    #Every points are recentered around (0, 0)
    vertex(width/2 - width/2, height/7*3.2 - height/2) 
    bezierVertex(width/2 - width/2, height/5*1.4 - height/2, width/10*8 - width/2, height/7*3 - height/2, width/2 - width/2, height/7*5 - height/2)
    vertex(width/2 - width/2, height/7*3.2 - height/2)
    bezierVertex(width/2 - width/2, height/5*1.4 - height/2, width/10*2 - width/2, height/7*3 - height/2, width/2 - width/2, height/7*5 - height/2)
    
    endShape()
    fill(random(255), random(255), random(255))
    x = x+1

```

Or, since your shape is already centered in the screen, you can call another translation to compensate:

```auto
def setup():
    size(800, 600)
    frameRate(50)

x = 0
def draw():
    global x
    background(255)
    
    translate(400, 300)
    rotate(radians(x))
    translate(-400, -300) #HERE
    
    createShape()
    smooth()
    noStroke()
    beginShape()
    vertex(width/2, height/7*3.2) 
    bezierVertex(width/2, height/5*1.4, width/10*8, height/7*3, width/2, height/7*5)
    vertex(width/2, height/7*3.2)
    bezierVertex(width/2, height/5*1.4, width/10*2, height/7*3, width/2, height/7*5)
    endShape()
    fill(random(255), random(255), random(255))
    x = x+1

```