Search code examples
javaandroidlibgdx

how to draw a curve using gradient color in libgdx java

I want to draw a curve using gradient color like this picture gradient color curve image

here is my curve drawing code, but this code works only for one color.

public class Test extends ApplicationAdapter{

//create paths
private Bezier<Vector2> path1; 
private ShapeRenderer sr;

@Override
public void create () {

    // set up random control points
    int width = Gdx.graphics.getWidth();
    int height = Gdx.graphics.getHeight();
    int points = 4;
    Vector2[] controlPoints = new Vector2[points];
    for (int i = 0; i < points; i++) {
       int x = (int) (Math.random() * width) ;
       int y = (int) (Math.random() * height);
       Vector2 point = new Vector2(x, y);
       controlPoints[i] = point;
    }


    path1 = new Bezier<Vector2>(controlPoints);


    sr = new ShapeRenderer();
    sr.setAutoShapeType(true);
}




@Override
public void render () {
    Gdx.gl.glClearColor(0f, 0f, 0f, 0f);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    sr.begin();
    sr.setColor(Color.WHITE);

    //draw path1
    for(int i = 0; i < 100; ++i){
        float t = i /100f;
        // create vectors to store start and end points of this section of the curve
        Vector2 st = new Vector2();
        Vector2 end = new Vector2();
        // get the start point of this curve section
        path1.valueAt(st,t);
        // get the next start point(this point's end)
        path1.valueAt(end, t-0.01f);
        // draw the curve
        sr.line(st.x, st.y, end.x, end.y);

    }



    sr.end();
}

@Override
public void dispose () {
}

}

I can draw a rectangle and a line using gradient color by these two following method

shapeRenderer.filledRect(x, y, width, height, lightBlue, lightBlue, darkBlue, darkBlue);

and

shapeRenderer.line(x, y, x2, y2, Color.RED, Color.GREEN);

But i need to draw a curve using gradient color and i have searched a lot and haven't found any solution yet.

So please help me.

Solution

  • You can find color for every section using linear interpolation between start and end colors. Like this:

    Color color = new Color();

@Override
public void render() {
    Gdx.gl.glClearColor(0f, 0f, 0f, 0f);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    sr.begin();

    Color startColor = Color.YELLOW;
    Color endColor = Color.RED;

    //draw path1
    for (int i = 0; i < 100; ++i) {
        float t = i / 100f;
        //interpolate linearly between start and end colors
        sr.setColor(color
                .set(startColor)
                .lerp(endColor, t)
        );
        // create vectors to store start and end points of this section of the curve
        Vector2 st = new Vector2();
        Vector2 end = new Vector2();
        // get the start point of this curve section
        path1.valueAt(st, t);
        // get the next start point(this point's end)
        path1.valueAt(end, t - 0.01f);
        // draw the curve
        sr.line(st.x, st.y, end.x, end.y);
    }

    sr.end();
}