How to create a linear gradient background

herefor1reason

Hello I need to know how to make the background of the canvas transition from blue to red using a linear gradient (not animation, just a picture).

I'm very new to processing, and so far everything I've seen regarding how to potentially do this has been very confusing and over complicated for me. Help please?

koogs

If it's static then you can just use an image.

If you need to draw it then post your code here.

If you have no code then start by drawing horizontal (?) lines for each line of the screen, and post that. Format it nicely using Ctrl-o.

koogs

Step 2 would be setting a different colour for each separate line (stroke)

Step 3 would be controlling that colour so it's blue at the top and red at the bottom (lerpColor? map?)

TfGuy44

[This full-code solution cannot be displayed because you didn't post any code of your own.]

kfrajer

Start with:

https://processing.org/reference/pixels.html

This is a transition, so you start with blue and finished with red, going over a purple transition, right? Check lerpColor in the reference as well.

Kf

herefor1reason

Thanks for the suggestions! I think something like this would work, as per suggestion?

float red = 0;
float blue = 255.0;
for (int i = 0; i<500; i++){
  stroke(red,0,blue,200);
  line(0,i,800,i);
  blue= blue-(255/500.0);
  red=red+(255/500.0);
}

TfGuy44

size(500,200);

for( int i = 0; i < width; i++){
  stroke(map(i,0,width,0,255),0,255-map(i,0,width,0,255));
  line(i,0,i,height);
}

koogs

https://processing.org/reference/lerpColor_.html

jeremydouglass

A recent simple example:

• https://forum.processing.org/two/discussion/25811/colormode

...and advanced example (n colors):

• https://forum.processing.org/two/discussion/25310/list-based-interpolations