#### Howdy, Stranger!

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

# Only in a trapezoidal shape, how does the fill color make it gradient from bottom to height?

edited May 2018

Hello Processing Community, I have created a sketch , I want to fill gradients in this trapezoid, from side to side, how to use Processing to achieve it? waiting for your suggestions and trying my best for this... regards ...

``````    color from = color (231,70,77,25);
color to = color (231,70,77,255);

//int j=20;
//int r=1;
boolean inc =false, dec =false;
void setup() {
size(400, 400);

}
void draw() {
background(-1);

ellipseMode(CENTER);
fill(125);
//rect(30, 50, 60, 20);
noStroke();
for (int i=1;i<5;i++) {

color interA=lerpColor(from, to, (float(i)/10));
fill(interA);

ellipseMode(CENTER);

// rect(i*15+15, 50, 60, 20);

quad( 100,300, 300,300, 350,100, 50,100 );

println(i);
}
}
``````
Tagged:

Use 4x lerp() to fill the quad with lines of changing color

That sentence needs a bit of unpacking

for(i.....

x1=lerp(....

y1=lerp(....

x2

y2

stroke

line(...

• edited May 2018 Answer ✓

For different approaches to gradient fills in a triangle, see:

You can also use a PShape (e.g. with `beginShape()` / `endShape()`:

``````size(100,100,P2D);
beginShape();
fill(255,0,0);
vertex(10,20);
vertex(90,20);
fill(0,0,255);
vertex(70,60);
vertex(30,60);
endShape(CLOSE);
``````

It can also be done with a different gradient fill assigned for any vertex:

How this works is described in the beginShape() reference -- note the need to set P2D or P3D in `size()`:

The P2D and P3D renderers allow stroke() and fill() to be altered on a per-vertex basis, but the default renderer does not. Settings such as strokeWeight(), strokeCap(), and strokeJoin() cannot be changed while inside a beginShape()/endShape() block with any renderer.

You may also be interested in this much more advanced tutorial on Processing gradients:

At the very end it also gets into one of the most advanced ways to do a gradient (not covered above) -- using PShader and a GLSL fragment shader.