Need some help with translate() and rotate()

Processing.py
1

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?

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
2

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

3

Hello @adora,

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

Example:


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

:)

1 Like
4

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:

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:

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
1 Like