# Decreasing opacity in a text String

**URL:** <https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [January 10, 2020, 4:41pm UTC](https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006 "2020-01-10T16:41:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![VictoireCl](https://avatars.discourse-cdn.com/v4/letter/v/a3d4f5/32.png) [@VictoireCl](https://discourse.processing.org/u/VictoireCl)\
**Post date:** [January 10, 2020, 4:41pm UTC](https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006/1 "2020-01-10T16:41:23Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/630276eb1fbe64a1be3ad8bf50d6d6b251c23097.gif)

This is what I have written so far:

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

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [January 10, 2020, 5:22pm UTC](https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006/2 "2020-01-10T17:22:54Z")

</div>

You could draw the current time on a [PGraphic](https://processing.org/reference/PGraphics.html), and place that `PGraphic` multiple times in a row (with its location and transparency slightly changed).

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 10, 2020, 5:56pm UTC](https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006/3 "2020-01-10T17:56:12Z")

</div>

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

```auto
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![VictoireCl](https://avatars.discourse-cdn.com/v4/letter/v/a3d4f5/32.png) [@VictoireCl](https://discourse.processing.org/u/VictoireCl)\
**Post date:** [January 15, 2020, 9:30am UTC](https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006/4 "2020-01-15T09:30:04Z")

</div>

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?

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 15, 2020, 10:52am UTC](https://discourse.processing.org/t/decreasing-opacity-in-a-text-string/17006/5 "2020-01-15T10:52:32Z")

</div>

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

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