Sunday, September 15, 2024

Sierpinki Gasket in an Android App

This project is a modification of an existing app I created earlier.

~TLDR: clone the repo https://github.com/bmkamath2000/mukBoApps and open in android studio to run. 

Upon creating an android project in android studio there was a MainActivity.java automatically created in the src folder.

I instinctively guessed that I needed to declare a MyGLSurfaceView which extends a GLSurfaceView.

My guess turned true as I got a surface in the app when I created a run configuration and

launched the app using it.

I had some experience with rudimentary android app development over several years in the past.

package com.example.mukesh.seirpinskigasketandroid;

import android.opengl.GLSurfaceView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import java.lang.Runnable;

public class MainActivity extends AppCompatActivity {
    private MyGLSurfaceView mGLView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mGLView = new MyGLSurfaceView(this);
        setContentView(mGLView);
    }
}

As you can see onCreate of the MainActivity the view is set as content view.

In MyGLSurfaceView

I created a MyGLRenderer instance which is derived from GLSurfaceView.Renderer.

package com.example.mukesh.seirpinskigasketandroid;

import android.content.Context;
import android.opengl.GLSurfaceView;
import android.view.MotionEvent;
import android.view.KeyEvent;

public class MyGLSurfaceView extends GLSurfaceView {
    private final MyGLRenderer mRenderer;
    //variable for storing the time of first click
    long startTime;
    public MyGLSurfaceView(Context context) {
        super(context);

        // Create an OpenGL ES 2.0 context
        setEGLContextClientVersion(2);

        mRenderer = new MyGLRenderer();

        // Set the Renderer for drawing on the GLSurfaceView
        setRenderer(mRenderer);
        // Render the view only when there is a change in the drawing data
        setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);
    }
    @Override
    public boolean onTouchEvent(MotionEvent e) {
        // MotionEvent reports input details from the touch screen
        // and other input controls. In this case, you are only
        // interested in events where the touch position changed.

        //constant for defining the time duration between the click that can be
        //considered as double-tap
        final int MAX_DURATION = 200;

        if (e.getAction() == MotionEvent.ACTION_DOWN) {

            startTime = System.currentTimeMillis();
        }
        else if (e.getAction() == MotionEvent.ACTION_UP) {

            if(System.currentTimeMillis() - startTime >= MAX_DURATION)
            {
                //DOUBLE TAP
                mRenderer.mTriangle.n++;
                requestRender();
            }
            else {
                //SINGLE TAP
                if(mRenderer.mTriangle.n>0) {
                    mRenderer.mTriangle.n--;
                    requestRender();
                }
            }
        }
        return true;
    }
}

The MyGLRenderer declares a Triangle and draws it onDrawFrame.

package com.example.mukesh.seirpinskigasketandroid;

import android.opengl.GLES20;
import android.opengl.GLSurfaceView;


import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

public class MyGLRenderer implements GLSurfaceView.Renderer {
    public Triangle mTriangle;
    @Override
    public void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        // initialize a triangle
        mTriangle = new Triangle();
        // initialize a square
    }

    @Override
    public void onSurfaceChanged(GL10 gl10, int width, int height) {
        GLES20.glViewport(0, 0, width, height);
    }

    @Override
    public void onDrawFrame(GL10 gl10) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        mTriangle.draw();
    }
    public static int loadShader(int type, String shaderCode){

        // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
        // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
        int shader = GLES20.glCreateShader(type);

        // add the source code to the shader and compile it
        GLES20.glShaderSource(shader, shaderCode);
        GLES20.glCompileShader(shader);

        return shader;
    }
}

I have Created the Triangle class which is based on the android official site:

https://developer.android.com/develop/ui/views/graphics/opengl/draw

package com.example.mukesh.seirpinskigasketandroid;

import android.opengl.GLES20;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

public class Triangle {
    private final int mProgram;
    private FloatBuffer vertexBuffer;

    // number of coordinates per vertex in this array
    static final int COORDS_PER_VERTEX = 3;
    static float triangleCoords[] = {   // in counterclockwise order:
            0.0f,  0.622008459f, 0.0f, // top
            -0.5f, -0.311004243f, 0.0f, // bottom left
            0.5f, -0.311004243f, 0.0f  // bottom right
    };
    float v[][]={{-1.0f,-0.5f,0.0f},{1.0f,-0.5f,0.0f},
            {0.0f,1.0f,0.0f}};
    float colors[][]={{1.0f,0.0f,0.0f},{0.0f,1.0f,0.0f},{0.0f,0.0f,1.0f},
    {0.0f,0.0f,0.0f}};
    public int n=4, prevn=0;
    int vc1=0;
    // Set color with red, green, blue and alpha (opacity) values
    float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };

    public Triangle() {
        // create empty OpenGL ES Program
        mProgram = GLES20.glCreateProgram();
    }
    void triangle(FloatBuffer fb,float a[],float b[],float c[])
    {
        fb.put(a);
        fb.put(b);
        fb.put(c);
        vc1+=3;
    }
    public int findnoofnodes(int nt)
    {
        if(nt<=1)
            return 3;
        else return ((findnoofnodes(nt-1) * 3) - 3);
    }


    void divide_tetra(FloatBuffer fb,float a[],float b[],float c[],int m)
    {
        float v1[]=new float[3],v2[]=new float[3],v3[]=new float[3];
        int j;
        if(m>0)
        {    /*compute three midpoints*/
            for(j=0;j<3;j++)
                v1[j]=(a[j]+b[j])/2;

            for(j=0;j<3;j++)
                v2[j]=(a[j]+c[j])/2;

            for(j=0;j<3;j++)
                v3[j]=(c[j]+b[j])/2;

            divide_tetra(fb,a,v2,v1,m-1);
            divide_tetra(fb,c,v3,v2,m-1);
            divide_tetra(fb,b,v1,v3,m-1);

        }
        else
            triangle(fb, a, b, c);      //draw triangle at end of recursion//
    }


    private final String vertexShaderCode =
            "attribute vec4 vPosition;" +
                    "void main() {" +
                    "  gl_Position = vPosition;" +
                    "}";

    private final String fragmentShaderCode =
            "precision mediump float;" +
                    "uniform vec4 vColor;" +
                    "void main() {" +
                    "  gl_FragColor = vColor;" +
                    "}";
    private int mPositionHandle;
    private int mColorHandle;

    private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
    private final int vertexStride = COORDS_PER_VERTEX *4; // 4 bytes per vertex
    public void PopulateVBO()
    {
        final int nodesN = findnoofnodes(n+2);
        // initialize vertex byte buffer for shape coordinates
        ByteBuffer bb = ByteBuffer.allocateDirect(
                // (number of coordinate values * 4 bytes per float)
                (nodesN* 16 ) +100
                //90000
        );
        // use the device hardware's native byte order
        bb.order(ByteOrder.nativeOrder());

        // create a floating point buffer from the ByteBuffer
        vertexBuffer = bb.asFloatBuffer();
        // add the coordinates to the FloatBuffer
        //vertexBuffer.put(triangleCoords);
        // set the buffer to read the first coordinate
        vc1=0;
        divide_tetra(vertexBuffer,v[0],v[1],v[2],n);
        System.out.println("Length of VB"+ vertexBuffer.capacity()+ "VC1"+vc1);
        vertexBuffer.position(0);
        int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
                vertexShaderCode);
        int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,
                fragmentShaderCode);

        // add the vertex shader to program
        GLES20.glAttachShader(mProgram, vertexShader);

        // add the fragment shader to program
        GLES20.glAttachShader(mProgram, fragmentShader);

        // creates OpenGL ES program executables
        GLES20.glLinkProgram(mProgram);
    }
    public void draw() {
        if(prevn != n && n > 0)
        {
            prevn = n;
            PopulateVBO();
        }
        // Add program to OpenGL ES environment
        GLES20.glUseProgram(mProgram);

        // get handle to vertex shader's vPosition member
        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

        // Enable a handle to the triangle vertices
        GLES20.glEnableVertexAttribArray(mPositionHandle);

        // Prepare the triangle coordinate data
        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false,
                vertexStride, vertexBuffer);

        // get handle to fragment shader's vColor member
        mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

        // Set color for drawing the triangle
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);

        // Draw the triangle
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0,vc1);

        // Disable vertex array
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }
}

The triangle is subdivided and on single or delayed click the number of triangles

triples or divides by a factor of 3.


Here is how it looks:



Thanks

No comments:

Post a Comment