Getting shaked when using textAlign(CENTER, CENTER)

Processing Coding Questions
#1

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 :

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

#2

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

1 Like
#3

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 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.

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);
    }
  }
}
#4

Hello,

A related topic:

:)

#5

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 ?

#6

Download the jar from here and drag-and-drop onto your sketch.

#7

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