Gradients are very taxing

[clay53]

Nature of issue?

• Found a bug
• Existing feature enhancement
• [ x ] New feature request

Most appropriate sub-area of p5.js?

• Color
• Core
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• [ x ] WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• [ x ] Mobile/Tablet (touch devices)
• [ x ] Desktop/Laptop
• [ x ] Others (specify if possible)

New feature details: I would like to request a better way to create a gradient. My app (clay53.github.io/Art-Project-1; https://repl.it/@ClaytonHickey/Art-Project-1) has a gradient background and other kind of gradients. However, the current way to do this according to the reference (https://p5js.org/examples/color-linear-gradient.html) is to create a bunch of lines with strokes of different colors. This way is very taxing in WebGL, much more than in the default rendering engine, however, I have to use WebGL for "layers". If anyone knows how to make a better gradient it should definitely be integrated into the base methods for p5.js - also, please tell me.

[Spongman]

hopefully this is coming very soon. a side-effect of #2670 is per-vertex coloring.
so

  translate(-width/2, -height/2);
  noStroke();

  beginShape();

  fill(255, 0, 0);
  vertex(0, 0);
  vertex(width, 0);

  fill(0, 255, 0);
  vertex(width, height);
  vertex(0, height);

  endShape(CLOSE);

will give you

[clay53]

@Spongman That sounds good. For now, I added a "gradientDetail" variable:

function yGradient (c1, c2, o, x, y, w, h, mode) {
    fill(0);
    strokeWeight(h/gradientDetail);
    for (var i = 0; i < gradientDetail; i++) {
        let yo = i/gradientDetail*h
        stroke(lerpColor(c1, c2, (i/gradientDetail+o)));
        if (mode === CORNER) {
            line(x, y+yo, x+w, y+yo);
        } else if (mode === CENTER) {
            line(x-w/2, y+yo-h/2, x+w/2, y+yo-h/2);
        }
    }
}

[haschdl]

Relates to #4141
The sample above provided by #2750 (comment) works with version 0.8.0 but in version 0.9.0 the output is wrong:

[stalgiag]

Per-vertex fill for WEBGL is working as #4147 . The code in the comments will produce the desired gradient in the current master branch. Closing for organizational purposes. Thanks!