Decreasing opacity in a text String

Processing Coding Questions
1

Hello everyone,

I am new to Processing and trying to code a clock for a school project. I would like the opacity to gradually decrease across several pieces of text but none of the things I’ve tried worked out.

Here is a gif with the effect I’m trying to achieve:

horloge
horloge2000×2000 238 KB

This is what I have written so far:

float xt, yt, delta;
int prevSec;
PFont maPolice;

void setup() {
  size(600, 600);
  background(0);
  maPolice=loadFont("SolideMirage-Mono-32.vlw");
  xt=0;
  yt=height;
  delta =10;
  prevSec=second();
}

void draw() {
  background(0);
  for (int i=0; i<second(); i++) {
    String monTexte = hour()+":" + minute();
    text (monTexte, xt+delta*i, yt-delta*i);
    textFont(maPolice);
  }
}

I guess I should use alpha paired with a condition but I’m stuck at the moment.
Any help would be much appreciated! Thanks in advance.

2

You could draw the current time on a PGraphic, and place that PGraphic multiple times in a row (with its location and transparency slightly changed).

3

You could simply try using transparency on the fill colour like this

String s = "Quark exists";

void setup(){
  size(600,300);
  background(0);
  textSize(80);
  int alpha = 55;
  int px = 110, py = 100;
  while(alpha <= 255){
    fill(255,alpha);
    text(s,px,py);
    alpha += 50;
    px -= 25;
    py += 40;
  }
}
2 Likes
4

Hello,

Sorry for the delayed answer, I forgot to check if anyone had replied.

@Tiemen, I checked the link you sent. I am not sure how to make the PGraphic works, I’ll have a deeper look before asking. Thanks!

@Peter Lager, I tried something like this but the opacity is not fading like I was expecting. Any idea?

float xt, yt, delta;
int prevSec;
PFont maPolice;

void setup() {
  size(600, 600);
  background(0);
  maPolice=loadFont("SolideMirage-Mono-32.vlw");
  xt=0;
  yt=height;
  delta =10;
  prevSec=second();
  int alpha = 55;
  int px = 110, py = 100;
  while (alpha <= 255) {
    fill(255, alpha);
    text(prevSec, px, py);
    alpha += 50;
    px -= 10;
    py += 100;
  }
}

void draw() {
  background(0);
  for (int i=0; i<second(); i++) {
    String monTexte = hour()+":" + minute();
    text (monTexte, xt+delta*i, yt-delta*i);
    textFont(maPolice);
  }
}

Thanks in advance.

5

For a start you need to @quark to get my attention, Processing uses the login name.

You need to understand the difference between setup and draw. The setup method is executed once when the sketch is launched and is used to load resources (e.g. images) and initilise variables. The draw method renders a single frame and is executed about 60 times a second, it will replace anything drawn in setup.

So here is my original code incorporating a draw method

String s = "Quark exists";

void setup() {
  size(600, 300);
}

void draw() {
  background(0);
  textSize(80);
  int alpha = 55;
  int px = 110, py = 100;
  while (alpha <= 255) {
    fill(255, alpha);
    text(s, px, py);
    alpha += 50;
    px -= 25;
    py += 40;
  }
}

Hopefully you will see the difference.

1 Like