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:
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.
Tiemen
January 10, 2020, 5:22pm
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).
quark
January 10, 2020, 5:56pm
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;
}
}
1 Like
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.
quark
January 15, 2020, 10:52am
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.