Membuat Garis dengan Titik
Membuat Garis dengan Titik - Primitives Object
===
2.3 Membuat Garis dengan Titik
Logika pembentukannya adalah membuat garis lurus dari dua buah titik, misal (x 1 ,y 1 ) dan (x 2 ,y 2 ) yang kemudian digunakan untuk membentuk persamaan garis lurus, y=mx+c. Adapun penghitungan gradient adalah
m = (y 2 -y 1 )/(x 2 -x 1 )
Setelah mendapatkan nilai m, maka dengan menggunakan persamaan
y-y 1 = m(x-x 1 ) akan didapatkan persamaan garis lurusnya. Dari setiap nilai x dan y
akan dipasangkan menjadi satu titik dalam vertex untuk menyusun garis secara berurutan. Dari segitiga pada Gambar 2.5, untuk sisi yang miring dibentuk dengan titik-titik dan warna yang ditampung da- lam array 2D menggunakan potongan script
“float m = (y2-y1)/(x2-x1); // count gradient for(x=x1;x<=x2;x+=step_loop){ // Generate (x,y,z) for vertex vert..points[loop_line] = .. (x); // as x vert..points[loop_line+1] = .. (m*(x-x1)+y1); // as y vert..points[loop_line+2]=0; // as z loop_line+=3;
//Generate color (r,g,b,a) for each vertex vert..color[loop_line_color]=.. abs(sin(x)); vert..color[loop_line_color+1]=.. abs(cos((m * (x - x1) + y1))); vert..color[loop_line_color+2]=0.0f; vert..color[loop_line_color+3]=1.0f; loop_line_color+=4;
}” Dimana “vet..point” menyatakan “vertices_line_with_points” dan
“vert..color” menyatakan “vertices_line_with_points_color” yang keduanya diinisialisasi dengan
“private float vertices_line_with_points[]=null; private float vertices_line_with_points_color[] = null;”
dengan step_loop=0.001f; dan memiliki ukuran 2 kali defult size. Nilai 2 tersebut merupakan “array_factor=2.0f” yang digunakan
untuk menghidari ukuran array yang dipesan di memory kurang dari array yang dibutuhkan setelah degenerate titik-titiknya. Sehingga lebih baik dibuat lebih yaitu dengan mengalikan 2 kali default size-nya. Script untuk ukuran masing-masing array tersebut adalah
“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”
Gambar 2.5 Membuat garis dengan GL_POINTS Untuk melakukan “tracking log.v” pada Eclipse, misal ketik “val-
ue Math.abs((x2 - x1))” sebagai mana kata yang ada pada Log.v("value Math.abs((x2 - x1)) / step_loop)", "" + (Math.abs((x2 - x1)) / step_loop));
Gambar 2.6 Log.v("value Math.abs((..
Gambar 2.7 Tracking log.v (logcat)
Source Code 2.3 Code Membuat Garis dengan Titik (Solid) ESRender.java
package com.example.imacho.createlinewithpoints;
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/5/2015. */
public class ESRender implements Renderer {
private Line_With_Points linewithpoints; // the ob- ject to be drawn
/** Constructor to set the handed over context */ public ESRender() {
this.linewithpoints = new Line_With_Points(); }
@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 lines with gl_lines gl.glPushMatrix();
// start freeze state/event to each object
gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glLineWidth(4); // set size of line gl.glEnable(GL10.GL_LINE_SMOOTH); linewithpoints.draw_lines_with_gl_lines(gl);
gl.glPopMatrix(); // end freeze state/event to each object
// display drawing create line with points gl.glPushMatrix();
gl.glTranslatef(0.0f, 0.0f, -5.0f); gl.glPointSize(3); // set size of points gl.glEnable(GL10.GL_POINT_SMOOTH); linewith-
points.draw_line_with_points_color(gl); gl.glPopMatrix(); }
@Override public void onSurfaceChanged(GL10 gl, int width, int
height) { height) {
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) {
linewithpoints = new Line_With_Points();
MainActivity.java
package com.example.imacho.createlinewithpoints;
import android.app.Activity; import android.opengl.GLSurfaceView; import android.os.Bundle; import android.view.Menu; import android.view.Window; import android.view.WindowManager;
/** * Created by Imacho on 4/5/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 requestWindowFeature(Window.FEATURE_NO_TITLE);
// making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREE
N, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);
// Initiate the Open GL view and create an in- stance 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. getMenuInflat- er().inflate(R.menu.menu_main, menu); return true; } }
Line_With_Points.java
package com.example.imacho.createlinewithpoints;
import android.util.Log; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10;
/** * Created by Imacho on 4/5/2015. */
public class Line_With_Points { public class Line_With_Points {
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 Line_With_Points() {
// ============ 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
float m = (y2-y1)/(x2-x1); // count gradient for(x=x1;x<=x2;x+=step_loop){
vertices_line_with_points[loop_line] = (float) (x); // as x value vertices_line_with_points[loop_line+1] = (float) (m*(x-x1)+y1); // as y value vertices_line_with_points[loop_line+2]=0; // as z value, z=0 is to assume that the object is on 2D loop_line+=3;
//Generate color for each vertex verti-
ces_line_with_points_color[loop_line_color]=(float) Math.abs(Math.sin(x)); // Red Channel
verti- ces_line_with_points_color[loop_line_color+1]=(float) Math.abs(Math.cos((m * (x - x1) + y1))); // Green Chan- nel
verti- ces_line_with_points_color[loop_line_color+2]=0.0f; // Blue Channel
verti- ces_line_with_points_color[loop_line_color+3]=1.0f; // set transparant value (alpha)
loop_line_color+=4; }
/* x=x1; while(x<=x2){
vertices_line_with_points[loop_line] = (float) (x); // as x value vertices_line_with_points[loop_line+1] =
(float) (m*(x-x1)+y1); // as y value vertices_line_with_points[loop_line+2]=0; // as z value, z=0 is to assume that the object is on 2D loop_line+=3;
//Generate color for each vertex verti-
ces_line_with_points_color[loop_line_color]=(float) Math.abs(Math.sin(x)); // Red Channel
verti- ces_line_with_points_color[loop_line_color+1]=(float) Math.abs(Math.cos((m*(x-x1)+y1))); // Green Channel
verti- ces_line_with_points_color[loop_line_color+2]=0.0f; // Blue Channel
verti- ces_line_with_points_color[loop_line_color+3]=1.0f; // set transparant value (alpha)
loop_line_color+=4;
x+=step_loop; } */
// ============= 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 = 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_lines_with_gl_lines(GL10 gl){
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// set the global colour for the line //gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
// Set/ mapping the colour for each line /*gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] { 0.0f, 0.0f, 1.0f, 1.0f, // first color (r,g,b,a) 0.0f, 0.0f, 1.0f, 1.0f, // second col- or (r,g,b,a) 0.0f, 1.0f, 0.0f, 1.0f, // third color (r,g,b,a)
// fourth color (r,g,b,a) }));*/
0.0f, 1.0f, 0.0f, 1.0f
// Set/ mapping the colour for each line (half) gl.glColorPointer(4, GL10.GL_FLOAT, 0, make-
FloatBuffer(new float [] { 0.0f, 0.0f, 1.0f, 1.0f, // first color (r,g,b,a) 0.0f, 1.0f, 0.0f, 1.0f, // second col- or (r,g,b,a) 0.0f, 0.0f, 1.0f, 1.0f, // third color (r,g,b,a)
// fourth color (r,g,b,a) }));
0.0f, 1.0f, 0.0f, 1.0f
// Point to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0,
makeFloatBuffer(new float [] { -1.0f, -1.0f, 0.0f, // V1 - first vertex (x,y,z) 1.0f, -1.0f, 0.0f,
// V2 - second vertex 1.0f, -1.0f, 0.0f, // V3 - third ver- tex (x,y,z) 1.0f, 1.0f, 0.0f
// V4 - fourth ver- tex }));
// Draw the vertices as lines gl.glDrawArrays(GL10.GL_LINES, 0, 4);
//Disable the client state before leaving
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisableClientState(GL10.GL_COLOR_ARRAY); }
public void draw_line_with_points_color(GL10 gl) {
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
// Lish all points to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make-
FloatBuffer(vertices_line_with_points));
// Set/ mapping the colour for the line each vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, make- FloatBuffer(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
// or //gl.glDrawArrays(GL10.GL_POINTS, 0, (int)
(loop_line_color / 4)); // 4 is number of channel color r,g,b,a
/////////////////////////////////////////// // end draw with exact length of array // ///////////////////////////////////////////
/////////////////////////////////////////////// // start draw with not exact length of array // /////////////////////////////////////////////// //gl.glDrawArrays(GL10.GL_POINTS, 0, (int)
(Math.abs((x2 - x1)) / step_loop)); // or //gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (ver-
tices_line_with_points.length/(array_factor*3))); // 3 is number of dimension x,y,z
// or //gl.glDrawArrays(GL10.GL_POINTS, 0, (int) (ver-
tices_line_with_points_color.length/(array_factor*4))); // 3 is number of dimension x,y,z
/////////////////////////////////////////////// // end draw with not exact length of array // ///////////////////////////////////////////////
// to tracking log.v // try type like this "tag:value.loop_" without
quotes on search "verbose". // or // "value loop_line" 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) (vertices_line_with_points.length / (array_factor * 3)));
Log.v("value verti- ces_line_with_points_color.length", "" + verti- ces_line_with_points_color.length);
Log.v("value verti- ces_line_with_points_color.length/(array_factor*4)", "" + (int) (vertices_line_with_points_color.length / (ar- ray_factor * 4)));
//Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
Source Code 2.4 Code Lain Membuat Garis dengan Titik 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();
// display drawing create line with points gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, -5.0f); // set size of points gl.glPointSize(3); gl.glEnable(GL10.GL_POINT_SMOOTH); point_n_linesobject.draw_line_with_points_color(gl); gl.glPopMatrix();
@Override public void onSurfaceChanged(GL10 gl, int width, int height) {
if (height == 0) // To prevent divide by zero height = 1; if (height == 0) // To prevent divide by zero height = 1;
@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.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager;
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 // Initiate the Open GL view and create an instance
// 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 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;
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- ces_line_with_points_color[loop_line_color]=(float) Math.abs(Math.sin(x)); // Green Channel verti- ces_line_with_points_color[loop_line_color+1]=(float ) Math.abs(Math.cos((m*(x-x1)+y1))); // Blue Channel verti- ces_line_with_points_color[loop_line_color+2]=0.0f; // set transparant value (alpha) verti- ces_line_with_points_color[loop_line_color+3]=1.0f; loop_line_color+=4;
} // ============= 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- ces_line_with_points_color.length/(array_factor*4)", ""+(int) (verti- ces_line_with_points_color.length/(array_factor*4)));
//Disable the client state before leaving gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
Gambar 2.8 Membuat Garis dan Titik