# Rotate a smilie around its center

**URL:** <https://discourse.processing.org/t/rotate-a-smilie-around-its-center/23291>\
**Category:** Coding Questions\
**Created:** [August 16, 2020, 3:12pm UTC](https://discourse.processing.org/t/rotate-a-smilie-around-its-center/23291 "2020-08-16T15:12:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![txwgnd](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@txwgnd](https://discourse.processing.org/u/txwgnd)\
**Post date:** [August 16, 2020, 3:12pm UTC](https://discourse.processing.org/t/rotate-a-smilie-around-its-center/23291/1 "2020-08-16T15:12:53Z")

</div>

Hello,

i try to write a method that rotates my Smilie object around its center axis.  
The show() function draws the complete object based on the center coordinates.  
The problem is that when I try to rotate the whole thing with

```auto
pushMatrix();
translate(x, y);
rotate(radians(80); // Will later be an incrementing variable
popMatrix();

```

The smilie is flying around the screen and it’s not behaving as I thought it would.

source code:

Main

```auto
Smilie Smilie;

void settings () {
  size(1000, 1000);
}

void setup () {
  Smilie = new Smilie();
}

void draw () {
  background(255);
  Smilie.LA = 'n';
  Smilie.RA = 'k';
  Smilie.show();
}

```

Class

```auto
class Smilie {

  float x;
  float y;
  float size;
  char LA;
  char RA;
  float posLax;
  float posLay;
  float posRax;
  float posRay;
  color c = color(255, 236, 1);
  PFont font = createFont("Arabic.ttf", 20);

  Smilie() {

    x = width/2;
    y = height/2;
    size = 500;
    posLax = x-size*0.18;
    posLay = y+46;
    posRax = x+size*0.18;
    posRay = y+46;
    strokeWeight(size*0.05);
    strokeCap(PROJECT);
  }

  Smilie(float tempX, float tempY, float tempSize) {

    x = tempX;
    y = tempY;
    size = tempSize;
    posLax = x-size*0.18;
    posLay = y+46;
    posRax = x+size*0.18;
    posRay = y+46;
    strokeWeight(size*0.05);
    strokeCap(PROJECT);
  }

  void show() {
    
    float mouth = size*0.7;
    fill(c);
    circle(x, y, size);
    noFill();
    pushMatrix();
    translate(x, y);
    rotate(radians(10));
    arc(x, y, mouth, mouth, radians(0), radians(180));
    eyes(LA, RA);
    popMatrix();
  }

  void eyes(char L, char R) {  
    textFont(font);
    fill(30);
    textSize(size*0.3);
    textAlign(CENTER, BOTTOM);
    text(L, posLax, posLay);
    text(R, posRax, posRay);
  }

  void spin(float speed) {
    
  }
}

```

---

<div class="post-metadata">

**Author:** ![leo.nerd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/leo.nerd/32/6101_2.png) [@leo.nerd](https://discourse.processing.org/u/leo.nerd)\
**Post date:** [August 16, 2020, 3:43pm UTC](https://discourse.processing.org/t/rotate-a-smilie-around-its-center/23291/2 "2020-08-16T15:43:27Z")

</div>

Try arc(0, 0, …) instead of arc(x, y, …) since you’ve already translated to (x,y). You might also want to redefine posLax and posLay accordingly - i.e. relative to (width/2, height/2).

---

<div class="post-metadata">

**Author:** ![txwgnd](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@txwgnd](https://discourse.processing.org/u/txwgnd)\
**Post date:** [August 16, 2020, 7:36pm UTC](https://discourse.processing.org/t/rotate-a-smilie-around-its-center/23291/4 "2020-08-16T19:36:45Z")

</div>

> [@leo.nerd](#):
>
> Try arc(0, 0, …) instead of arc(x, y, …) since you’ve already translated to (x,y). You might also want to redefine posLax and posLay accordingly - i.e. relative to (width/2, height/2).

Thank You!!

arc(0, 0…) worked! It can be so simple sometimes…

I already tried to make posLax and posLay relative but I think the offset does come from the font somehow. I need to investigate that further.