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
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
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);
}
}
}
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 ?
Download the jar from here and drag-and-drop onto your sketch.
Thank you so much, I learned a new thing ! I appreciate your help !