# Fancy gradient rainbow color on text?

**URL:** <https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686>\
**Category:** Coding Questions\
**Created:** [July 17, 2020, 2:05pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686 "2020-07-17T14:05:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [July 17, 2020, 2:05pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686/1 "2020-07-17T14:05:05Z")

</div>

What I want to do is basically this:  
[![](https://i.stack.imgur.com/kVU7j.png) ](https://i.stack.imgur.com/kVU7j.png)  
but it is going through the text like this:  
 ![rainbow](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f0fe8a4457925e85611d7fea0a77629d2c89b2e4.png)  
I don’t exactly know where to start here or what I should do.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [July 17, 2020, 4:11pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686/2 "2020-07-17T16:11:56Z")

</div>

Hello @qewer3322!

Can you show your code?

It’ll be easier / more efficient for people to help you!

🤓

---

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [July 17, 2020, 5:08pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686/3 "2020-07-17T17:08:03Z")

</div>

I dont have any code 😄. As I said I dont exactly know where to start. I got the top iamge from here: [https://stackoverflow.com/questions/47858866/generate-a-n-color-rainbow-palette](https://stackoverflow.com/questions/47858866/generate-a-n-color-rainbow-palette)

EDIT:  
Actually I managed to do something here:

```auto
int x = 0;
int i = 0;

void setup() {
  size(360, 100);
  colorMode(HSB, 360, 100, 100);
}

void draw() {
  background(360,100,100);
  noStroke();
  x++;
  if (x>359) x = 0;
  for (i = 0;i < 360; i++)   
  {
    fill(i, 100, 100);
    rect(i+x, 0, 1, 100);
    rect(i+x-360, 0, 1, 100);
    rect(i+x-(360*0), 0, 1, 100);
  }
}

```

But now I need this on the text and I dont have any idea how to do that.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [July 17, 2020, 8:02pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686/4 "2020-07-17T20:02:34Z")

</div>

**One solution** is to use an alphamask. There is an example how to do this here:  
[https://processing.org/examples/alphamask.html](https://processing.org/examples/alphamask.html)

You would need to create 2 jpeg files via any design software—Illustrator, Photoshop, Gimp, etc  
One for the color gradation, one for the text number sequence (to use as the mask).

![alphamask_example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/792e72e771a485f615132ed4354dd30b2436a385.png)

**However, if you are seeking a solution that is code only** and not reliant on any support files…  
I’m not sure…  
But my inclination would be to explore converting text to a shape, and then filling. Though not sure if that is a viable approach…

🤓

---

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [July 17, 2020, 9:27pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686/5 "2020-07-17T21:27:25Z")

</div>

here wont load gifs very good it looks like so heres a drive link:

> **[e53cfb3d-25ef-418d-a912-a309f737cec6.gif](https://drive.google.com/file/d/1KCZercv2p7vzfaoLgAt7Yjyh2pgUQzb7/view?usp=sharing)**
>
> Google Drive file.

  
Thanks so much! Working pretty amazing. A full code solution would be better for my application but this is also great and will definitely use in other projects.  
Edit: It just looks so good, I can stand and watch it for an hour straight.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 21, 2020, 5:55pm UTC](https://discourse.processing.org/t/fancy-gradient-rainbow-color-on-text/22686/6 "2020-07-21T17:55:25Z")

</div>

@qewer3322 and @debxyz ,

I enjoyed exploring this topic…

An example (integrating your code and Processing code) that you can use to create your images and then you can mask them:

```auto
PGraphics pg1;
PImage img1, img2;

int x = 0;
int i = 0;

void setup()
  {
  size(360, 340);
  colorMode(HSB, 360, 100, 100);
  
  pg1 = createGraphics(width, height);
  
  pg1.beginDraw();
  pg1.colorMode(HSB, 360, 100, 100);
  pg1.noStroke();
  x++;
  if (x>359) x = 0;
  for (i = 0;i < 360; i++)   
    {
    pg1.fill(i, 100, 100);
    pg1.rect(i+x, 0, 1, 100);
    pg1.rect(i+x-360, 0, 1, 100);
    pg1.rect(i+x-(360*0), 0, 1, 100);
    }
  pg1.save("pg1.png");
  pg1.endDraw();   
  
  img1 = pg1.get();
  
  img2 = loadImage("pg1.png");
  }

void draw() 
  {
  background(360, 100, 100);
  image(pg1, 0, 10);
  image(img1, 0, 100+20);
  image(img2, 0, 2*100+30);
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/63290942e41ab306ae477f019c5828ea25f6dd81.png)

References:  
[https://processing.org/examples/alphamask.html](https://processing.org/examples/alphamask.html)  
[https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)  
[https://processing.org/reference/PImage.html](https://processing.org/reference/PImage.html)  
[https://processing.org/reference/get\_.html](https://processing.org/reference/get_.html)

I was able to build on above and do this:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2028543e1e440486f09318c4d54b35d825db91e9.png)

`:)`