#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# How to create a linear gradient background

edited March 2018

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?

Tagged:

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.

• 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?)

• edited March 2018

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

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

• 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);
}
``````
• ``````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);
}
``````
• A recent simple example: