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

Happier

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);
      }
    }

Chrisir

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(...

jeremydouglass

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

• https://forum.processing.org/two/discussion/comment/106274/#Comment_106274

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:

• https://medium.com/@behreajj/color-gradients-in-processing-v-2-0-e5c0b87cdfd2

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.