Finger paint with quads: how to avoid strange blinking

Question

I'm trying to implement finger paint app via GLSurfaceView.

But quads are blinking so much, that I'm obliged to repaint them several times (see onTouchEvent in PaintGL class). It seems that I'm drawing on different frame buffers, but i dunno how to switch between them or disable them to avoid this nasty blinking.

Here is my Renderer:

public class PaintRenderer implements GLSurfaceView.Renderer 
{

    private FloatBuffer vertexBuffer;
    public ArrayList<HardPoint> l;
    public boolean isPressed = false;

    public PaintRenderer()
    {
        super ();
        l = new ArrayList<HardPoint>();
    }

    public void onDrawFrame(GL10 gl) 
    {

        ArrayList<HardPoint> n;
        int count;

        synchronized (l) 
        {
            n = (ArrayList<HardPoint>) l.clone();
        }

        if (n.size() == 0)
            return;

        n.add(n.get(n.size() - 1));

        for (int i = 1; i < n.size(); i++) {

            HardPoint start = n.get(i-1);
            HardPoint end = n.get(i);

            if (!end.isPressed)
                continue;

            float dx = end.x - start.x;
            float dy = end.y - start.y;

            count = (int) Math.ceil(Math.max(Math.sqrt(dx * dx + dy * dy), 1));

            for (int j = 0; j < count; j++) 
            {
                drawQuad(gl, new PointF(start.x + dx * (float)j/count , start.y + dy * (float)j/count), 40.0f);
            }

        }

    }

    public void onSurfaceChanged(GL10 gl, int width, int height) 
    {
        gl.glViewport(0, 0, width, height);

        gl.glMatrixMode(GL10.GL_PROJECTION);
        gl.glLoadIdentity();
        gl.glOrthof(0.0f, width, 0.0f, height, -1.0f, 1.0f);

        gl.glMatrixMode(GL10.GL_MODELVIEW);

        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glDisable(GL10.GL_DEPTH_TEST);

    }

    public void onSurfaceCreated(GL10 gl, EGLConfig config) 
    {
    }

    public void drawQuad(GL10 gl_main, PointF center, float side)
    {
        int VERTEX_COUNT = 4;
        float vertices[] = 
            {
                // Вершины квадрата
                  center.x - side/2, center.y + side/2,  // 0. левая нижняя
                  center.x + side/2, center.y + side/2,  // 1. правая нижняя
                  center.x - side/2, center.y - side/2,  // 2. левая верхняя
                  center.x + side/2, center.y - side/2,   // 3. правая верхняя
            };

        ByteBuffer vbb = ByteBuffer.allocateDirect(VERTEX_COUNT * 3 * 4);
        vbb.order(ByteOrder.nativeOrder());
        vertexBuffer = vbb.asFloatBuffer();

        vertexBuffer.put(vertices);

        vertexBuffer.position(0);

        gl_main.glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
        gl_main.glVertexPointer(2, GL10.GL_FLOAT, 0, vertexBuffer);

        gl_main.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

    }

}

And here is my GLSurfaceView class:

public class PaintGL extends GLSurfaceView
{

    private Context mContext;
    private PaintRenderer renderer;
    private PointF prev_loc, cur_loc;

    public PaintGL(Context context) {
        super(context);
        mContext = context;
        renderer = new PaintRenderer();
        setRenderer(renderer);
        setRenderMode(RENDERMODE_WHEN_DIRTY);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) 
    {
        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            synchronized (renderer.l) 
            {
                renderer.l.add(0, new HardPoint(event.getX(), this.getHeight() - event.getY(), true));
            }
        }
        if (event.getAction() == MotionEvent.ACTION_MOVE || event.getAction() == MotionEvent.ACTION_UP)
        {
            //FIXME Мерцание первого quad'a при достаточно большом количестве точек
            int count = 10;
            synchronized (renderer.l) {
                renderer.l.add(0, new HardPoint(event.getX(), this.getHeight() - event.getY(), 
                        event.getAction() == MotionEvent.ACTION_UP ? false : true));
                while (renderer.l.size() > count)
                {
                    renderer.l.remove(count);
                }
            }
            requestRender();
            Log.d("x", renderer.l.size()+" ");
        }

        return true;
    }

}

And HardPoint class:

public class HardPoint extends PointF 
{
    boolean isPressed;

    public HardPoint() 
    {
        isPressed = false;
    }

    public HardPoint (float x, float y, boolean pressed)
    {
        super(x, y);
        isPressed = pressed;
    }

}

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Some points:

See Designing for Performance:

There are two basic rules for writing efficient code:

Don't do work that you don't need to do.

Don't allocate memory if you can avoid it.

ArrayList.clone creates a shallow copy. You'd've to add code for a deep copy or use a library like cloning.
Get rid of the synchronization between the UI- and the Renderthread on the single list. Use a second list where the UI-Thread just adds HardPoint instances (synchronized). At the beginning of onDrawFrame, transfer the HardPoint instances to the "render" list (synchronized). Then, you can limit the size of the list. This eliminates the clone.
Instead of creating the quad geometry each time anew, create it once, and translate it to the correct position.
To eliminate the creation of the HardPoint instances, you could apply a Pool (here's the AndEngine one) pre-allocates the instances.

Finger paint with quads: how to avoid strange blinking

1 Answers1