# Getting shaked when using textAlign(CENTER, CENTER)

**URL:** <https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835>\
**Category:** Coding Questions\
**Created:** [January 6, 2021, 12:15pm UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835 "2021-01-06T12:15:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 6, 2021, 12:15pm UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/1 "2021-01-06T12:15:44Z")

</div>

Hi, everyone !

When I use `sin()` funtion to shrink my text’s size I am getting a shaky effect with `textAlign(CENTER, CENTER)`. I have to use it with `textAlign(CENTER, CENTER)` but without shaky effect.  
Here is my code which I am talking about :

```auto
void setup() {
  size(900, 900);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);

  for(int i = 0; i < 8; i++) {
    for(int j = 0; j < 17; j++) {
      float wave = map(sin(radians(frameCount*2 - i * 40 - j * 40)), -1, 1, 10, 50);
      textSize(wave);
      text("belli", i * 110 + 60, j * 50 + 40);
    }
  }
}

```

I appreaciate any help, thanks !  
Yhlas Kerimov

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 6, 2021, 1:37pm UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/2 "2021-01-06T13:37:34Z")

</div>

I played around a bit and changed `textSize(wave);` to `textSize(floor((wave*100.0)/100));` it’s still not prefect but most of the shaking is gone, at least from what I saw

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [January 6, 2021, 2:04pm UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/3 "2021-01-06T14:04:00Z")

</div>

I think the shaky effect is caused by `textSize();` – it doesn’t handle continuous values well.

Ideally we need a vector approach. I made a small library recently named [PText](https://github.com/micycle1/PText) that can help you with this. You can download the .jar from releases then simply drag-and-drop it onto the Processing sketch.

This code then results text that smoothly scales with no shaking.

```auto
import pText.PText;

PText text;

void setup() {
  size(900, 900);
  frameRate(60);
  text = new PText(this, "Arial", 50);
  text.setText("belli");
  text.setFill(255);
}

void draw() {
  background(0);

  for(int i = 0; i < 8; i++) {
    for(int j = 0; j < 17; j++) {
      float wave = map(sin(radians(frameCount*2 - i * 40 - j * 40)), -1, 1, 0.2, 1);
      text.setScale(wave);
      float centerOffsetX = -text.getTextWidth()/2;
      float centerOffsetY = -text.getFontDescent()+text.getTextHeight()/2;
      shape(text, i * 110 + 60 + centerOffsetX, j * 50 + 40 + centerOffsetY);
    }
  }
}

```

---

<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:** [January 6, 2021, 9:07pm UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/4 "2021-01-06T21:07:53Z")

</div>

Hello,

A related topic:

> [@Text seems jittery when moving in a circular pattern](https://discourse.processing.org/t/text-seems-jittery-when-moving-in-a-circular-pattern/19548/5):
>
> Hello, Thank you for your thorough investigation and response. I am sharing the last version I worked on for anyone interested; I tried to rotate() and translate() along with directly plotting to compare and they are the same (can overlap these in code). Visually it is nicer but they are still jittery upon close examination; the larger size and strokeWeight() seemed to help. I added keyboard control to toggle the overlap and ceiling. PGraphics pg; float angle; boolean overlap = false; boole…

`:)`

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 8, 2021, 10:20am UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/5 "2021-01-08T10:20:50Z")

</div>

Thank you for your reply and sorry for my late reply.

I did it and it helped, but it can not recognize PText as a library, isn’t it ?  
Can we use it like library ?

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [January 8, 2021, 7:00pm UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/6 "2021-01-08T19:00:05Z")

</div>

Download the jar from [here](https://github.com/micycle1/PText/releases) and drag-and-drop onto your sketch.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 9, 2021, 7:13am UTC](https://discourse.processing.org/t/getting-shaked-when-using-textalign-center-center/26835/7 "2021-01-09T07:13:38Z")

</div>

Thank you so much, I learned a new thing ! I appreciate your help !