How to draw smooth moving curve in libgdx?

Question

i need to draw curve like this picture, I have tried from this link https://github.com/libgdx/libgdx/wiki/Path-interface-&-Splines , but the curve is not so smooth like some game(Amazing Wire) which is already in the market.

Answer 1

You can use a bezier or catmullromsplie to draw curves based on supplied points.

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.math.Bezier;
import com.badlogic.gdx.math.CatmullRomSpline;
import com.badlogic.gdx.math.Vector2;

public class Test extends ApplicationAdapter{

    //create paths
    private Bezier<Vector2> path1; 
    private CatmullRomSpline<Vector2> path2;
    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;
        }

        // set up the curves
        path1 = new Bezier<Vector2>(controlPoints);
        path2 = new CatmullRomSpline<Vector2>(controlPoints, true);

        // setup ShapeRenderer
        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);

        }

        //same as above but for catmullrom
        sr.setColor(Color.RED);
        for(int i = 0; i < 100; ++i){
            float t = i /100f;
            Vector2 st = new Vector2();
            Vector2 end = new Vector2();
            path2.valueAt(st,t);
            path2.valueAt(end, t-0.01f);
            sr.line(st.x, st.y, end.x, end.y);

        }

        sr.end();
    }

    @Override
    public void dispose () {
    }
}

EDIT: If the lines are still not smooth enough then you could try using anti-aliasing. You can enable it in libgdx by adding the following lines to your appropriate launcher

Android:

config.numSamples =2; // number of sample to take more = smoother

Desktop:

config.samples =2; // number of sample to take

This gives me this line