Drawing a line with color gradient using vertices

ezkhimo

Hello,

I want to draw a connected line that consists of n vertices. These n vertices have different colors, so there should be a gradient applied. However, I can't figure out the correct method to do so.

What I have so far (waypoints is a list with objects that have an assigned color and a PVector position):

pushMatrix();
  translate(map.getCenter().x, map.getCenter().y);
  beginShape();
  for(int i = 0; i < waypoints.size(); i++) { 
    noFill(); 
    stroke(waypoints.get(i).getColor());
    curveVertex(waypoints.get(i).getPosition().x, waypoints.get(i).getPosition().y);
  }
  endShape();
popMatrix();

This does not seem to work as the stroke is monochrome. Does anybody have an idea what I'm missing here? Is it only possible using lines(...) or is there also a way using vertices?

Thanks in advance!
ezkhimo

Chrisir

...

benja

In your description you're only talking about lines, so if you don't need curves, you can set different stroke colors between your calls to vertex(). Keep in mind, that this does not seem to work with all renderers.

void setup() {
  size(400, 400, P2D);
  background(0);
  noFill();

  beginShape();

  stroke(#ff0000);
  vertex(100, 100);

  stroke(#00ff00);
  vertex(300, 100);

  stroke(#0000ff);
  vertex(300, 300);

  endShape();
}

I'm not sure if there is a way to do it with curves.

jeremydouglass

Related discussions of manually drawing linear gradients and line-gradients using loops of points or ellipses --

• https://forum.processing.org/two/discussion/5620/how-to-draw-a-gradient-colored-line
• https://forum.processing.org/two/discussion/20362/drawing-a-line-with-color-gradient-using-vertices
• https://www.processing.org/examples/lineargradient.html

ezkhimo

Thank you benja, that's it. I was scratching my head why it didn't work, and your hint about the renderer compatibility solved it. It doesn't work with the default renderer (although I thought it's P2D?), but setting size to (x, y, P2D) makes gradial strokes possible.
Thank you very much!

For your information: It seems to work with curves as well.

Lord_of_the_Galaxy

Default is JAVA2D.

benja

@ezkhimo: Really? It works with curves? I would love to see an example, so i don't have to figure it out by myself.