Membuat Titik
Membuat Titik - Primitives Object
===
2.2 Membuat Titik
Dalam membuat titik, disini kita dapat menggunakan “gl.glDrawArrays(GL10.GL_POINTS, 0, 21);”, dimana “0” merupakan start index dan “21” merupakan banyaknya titik yang akan di-plot. Misalnya kita ingin membuat titik secara manual, maka kita cukup memanggil perintah
“gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuff- er(new float [ ] {
x 1 ,y 1 ,z 1 , // titik ke-1 x 2 ,y 2 ,z 2 , // titik ke-2
…. , x 21 ,y 21 ,z 21 // titik ke-21 }));” Pada glVertexPointer, nilai “3” menyatakan besarnya dimensi
dari titik vertex, sedangkan “0” menyatakan nilai start index. Artinya anda ingin menampilkan titik mulai dari index ke-0. GL_FLOAT, kare- na memang tipe data pada titik-titiknya adalah float, sedangkan “makeFloatBuffer” digunakan untuk membangun vertex buffer dari titik vertices yang sudah dimasukkan oleh user.
Kemudian script untuk mengenerate titik-titik secara otomatis menggunakan persamaan garis lurus dengan ukuran titik yang berva- riasi dan step_loop “0.2” dapat dilakukan dengan cara berikut.
“float size_point=1; for(x=x1;x<=x2;x+=step_loop) { “float size_point=1; for(x=x1;x<=x2;x+=step_loop) {
gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glEnable(GL10.GL_POINT_SMOOTH); gl.glPointSize(size_point); size_point+=1; points_object.draw_points2(gl,coord_x,coord_y,coord_z);
gl.glPopMatrix(); }” Hasil ketika kode tersebut dijalankan, maka akan 21 titik yang
diset manual dan beberapa titik pada arah sisi miring yang memiliki ukuran dinamis.
Gambar 2.3 Titik manual dan generate Source Code 2.1 Code Membuat Titik (Ukuran Dinamis)
ESRender.java
package com.example.introduction_to_opengl_es;
import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU; import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;
/** * Created by Imacho on 4/4/2015. */
public class ESRender implements Renderer {
private Create_Points points_object; // the ob- ject to be drawn private float coord_x,coord_y,coord_z; float x,y; float step_loop=0.2f; float x1,y1; float x2,y2; float m;
//private int loop_line,loop_line_color;
/** Constructor to set the handed over context */ public ESRender() {
this.points_object = new Create_Points();
// ============ set parameter to generate verti- ces to create dynamic point ========================== x1 = -1.0f; y1 = -1.0f; x2= 1.0f; y2 = 1.0f; m = (y2-y1)/(x2-x1); // count gradient
@Override public void onDrawFrame(GL10 gl) {
gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set background with white color //gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // set background with black color
gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // clear Screen and Depth Buffer
// display drawing points gl.glPushMatrix();
// start freeze state/event to each object gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glPointSize(3); gl.glEnable(GL10.GL_POINT_SMOOTH); points_object.draw_points(gl);
gl.glPopMatrix(); // end freeze state/event to each object
// display drawing points with dynamic size float size_point=1; for(x=x1;x<=x2;x+=step_loop) {
coord_x=(float) (x); coord_y=(float) (m * (x - x1) + y1); coord_z=0.0f; gl.glPushMatrix();
// start freeze state/event to each object gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glEnable(GL10.GL_POINT_SMOOTH); gl.glPointSize(size_point); // start freeze state/event to each object gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glEnable(GL10.GL_POINT_SMOOTH); gl.glPointSize(size_point);
points_object.draw_points2(gl,coord_x,coord_y,coord_z);
gl.glPopMatrix(); // end freeze state/event to each object } }
@Override public void onSurfaceChanged(GL10 gl, int width, int
height) { if (height == 0) height = 1; // To prevent divide by zero float aspect = (float) width / height; // Set the viewport (display area) to cover the
entire window gl.glViewport(0, 0, width, height); // Setup perspective projection, with aspect ra-
tio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix // Use perspective projection GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f); gl.glMatrixMode(GL10.GL_MODELVIEW); // Select
model-view matrix gl.glLoadIdentity(); // Reset }
@Override public void onSurfaceCreated(GL10 gl, EGLConfig con-
fig) { points_object = new Create_Points(); } }
MainActivity.java
package com.example.introduction_to_opengl_es;
//import javax.microedition.khronos.egl.EGLConfig; //import javax.microedition.khronos.opengles.GL10; import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Window; import android.view.WindowManager;
/** * Created by Imacho on 4/4/2015.
public class MainActivity extends Activity {
/** The OpenGL View */ private GLSurfaceView glSurfaceView;
@Override protected void onCreate(Bundle savedInstanceS-
tate) { super.onCreate(savedInstanceState);
// requesting to turn the title OFF requestWindowFea-
ture(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC REEN,
WindowManag- er.LayoutParams.FLAG_FULLSCREEN);
glSurfaceView = new GLSurfaceView(this); glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView);
//setContentView(R.layout.activity_main); }
/** * Remember to resume the glSurface */
@Override protected void onResume() {
super.onResume(); glSurfaceView.onResume();
/** * Also pause the glSurface */
@Override protected void onPause() {
super.onPause(); glSurfaceView.onPause();
Create_Points.java
package com.example.introduction_to_opengl_es;
//import android.util.Log; //import android.util.Log;
/** * Created by Imacho on 4/4/2015. */
public class Create_Points {
/** Constructor */ public Create_Points() {}
// Point to our vertex buffer, return buffer holding the vertices
public static FloatBuffer makeFloatBuffer(float[] arr) { ByteBuffer bb = ByteBuff- er.allocateDirect(arr.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(arr); fb.position(0); return fb;
/** The draw method for the primitive object with the GL context */ public void draw_points(GL10 gl) { gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points gl.glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
// List Point to our vertex buffer with manually gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] { 1.0f, 1.0f, 0.0f,
// V1 - first vertex (x,y,z) 1.0f, 0.8f, 0.0f,
// V2 1.0f, 0.6f, 0.0f,
// V3 1.0f, 0.4f, 0.0f,
// V4 1.0f, 0.2f, 0.0f,
// V5 1.0f, 0.0f, 0.0f,
// V6 1.0f, -0.2f, 0.0f,
// V7 1.0f, -0.4f, 0.0f,
// V8 1.0f, -0.6f, 0.0f,
// V9 1.0f, -0.8f, 0.0f,
// V10 1.0f, -1.0f, 0.0f,
// V11 0.8f, -1.0f, 0.0f,
// V12 0.6f, -1.0f, 0.0f,
// V13 0.4f, -1.0f, 0.0f,
// V14 0.2f, -1.0f, 0.0f,
// V15 0.0f, -1.0f, 0.0f,
// V16 -0.2f, -1.0f, 0.0f, // V17 -0.4f, -1.0f, 0.0f, // V18 -0.6f, -1.0f, 0.0f, // V19 -0.8f, -1.0f, 0.0f, // V20 -1.0f, -1.0f, 0.0f, // V21
// Draw the vertices as points gl.glDrawArrays(GL10.GL_POINTS, 0, 21); // 0 is
start index, 22 is length of list points
//Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
public void draw_points2(GL10 gl,float coord_x,float coord_y,float coord_z) { gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points gl.glColor4f(0.0f, 0.0f,1.0f, 1.0f);
// List Point to our vertex buffer with manually gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] {
// V1 - first vertex (x,y,z) })); // Draw the vertices as points gl.glDrawArrays(GL10.GL_POINTS, 0, 1); // 0 is
coord_x, coord_y,coord_z
start index, 22 is length of list points
//Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
Source Code 2.2 Code Lain Membuat Titik Sederhana ESRender.java
package com.introduction_to_opengl_es;
import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU;
public class ESRender implements Renderer {
// the object to be drawn private Point_n_Lines_with_Points_Object point_n_linesobject;
/** Constructor to set the handed over context */ public ESRender() {
this.point_n_linesobject = new Point_n_Lines_with_Points_Object();
@Override public void onDrawFrame(GL10 gl) {
// set background with white color gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
// clear Screen and Depth Buffer gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
// display drawing points // start freeze state/event to each object gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glPointSize(3); gl.glEnable(GL10.GL_POINT_SMOOTH); point_n_linesobject.draw_points(gl); // end freeze state/event to each object gl.glPopMatrix();
@Override public void onSurfaceChanged(GL10 gl, int width, int height) {
if (height == 0) // To prevent divide by zero height = 1; float aspect = (float) width / height; // Set the viewport (display area) to cover the en- tire window gl.glViewport(0, 0, width, height); // Setup perspective projection, with aspect ratio matches viewport // Select projection matrix gl.glMatrixMode(GL10.GL_PROJECTION); // Reset projection matrix gl.glLoadIdentity(); // Use perspective projection GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f); // Select model-view matrix gl.glMatrixMode(GL10.GL_MODELVIEW); // Reset gl.glLoadIdentity();
@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) {
point_n_linesobject = new Point_n_Lines_with_Points_Object();
MainActivity.java
package com.introduction_to_opengl_es;
import android.opengl.GLSurfaceView; import android.os.Bundle; import android.opengl.GLSurfaceView; import android.os.Bundle;
public class MainActivity extends Activity {
/** The OpenGL view */ private GLSurfaceView glSurfaceView;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE);
// making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC REEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an instance with this activity glSurfaceView = new GLSurfaceView(this);
// set our renderer to be the main renderer with the current activity context
glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView);
/** * Remember to resume the glSurface */ @Override protected void onResume() {
super.onResume(); glSurfaceView.onResume();
/** * Also pause the glSurface */ @Override protected void onPause() {
super.onPause(); glSurfaceView.onPause();
@Override public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true;
Point_n_Lines_Points_Object.java
package com.introduction_to_opengl_es;
import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10;
import android.util.Log;
public class Point_n_Lines_with_Points_Object {
private float vertices_line_with_points[]=null; private float vertices_line_with_points_color[] = null; float x,y; float step_loop=0.001f; float x1,y1; float x2,y2; float array_factor=2.0f; private int loop_line,loop_line_color;
public Point_n_Lines_with_Points_Object() {
// ============ start to generate vertices to create line with point ========================== x1 = -1.0f; y1 = -1.0f; x2= 1.0f; y2 = 1.0f;
loop_line=0; loop_line_color=0;
vertices_line_with_points=new float[(int)(array_factor*(x2-x1)/step_loop)*3]; // 3 is number of dimension x,y,z
vertices_line_with_points_color=new float[(int)(array_factor*(x2-x1)/step_loop)*4]; // 4 is number of channel color r,g,b,a
// count gradient float m = (y2-y1)/(x2-x1); for(x=x1;x<=x2;x+=step_loop){
// as x value vertices_line_with_points[loop_line] = (float) (x); // as y value vertices_line_with_points[loop_line+1] = (float) (m*(x-x1)+y1); // as z value, z=0 is to assume that the object is on 2D vertices_line_with_points[loop_line+2]=0; loop_line+=3;
//Generate color for each vertex // Red Channel verti- //Generate color for each vertex // Red Channel verti-
} // ============= end for generate vertices to create line with point ====================
// Point to our vertex buffer, return buffer holding the vertices public static FloatBuffer makeFloatBuffer(float[] arr) {
ByteBuffer bb = ByteBuffer.allocateDirect(arr.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(arr); fb.position(0); return fb;
/** The draw method for the primitive object with the GL context */ public void draw_points(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// set the global colour for all the points gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
// List Point to our vertex buffer with manually gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloat- Buffer(new float [] {
1.0f, 1.0f, 0.0f, // V1 - first vertex (x,y,z) 1.0f, 0.8f, 0.0f,
// V2
1.0f, 0.6f, 0.0f,
// V3
1.0f, 0.4f, 0.0f,
// V4
1.0f, 0.2f, 0.0f,
// V5
1.0f, 0.0f, 0.0f,
// V6
1.0f, -0.2f, 0.0f,
// V7
1.0f, -0.4f, 0.0f,
// V8
1.0f, -0.6f, 0.0f,
// V9
1.0f, -0.8f, 0.0f, // V10 1.0f, -1.0f, 0.0f,
// V11 0.8f, -1.0f, 0.0f,
// V12 0.6f, -1.0f, 0.0f,
// V13 0.4f, -1.0f, 0.0f,
// V14 0.2f, -1.0f, 0.0f,
// V15 0.0f, -1.0f, 0.0f,
// V16
-0.2f, -1.0f, 0.0f, // V17 -0.4f, -1.0f, 0.0f,
// V18 -0.6f, -1.0f, 0.0f,
// V19 -0.7f, -1.0f, 0.0f,
// V20 -0.8f, -1.0f, 0.0f,
// V21 -1.0f, -1.0f, 0.0f,
// V22 }));
// Draw the vertices as points gl.glDrawArrays(GL10.GL_POINTS, 0, 22); // 0 is start index, 22 is length of list points
//Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
public void draw_line_with_points_color(GL10 gl) { gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// List all points to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloat- Buffer(vertices_line_with_points));
// Set/ mapping the colour for the line each vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuff- er(vertices_line_with_points_color));
// Draw the vertices as lines with points :
/////////////////////////////////////////// // start draw with exact length of array // /////////////////////////////////////////// gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (loop_line / 3)); // 3 is number of dimension x,y,z /////////////////////////////////////////// // end draw with exact length of array // ///////////////////////////////////////////
// to tracking log.v // try type like this "tag:value.loop_" without quotes on search "verbose". Log.v("value loop_line", ""+ loop_line); Log.v("value loop_line/3", ""+ loop_line/3); Log.v("value loop_line_color", ""+ loop_line_color); Log.v("value loop_line_color/4", ""+ loop_line_color/4); Log.v("value Math.abs((x2 - x1)) / step_loop)", ""+ (Math.abs((x2 - x1)) / step_loop)); Log.v("value vertices_line_with_points.length", ""+vertices_line_with_points.length); Log.v("value verti- ces_line_with_points.length/(array_factor*3)", ""+(int) (verti- ces_line_with_points.length/(array_factor*3))); Log.v("value vertices_line_with_points_color.length", ""+vertices_line_with_points_color.length); Log.v("value verti- // to tracking log.v // try type like this "tag:value.loop_" without quotes on search "verbose". Log.v("value loop_line", ""+ loop_line); Log.v("value loop_line/3", ""+ loop_line/3); Log.v("value loop_line_color", ""+ loop_line_color); Log.v("value loop_line_color/4", ""+ loop_line_color/4); Log.v("value Math.abs((x2 - x1)) / step_loop)", ""+ (Math.abs((x2 - x1)) / step_loop)); Log.v("value vertices_line_with_points.length", ""+vertices_line_with_points.length); Log.v("value verti- ces_line_with_points.length/(array_factor*3)", ""+(int) (verti- ces_line_with_points.length/(array_factor*3))); Log.v("value vertices_line_with_points_color.length", ""+vertices_line_with_points_color.length); Log.v("value verti-
//Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
Gambar 2.4 Membuat Titik Sederhana