4
\$\begingroup\$

I am new to OpenGL ES and facing a hard time drawing a circle on my GLSurfaceView. Here's what I have so far.

The circle class

public class MyGLBall {

private int points=40;
private float vertices[]={0.0f,0.0f,0.0f};
private FloatBuffer vertBuff;


//centre of circle

public MyGLBall(){

    vertices=new float[(points+1)*3];
    for(int i=3;i<(points+1)*3;i+=3){
      double rad=(i*360/points*3)*(3.14/180);
      vertices[i]=(float)Math.cos(rad);
      vertices[i+1]=(float) Math.sin(rad);
      vertices[i+2]=0;
    }     
      ByteBuffer bBuff=ByteBuffer.allocateDirect(vertices.length*4);    
      bBuff.order(ByteOrder.nativeOrder());
      vertBuff=bBuff.asFloatBuffer();
      vertBuff.put(vertices);
      vertBuff.position(0);


}

public void draw(GL10 gl){
    gl.glPushMatrix();
    gl.glTranslatef(0, 0, 0);
//  gl.glScalef(size, size, 1.0f);
    gl.glColor4f(1.0f,1.0f,1.0f, 1.0f); 
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertBuff);
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, points/2);
    gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glPopMatrix();
 }  

 }

I couldn't retrieve the screenshot of my image but here's what it looks like enter image description here

As you can see the border has crests and troughs thereby rendering it squiggly, which I do not want. All I want is a simple curve.

\$\endgroup\$
  • \$\begingroup\$ what you probably want to do is use a texture, that way you only have to use a couple vertices. \$\endgroup\$ – Ryan Mar 27 '12 at 6:35
  • \$\begingroup\$ thanks. Can you elaborate the solution as an answer? I could really use some guidance here. \$\endgroup\$ – ladiesMan217 Mar 27 '12 at 6:37
  • \$\begingroup\$ "fix my code" problems are generally not liked around here. i'd suggest you search google for some tutorials on OpenGL or OpenGL ES. At the very least, tell us what you know to be wrong with your code. \$\endgroup\$ – notlesh Mar 27 '12 at 6:47
  • \$\begingroup\$ @stephelton Updated my answer. I couldn't retrieve the image but the border of the circle is squiggly just like that of the above. \$\endgroup\$ – ladiesMan217 Mar 27 '12 at 7:07
  • \$\begingroup\$ You should clarify that otherwise people are likely to think that is somehow rendered and/or be confused. \$\endgroup\$ – notlesh Mar 27 '12 at 7:25
4
\$\begingroup\$

I can't imagine how your code would produce the image you linked. I could however, imagine how it might produce an image like this:

enter image description here

With flat sides. So really what you want to do is increase the number of sides. Try setting:

private int points=40;

to something larger like

private int points=360;

If you wanted a loop like your image instead of a circle you can do something like this:

public float[] DrawLoop(float centerX, float centerY, float sides, float innerRadius, float outerRadius) {
    float[] vertices = new float[(sides+1)*4];
    for (int i = 0; i <= sides; i+=4) {
        verticies[i+0] = centerX + (sin(toRadians(360f * (i / sides))) * innerRadius);
        verticies[i+1] = centerY - (cos(toRadians(360f * (i / sides))) * innerRadius);
        verticies[i+2] = centerX + (sin(toRadians(360f * (i / sides))) * outerRadius);
        verticies[i+3] = centerY - (cos(toRadians(360f * (i / sides))) * outerRadius);
    }
    return vertices;
}
\$\endgroup\$
3
\$\begingroup\$

I believe there's a bug in your code in this line:

double rad=(i*360/points*3)*(3.14/180);

... which would cause the kind of error you described.

I think the line should look like this instead:

double rad=(i*360/(points*3))*(3.14/180);

Note the parentheses () around points*3

If you fix your code, I believe your output will no longer be 'squiggly'.

\$\endgroup\$
0
\$\begingroup\$

To draw circle, one can make use of the code snippet below:

 public Circle() {
   int c=0;

   int n_seg=360; // number of segments 
   float[] vertices = new float[n_seg*2+2];
    for (int i=0; i<n_seg;i++){         
       float radius=2.0f ; // circle radius unit
        double rad=(Math.PI*2*i/n_seg);
        vertices[c]=(float)Math.cos(rad)*radius;
        vertices[c+1]=(float) Math.sin(rad)*radius;
        c+=2;            
    }

// Setup vertex-array buffer. Vertices in float. An float has 4 bytes
    ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
    vbb.order(ByteOrder.nativeOrder()); // Use native byte order
    vertexBuffer = vbb.asFloatBuffer(); // Convert from byte to float
    vertexBuffer.put(vertices);         // Copy data into buffer
    vertexBuffer.position(0);           // Rewind

public void draw(GL10 gl) {     
    gl.glFrontFace(GL10.GL_CCW);  // Front face in counter-clockwise orientation
    gl.glTranslatef(0,0,0);

    // Enable arrays and define their buffers
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glVertexPointer(2, GL10.GL_FLOAT, 0, vertexBuffer);

    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

    gl.glColor4f(1.0f,0.0f,0.0f, 1.0f);
    gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,0,vertices.length/2);

    gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.