Fancy gradient rainbow color on text?

Processing Coding Questions
1

What I want to do is basically this:

but it is going through the text like this:
rainbow
I don’t exactly know where to start here or what I should do.

1 Like
2

Hello @qewer3322!

Can you show your code?

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

:nerd_face:

1 Like
3

I dont have any code :smile:. 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

EDIT:
Actually I managed to do something here:

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.

1 Like
4

One solution is to use an alphamask. There is an example how to do this here:
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

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…

:nerd_face:

3 Likes
5

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


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.
2 Likes
6

@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:

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

References:
https://processing.org/examples/alphamask.html
https://processing.org/reference/PGraphics.html
https://processing.org/reference/PImage.html
https://processing.org/reference/get_.html

I was able to build on above and do this:
image

:)

4 Likes