codeNtronix

HTML5 Canvas Crazy Balls

lefam — Tue, 24 Jan 2012 20:00:48 +0000

A few months ago I developed a small javascript application that renders ‘crazy balls’ in HTML5 canvas. The balls move in random directions, change size and direction at random times. When they hit the borders of the canvas they bounce and eventually change their size. See below the application in action.

Source Code

Find below the source code. The code is pretty simple and self-explanatory. If you have any question or suggestion, please drop a comment.




  HTML5 Canvas Crazy Balls

If you like this article, please click one of the buttons below to share the article.

First Android App: Touch Controlled Cube on Samsung Galaxy S2

lefam — Sat, 08 Oct 2011 15:35:51 +0000

A couple of weeks ago I started to tinker with android programming. After reading some articles in android developers guide I developed my first application. It is a simple application that draws a cube in a 2D canvas. The cube can be controlled with touch input. Below you may see the video of the application in action. I have tested the application on a Samsung Galaxy S2.

The Idea

I have created a custom view by extending the View class. In the custom view I overridden the onDraw() method to draw the cube. I also overridden the onTouchEvent() method to capture touch events.

The Code

CubeView.java:

The CubeView class is the custom view responsible for drawing the cube.

package com.codentronix.android;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Color;
import android.graphics.Paint.Style;
import android.graphics.Path;

public class CubeView extends View {
	/* Vertices of the cube. */
	protected Vector3D vertices[];

	/* Define the indices to the vertices of each face of the cube. */
	protected int faces[][];

	/* Colors of each face of the cube. */
	protected int colors[];

	/* Orientation of the cube around X axis. */
	protected float ax;

	/* Orientation of the cube around Y axis. */
	protected float ay;

	/* Orientation of the cube around Z axis. */
	protected float az;

	protected float lastTouchX;
	protected float lastTouchY;

	/* This constructor is used when the view is created from code. */
	public CubeView(Context context) {
		super(context);
	}

	/* This constructor is used when the view is inflated from a XML file. */
	public CubeView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	/**
	 * Initializes the cube geometry.
	 */
	public void initialize() {
		vertices = new Vector3D[] {
	        new Vector3D(-1, 1, -1),
	        new Vector3D(1, 1, -1),
	        new Vector3D(1, -1, -1),
	        new Vector3D(-1, -1, -1),
	        new Vector3D(-1, 1, 1),
	        new Vector3D(1, 1, 1),
	        new Vector3D(1, -1, 1),
	        new Vector3D(-1, -1, 1)
		};

		// Define the 6 faces of the cube. We specify the indices to the 4 vertices of each face.
		faces = new int[][] {{0, 1, 2, 3}, {1, 5, 6, 2}, {5, 4, 7, 6}, {4, 0, 3, 7}, {0, 4, 5, 1}, {3, 2, 6, 7}};

		// Define the color of each face.
		colors = new int[] {Color.BLUE, Color.RED, Color.YELLOW, Color.LTGRAY, Color.CYAN, Color.MAGENTA};
	}

	@Override
	protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
		super.onLayout(changed, left, top, right, bottom);

		// Initialize the cube geometry.
		initialize();

		// Allow the view to receive touch input.
		setFocusableInTouchMode(true);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if( event.getAction() == MotionEvent.ACTION_DOWN ) {
			lastTouchX = event.getX();
			lastTouchY = event.getY();
		}else if( event.getAction() == MotionEvent.ACTION_MOVE ) {
			float dx = (event.getX() - lastTouchX) / 30.0f;
			float dy = (event.getY() - lastTouchY) / 30.0f;
			ax += dy;
			ay -= dx;
			postInvalidate();
		}
		return true;
	}

	@Override
	protected void onDraw(Canvas canvas) {
		Vector3D t[]  = new Vector3D[8];
		double avgZ[] = new double[6];
		int order[] = new int[6];

		for( int i = 0; i < 8; i++ ) {
			// Rotate the vertex around X, next around Y, and then around Z.
			t[i] = vertices[i].rotateX(ax).rotateY(ay).rotateZ(az);

			// Finally, map the vertex from 3D to 2D.
			t[i] = t[i].project(getWidth(), getHeight(), 256, 4);
		}

		// Compute the average Z value of each face.
		for( int i = 0; i < 6; i++ ) {
			avgZ[i] = (t[faces[i][0]].z + t[faces[i][1]].z + t[faces[i][2]].z + t[faces[i][3]].z) / 4;
			order[i] = i;
		}

        // Next we sort the faces in descending order based on the Z value.
        // The objective is to draw distant faces first. This is called
        // the PAINTERS ALGORITHM. So, the visible faces will hide the invisible ones.
        // The sorting algorithm used is the SELECTION SORT.
		for( int i = 0; i             int iMax = i;
    		for( int j = i + 1; j  avgZ[iMax] ) {
                    iMax = j;
                }
    		}
            if( iMax != i ) {
	            double dTmp = avgZ[i];
	            avgZ[i] = avgZ[iMax];
	            avgZ[iMax] = dTmp;

	            int iTmp = order[i];
	            order[i] = order[iMax];
	            order[iMax] = iTmp;
            }
		}

		canvas.drawColor(Color.BLACK);

		Paint paint = new Paint();
		paint.setColor(Color.WHITE);
		paint.setStyle(Style.FILL);

		paint.setTextSize(24);
		canvas.drawText("3D Cube",10,40,paint);

		paint.setTextSize(12);
		canvas.drawText("Drag the cube to change its orientation", 10, 80, paint);
		canvas.drawText("http://codentronix.com", 10, getHeight() - 10, paint);

		for( int i = 0; i < 6; i++ ) {
			int index = order[i];

			Path p = new Path();
			p.moveTo((float)t[faces[index][0]].x, (float)t[faces[index][0]].y);
			p.lineTo((float)t[faces[index][1]].x, (float)t[faces[index][1]].y);
			p.lineTo((float)t[faces[index][2]].x, (float)t[faces[index][2]].y);
			p.lineTo((float)t[faces[index][3]].x, (float)t[faces[index][3]].y);
			p.close();

			paint.setColor(colors[index]);
			canvas.drawPath(p, paint);
		}
	}
}

Vector3D.java:

The Vector3D class is be used to define each vertex of the cube in 3D space.

package com.codentronix.android;

public class Vector3D {
	protected double x;
	protected double y;
	protected double z;

	public Vector3D() {
		x = y = z = 0;
	}

	public Vector3D(double x, double y, double z) {
		this.x = x;
		this.y = y;
		this.z = z;
	}

	public Vector3D rotateX(double angle) {
        double rad, cosa, sina, yn, zn;

        rad = angle * Math.PI / 180;
        cosa = Math.cos(rad);
        sina = Math.sin(rad);
        yn = this.y * cosa - this.z * sina;
        zn = this.y * sina + this.z * cosa;

        return new Vector3D(this.x, yn, zn);
	}

	public Vector3D rotateY(double angle) {
        double rad, cosa, sina, xn, zn;

        rad = angle * Math.PI / 180;
        cosa = Math.cos(rad);
        sina = Math.sin(rad);
        zn = this.z * cosa - this.x * sina;
        xn = this.z * sina + this.x * cosa;

        return new Vector3D(xn, this.y, zn);
	}

	public Vector3D rotateZ(double angle) {
        double rad, cosa, sina, xn, yn;

        rad = angle * Math.PI / 180;
        cosa = Math.cos(rad);
        sina = Math.sin(rad);
        xn = this.x * cosa - this.y * sina;
        yn = this.x * sina + this.y * cosa;

        return new Vector3D(xn, yn, this.z);
	}

	public Vector3D project(int viewWidth, int viewHeight, float fov, float viewDistance) {
        double factor, xn, yn;

        factor = fov / (viewDistance + this.z);
        xn = this.x * factor + viewWidth / 2;
        yn = this.y * factor + viewHeight / 2;

        return new Vector3D(xn, yn, this.z);
	}
}

The methods rotateX(), rotateY(), and rotateZ() rotate the vertex around X, Y, and Z axis respectively. The method project() maps the vertex from 3D space to 2D space.

CubeIn2DCanvasActivity.java:

This file defines the main activity of the application. The activity loads the layout and adds a menu item. The layout is composed by the custom view we defined above.

package com.codentronix.android;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.app.Dialog;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.Window;

public class CubeIn2DCanvasActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Remove the title bar.
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.main);
    }

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater inflater = getMenuInflater();
		inflater.inflate(R.menu.main, menu);
		return true;
	}

	@Override
	protected Dialog onCreateDialog(int id) {
		AlertDialog.Builder builder = new AlertDialog.Builder(this);
		if( id == R.id.about ) {
			builder.setMessage("Developed by Leonel Machava ")
				.setPositiveButton("OK", null);
		}
		return builder.create();
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		if( item.getItemId() == R.id.about ) {
			showDialog(R.id.about);
		}
		return true;
	}
}

Resource Files

Layout: main.xml

Menu file: menu.xml

If you liked this post, please consider leaving a comment, sharing this post using one of the buttons below, or subscribing to the blog.

5 Cool OpenGL Demos in VB.NET

lefam — Fri, 07 Oct 2011 20:18:15 +0000

A couple of months ago I decided to use OpenGL with .NET. So I needed to choose an OpenGL wrapper for .NET. After a short research I chose the OpenTK library. To try it out I developed some simple demos and I uploaded some videos of them on my youtube page.

In this post I will show some videos of the projects I have developed so far. In later posts I will share the source code of each project.

UPDATE: I have uploaded the source code of these and other OpenGL demos on my github space.

1. Loading and animating Quake 2 (MD2) models

2. Terrain Rendering with heightmaps

3. Simple Camera in OpenGL

4. Textured Cube

5. Gouraud Shaded Cube

If you liked this post, please consider leaving a comment, sharing this post using one of the buttons below, or subscribing to the blog.

3D Starfield in HTML5 Canvas

lefam — Fri, 22 Jul 2011 16:27:13 +0000

This article will show you how to create a 3D starfield using HTML5 Canvas. Below you can see the 3D starfield in action (well, if your browser supports HTML5 canvas).

An interesting aspect of this simulation is that the stars that are far away look smaller and darker than closer stars.

In this article I assume that the reader has at least a basic knowledge of HTML and JavaScript. I will begin by presenting the idea and some theory behind the simulation and after that I will present the code. If any question arises, please don’t hesitate to leave a comment.

The idea

The screen is filled with a constant number of stars. In this simulation I filll the screen with 512 stars. For each star we are interested in knowing only its coordinates. Since this is a 3D simulation, the coordinates must be in 3D. So, each star will be represented in the code as an object with properties X, Y, and Z.

After the page is completely loaded, we do the initial positioning of the stars, assigning them random positions, and of course ensuring that they stay within the field of view. Then we enter an infinite loop, where in each iteration (or frame) we decrease the value of the Z coordinate of each star making it move towards the user. When a star goes out of the field of view, ie, when Z is less than or equal to zero, it is repositioned deep inside the screen and is assigned random values for X and Y. The final step is to draw the star, but wait, remember that the stars are in 3D. So before we draw them they should be mapped to 2D. To do the mapping to 2D we will use the following formulas:

px = 128 * star.x / + star.z + half_canvas_width
py = 128 * star.y / + star.z + half_canvas_height

In the formula, px and py are the resulting coordinates mapped to 2D. This operation is called a perspective projection.

Having the coordinates in 2D we can immediately draw the star. However, I preferred to make the simulation a little bit more interesting by making distant stars look smaller and darker than closer stars. To achieve this, linear interpolation was applied to calculate the size and color of the stars based on the Z coordinate. Here are the formulas:

size = (1 - star.z / max_depth) * 5
color = (1 - star.z / max_depth) * 255

The size and color are inversely proportional to the value of Z. Thus, when the star is at the maximum depth, size and color are both zero, approaching 5 and 255, respectively as the value of Z decreases.

Code

HTML Structure
Let’s begin with the structure of the HTML5 page that will run the 3D starfield.




3D Starfield in HTML5 Canvas

The statement in the first line tells the browser that the page is based on HTML5. Not including this statement may cause some browsers to ignore the new HTML5 elements. Internet Explorer is an example.
We have defined a canvas element inside the body element. The canvas is 500 pixels wide and 400 pixels tall, and has id tutorial.

JavaScript Code
With the HTML structure defined, the next step is to enter the JavaScript code that performs the simulation. Below is the complete code. Notice that I have introduced the script inside the head element and just below the title element.




  3D Starfield in HTML5 Canvas

Description of code:
The first line defines the MAX_DEPTH constant that stores the maximum distance or depth where a star can be. Then, the canvas variable is declared which will be used store the reference to the canvas element. The variable ctx will store the canvas context and will be used to draw inside the canvas. Obviously the stars array will store 512 stars.

Next we define a function that is executed when the page is fully loaded. The function begins by getting the reference of the canvas element. After that, we determine whether the browser supports the new canvas element. If so, we get the reference of the context of the canvas that will be used to draw inside the canvas. Then, we invoke the function initStars() that prepares the stars by positioning them randomly in space. Finally, we set the loop() function to be invoked every 33 milliseconds.

It is inside the loop() function where the simulation takes place. First, we clear the canvas with a black color, and then start a loop that processes the stars. In each iteration, we start by decreasing the Z value of the star. Next, we check if the star is still within the field of view. If not, the star is positioned at the maximum depth and assigned random values for the coordinates X and Y. Then, we do the mapping of coordinates from 3D to 2D. Finally, we draw the star only if it is within the limits of the canvas. See the section The idea to understand the algorithm I use to draw the stars.

Conclusion

In this article I have shown how to make an interesting 3D starfield using the new HTML5 Canvas element. More articles on HTML5 Canvas will come. So, please subscribe to our feed to receive updates.

If you like this article, please click one of the buttons below to share the article. Consider also leaving a comment expressing what you think about this article.

A Simple 3D Room made with DirectX and C++

lefam — Sat, 18 Jun 2011 17:29:01 +0000

Today, while messing around with an old backup disk, I found a DirectX 9 project I made back in 2005. It is an application that renders a 3D room and allows the user to navigate inside it in first person camera. I developed this application to test a 3D engine I was developing at the time. The video below shows the 3D application in action.

I will just share the main file module of the project. To get the rest of the 3D engine files, consider following me on twitter or facebook, or ask in the contact page. Don’t hesitate to leave a comment if you a have a doubt or suggestion.

How it works

You navigate in the room using the arrow keys. The possible moviments are:

Move forward/backward
Move left/right
Strafe left/right
Look down/up

I developed the application using C++ and DirectX 9. The application is based on a 3D engine I was developing at the time. The main aim of the engine was to facilitate the creation of windows applications and at the same time make easy the creation of cool 3D games. The engine facilitated setting up DirectX, playing sounds and music, loading 3D models, creating worlds, and making navigations in first person as well as in third person (just to name a few).

The Code

The main module is divided in two files: main.cpp and main.h. Below is the code for the main.h file.

#ifndef __MAIN_H__
#define __MAIN_H__

#include 
#include "application.h"
#include "graphics.h"
#include "camera.h"

typedef struct {
 float x,y,z;
 float u,v;
}VERTEX;

#define VERTEX_FVF		D3DFVF_XYZ | D3DFVF_TEX1

#define WORLD_X			10
#define WORLD_Y			9

#define NUM_WALL_VERTICES	24
#define NUM_CEIL_VERTICES	6
#define NUM_FLOOR_VERTICES	6

#define NUM_CEIL_TRI		(NUM_CEIL_VERTICES / 3)
#define NUM_WALL_TRI		(NUM_WALL_VERTICES / 3)
#define NUM_FLOOR_TRI		(NUM_FLOOR_VERTICES / 3)

#define WALL_VB_SIZE		NUM_WALL_VERTICES * sizeof(VERTEX)
#define CEIL_VB_SIZE		NUM_CEIL_VERTICES * sizeof(VERTEX)
#define FLOOR_VB_SIZE		NUM_FLOOR_VERTICES * sizeof(VERTEX)

#define KEYDOWN(x)		(GetAsyncKeyState(x) & 0x8000)

class c3DRoom : public cApplication {
 cGraphics *m_pGfx;
 cCAMERA   m_Camera;
 IDirect3DVertexBuffer9 *m_pVBWall;
 IDirect3DVertexBuffer9 *m_pVBCeil;
 IDirect3DVertexBuffer9 *m_pVBFloor;
 IDirect3DTexture9	*m_pTextures[3];
 BOOL m_bFullScreen;

public:
 c3DRoom();
 ~c3DRoom();

 BOOL InitScene();
 BOOL Init();
 void CheckInput();
 void RenderScene();
 BOOL DoFrame();
 BOOL ShutDown();
};
#endif

Next is the code for the main.cpp file.

#include "main.h"

VERTEX WallVtx[NUM_WALL_VERTICES] = {
 // 1o Triângulo, face frontal
 -1,1,-1,0,0,
 1,1,-1,1,0,
 -1,-1,-1,0,1,
 // 2o Triângulo, face frontal
 1,1,-1,1,0,
 1,-1,-1,1,1,
 -1,-1,-1,0,1,
 // 1o Triângulo, face lateral direita
 1,1,-1,0,0,
 1,1,1,1,0,
 1,-1,-1,0,1,
 // 2o Triângulo, face lateral direita
 1,1,1,1,0,
 1,-1,1,1,1,
 1,-1,-1,0,1,
 // 1o Triângulo, face lateral esquerda
 -1,1,-1,1,0,
 -1,-1,1,0,1,
 -1,1,1,0,0,
 // 2o Triângulo, face lateral esquerda
 -1,1,-1,1,0,
 -1,-1,-1,1,1,
 -1,-1,1,0,1,
 // 1o Triângulo, face traseira
 1,1,1,0,0,
 -1,1,1,1,0,
 1,-1,1,0,1,
 // 2o Triângulo, face traseira
 1,-1,1,0,1,
 -1,1,1,1,0,
 -1,-1,1,1,1
};

VERTEX CeilVtx[NUM_CEIL_VERTICES] = {
 // 1o Triângulo
 1,1,1,1,1,
 -1,1,1,0,1,
 -1,1,-1,0,0,
 // 2o Triângulo
 -1,1,-1,0,0,
 1,1,-1,1,0,
 1,1,1,1,1
};

VERTEX FloorVtx[NUM_CEIL_VERTICES] = {
 // 1o Triângulo
 -1,0,1,0,0,
 1,0,1,1,0,
 -1,0,-1,0,1,
 // 2o Triângulo
 1,0,1,1,0,
 1,0,-1,1,1,
 -1,0,-1,0,1
};

int iWallMap[WORLD_Y][WORLD_X] = {
 1,1,1,1,1,1,1,1,1,1,
 1,0,0,0,0,0,0,0,0,1,
 1,0,1,0,0,0,0,1,0,1,
 1,0,1,0,0,0,0,1,0,1,
 1,0,0,0,0,0,0,1,0,1,
 1,0,1,0,0,0,0,1,0,1,
 1,0,1,0,1,1,1,1,0,1,
 1,0,0,0,0,0,0,0,0,1,
 1,1,1,1,1,1,1,1,1,1};

c3DRoom::c3DRoom()
{
  m_pTextures[0] = m_pTextures[1] = m_pTextures[2] = NULL;
  m_pVBWall  = NULL;
  m_pVBCeil  = NULL;
  m_pVBFloor = NULL;

  m_dwWidth = 400;
  m_dwHeight = 350;
  m_dwStyle = WS_OVERLAPPEDWINDOW;
  m_dwExStyle = 0;
  m_bFullScreen = FALSE;

  strcpy(m_szClass,"3DRoomClass");
  strcpy(m_szCaption,"3D Room by Leonel Machava");
}

BOOL c3DRoom::InitScene()
{
  IDirect3DDevice9 *pDevice;
  D3DXMATRIX matWorld,matView,matProj;
  RECT rcClient;

  pDevice = Graphics()->GetDevice();

  if( FAILED(D3DXCreateTextureFromFile(pDevice,"Media\\wall2.bmp",&m_pTextures[0])) ||
    FAILED(D3DXCreateTextureFromFile(pDevice,"Media\\floor.bmp",&m_pTextures[1])) ||
    FAILED(D3DXCreateTextureFromFile(pDevice,"Media\\ceil1.bmp",&m_pTextures[2])) )
    return( FALSE );

  if( FAILED(pDevice->CreateVertexBuffer(WALL_VB_SIZE,D3DUSAGE_WRITEONLY,VERTEX_FVF,
                                         D3DPOOL_MANAGED,&m_pVBWall,NULL)) )
    return( FALSE );

  if( FAILED(pDevice->CreateVertexBuffer(CEIL_VB_SIZE,D3DUSAGE_WRITEONLY,VERTEX_FVF,
                                         D3DPOOL_MANAGED,&m_pVBCeil,NULL)) )
    return( FALSE );

  if( FAILED(pDevice->CreateVertexBuffer(FLOOR_VB_SIZE,D3DUSAGE_WRITEONLY,VERTEX_FVF,
                                         D3DPOOL_MANAGED,&m_pVBFloor,NULL)) )
   return( FALSE );

  Graphics()->FillVertexBuffer(m_pVBWall,WallVtx,0,WALL_VB_SIZE);
  Graphics()->FillVertexBuffer(m_pVBCeil,CeilVtx,0,CEIL_VB_SIZE);
  Graphics()->FillVertexBuffer(m_pVBFloor,FloorVtx,0,FLOOR_VB_SIZE);

  pDevice->SetRenderState(D3DRS_LIGHTING,FALSE);
  pDevice->SetSamplerState(0,D3DSAMP_MINFILTER,D3DTEXF_LINEAR);
  pDevice->SetSamplerState(0,D3DSAMP_MAGFILTER,D3DTEXF_LINEAR);
  pDevice->SetSamplerState(0,D3DSAMP_MIPFILTER,D3DTEXF_LINEAR);

  GetClientRect(GetHWnd(),&rcClient);
  m_Camera.GetMatrix(&matView);

  D3DXMatrixIdentity(&matWorld);
  D3DXMatrixPerspectiveFovLH(&matProj,D3DX_PI / 4.0,(float)rcClient.right / rcClient.bottom,1.0,1000.f);

  pDevice->SetTransform(D3DTS_WORLD,&matWorld);
  pDevice->SetTransform(D3DTS_VIEW,&matView);
  pDevice->SetTransform(D3DTS_PROJECTION,&matProj);

  return( TRUE );
}

BOOL c3DRoom::Init()
{
  m_pGfx = new cGraphics;

  m_Camera.SetPosition(1,0,-7);

  if( !Graphics()->Init(GetHWnd(),0,0,TRUE,D3DFMT_UNKNOWN,D3DFMT_D16) )
  {
    MessageBox(GetHWnd(),"Não foi possível inicializar os gráficos","Erro",MB_OK);
    return( FALSE );
  }

  if( !InitScene() )
  {
    MessageBox(GetHWnd(),"Não foi possível inicializar a cena","Erro",MB_OK);
    return( FALSE );
  }

  return( TRUE );
}

BOOL c3DRoom::ShutDown()
{
  SAFE_RELEASE(m_pTextures[0]);
  SAFE_RELEASE(m_pTextures[1]);
  SAFE_RELEASE(m_pTextures[2]);
  SAFE_RELEASE(m_pVBWall);
  SAFE_RELEASE(m_pVBCeil);
  SAFE_RELEASE(m_pVBFloor);

  Graphics()->Close();

  delete m_pGfx;

  return( TRUE );
}

void c3DRoom::CheckInput()
{
  if( KEYDOWN(VK_UP) )	m_Camera.Walk(0.10f);

  if( KEYDOWN(VK_DOWN) )	m_Camera.Walk(-0.10f);

  if( KEYDOWN(VK_LEFT) )	m_Camera.Yaw(-0.02f);

  if( KEYDOWN(VK_RIGHT) ) m_Camera.Yaw(0.02f);

  if( KEYDOWN(VK_PRIOR) )	m_Camera.Pitch(0.02f);

  if( KEYDOWN(VK_NEXT) )	m_Camera.Pitch(-0.02f);

  if( KEYDOWN('A') )		m_Camera.Strafe(-0.1f);

  if( KEYDOWN('D') )		m_Camera.Strafe(0.1f);
}

void c3DRoom::RenderScene()
{
  float xPos,zPos;
  int i,j;

  IDirect3DDevice9 *pDevice;
  D3DXMATRIX matView,matWorld;

  Graphics()->ClearAll(D3DCOLOR_XRGB(0,0xF0,0),1.0);
  Graphics()->BeginScene();

  pDevice = Graphics()->GetDevice();
  pDevice->SetFVF(VERTEX_FVF);

  m_Camera.GetMatrix(&matView);
  pDevice->SetTransform(D3DTS_VIEW,&matView);

  pDevice->SetStreamSource(0,m_pVBFloor,0,sizeof(VERTEX));
  pDevice->SetTexture(0,m_pTextures[1]);

  for( i = 0,zPos = 5; i < WORLD_Y; i++ )
  {
    xPos = -5;
    for( j = 0; j < WORLD_X; j++ )
    {
      D3DXMatrixTranslation(&matWorld,xPos,-1,zPos);
//    if( 0 == iWallMap[i][j] )
      {
        pDevice->SetTransform(D3DTS_WORLD,&matWorld);
        pDevice->DrawPrimitive(D3DPT_TRIANGLELIST,0,NUM_FLOOR_TRI);
      }
      xPos += 2;
    }
    zPos -= 2;
  }

  pDevice->SetStreamSource(0,m_pVBCeil,0,sizeof(VERTEX));
  pDevice->SetTexture(0,m_pTextures[2]);

  for( i = 0,zPos = 5; i < WORLD_Y; i++ )
  {
    xPos = -5;
    for( j = 0; j < WORLD_X; j++ )
    {
      D3DXMatrixTranslation(&matWorld,xPos,0,zPos);
//    if( 0 == iWallMap[i][j] )
      {
        pDevice->SetTransform(D3DTS_WORLD,&matWorld);
        pDevice->DrawPrimitive(D3DPT_TRIANGLELIST,0,NUM_CEIL_TRI);
      }
    xPos += 2;
    }
    zPos -= 2;
  }

  pDevice->SetStreamSource(0,m_pVBWall,0,sizeof(VERTEX));
  pDevice->SetTexture(0,m_pTextures[0]);

  for( i = 0,zPos = 5; i < WORLD_Y; i++ )
  {
    xPos = -5;
    for( j = 0; j < WORLD_X; j++ )
    {
      D3DXMatrixTranslation(&matWorld,xPos,0,zPos);
      if( iWallMap[i][j] != 0 )
      {
        pDevice->SetTransform(D3DTS_WORLD,&matWorld);
        pDevice->DrawPrimitive(D3DPT_TRIANGLELIST,0,NUM_WALL_TRI);
      }
      xPos += 2;
    }
    zPos -= 2;
  }

  pDevice->SetTexture(0,NULL);
  Graphics()->EndScene();
  Graphics()->Flip();
}

BOOL c3DRoom::DoFrame()
{
  CheckInput();
  RenderScene();
  return( TRUE );
}

c3DRoom::~c3DRoom()
{
  //NOP
}

int WINAPI WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,
 LPSTR lpCmdLine,int nShowCmd)
{
  c3DRoom cApp;

  return( cApp.Run() );
}

In the next days I will share other projects of mine that I made a while ago. If you want to stay updated, you can subscribe by email.

If you like this article please share it by clicking one of the buttons below, follow me on twitter, or register on my RSS to receive article updates. Thanks!

How to Draw A Cube Using PHP

lefam — Mon, 06 Jun 2011 21:22:37 +0000

PHP is one of the most used languages for web development, and it is often used to generate HTML pages. Today, I will show you how to use it to make something different. We will make a script to draw a 3D cube.

The image below shows an output from the PHP script. Click the image to draw another cube.

NOTE: PHP is often used to output text content, however it can also output images (really, it can output pretty much anything). To draw images I relied on the GD library. If you have never used the GD library, consider reading the tutorial Generating Images with PHP.

Code

Before checking the code let me remember you that a cube is made of 8 vertices and 6 faces. I guess the code is pretty much self-explanatory, so I will not give too much detail.

When drawing the cube, we must draw only the faces that are visible. In 3D computer graphics theory, this is called the “visibility problem”, and there are some algorithms, called hidden surface algorithms, which solve this problem. The Painter’s Algorithm is one of them, and solves the problem drawing the faces from back to front. To do this, we calculate the average Z value of each face, then we sort them, and finally we draw them in descending order of the Z value.


 * http://codentronix.com
 *
 * This code is released under the "MIT License" available at
 * http://www.opensource.org/licenses/mit-license.php
 */

/* Represents points in 3D space. */
class Point3D {
  public $x;
  public $y;
  public $z;

  public function __construct($x,$y,$z) {
    $this->x = $x;
    $this->y = $y;
    $this->z = $z;
  }

  public function rotateX($angle) {
    $rad = $angle * M_PI / 180;
    $cosa = cos($rad);
    $sina = sin($rad);
    $y = $this->y * $cosa - $this->z * $sina;
    $z = $this->y * $sina + $this->z * $cosa;
    return new Point3D($this->x, $y, $z);
  }

  public function rotateY($angle) {
    $rad = $angle * M_PI / 180;
    $cosa = cos($rad);
    $sina = sin($rad);
    $z = $this->z * $cosa - $this->x * $sina;
    $x = $this->z * $sina + $this->x * $cosa;
    return new Point3D($x, $this->y, $z);
  }

  public function rotateZ($angle) {
    $rad = $angle * M_PI / 180;
    $cosa = cos($rad);
    $sina = sin($rad);
    $x = $this->x * $cosa - $this->y * $sina;
    $y = $this->x * $sina + $this->y * $cosa;
    return new Point3D($x, $y, $this->z);
  }

  public function project($width,$height,$fov,$viewerDistance) {
    $factor = (float)($fov) / ($viewerDistance + $this->z);
    $x = $this->x * $factor + $width / 2;
    $y = -$this->y * $factor + $height / 2;
    return new Point3D($x,$y,$this->z);
  }
}

/* Define the 8 vertices of the cube. */
$vertices = array(
  new Point3D(-1,1,-1),
  new Point3D(1,1,-1),
  new Point3D(1,-1,-1),
  new Point3D(-1,-1,-1),
  new Point3D(-1,1,1),
  new Point3D(1,1,1),
  new Point3D(1,-1,1),
  new Point3D(-1,-1,1)
);

/* Define the vertices that compose each of the 6 faces. These numbers are
   indices to the vertex list defined above. */
$faces = array(array(0,1,2,3),array(1,5,6,2),array(5,4,7,6),array(4,0,3,7),array(0,4,5,1),array(3,2,6,7));

/* Define colors for each face. */
$colors = array(array(255,0,255),array(255,0,0),array(0,255,0),array(0,0,255),array(0,255,255),array(255,255,0));

/* Create the image. */
$im = imagecreatetruecolor(400,300);

$im_colors = array();

foreach( $colors as $color ) {
  $im_colors[] = imagecolorallocate($im,$color[0],$color[1],$color[2]);
}

/* Assign random values for the angles that describe the cube orientation. */
$angleX = rand() * 15;
$angleZ = rand() * -30;
$angleY = rand() * -30;

/* It will store transformed vertices. */
$t = array();

/* Transform all the vertices. */
foreach( $vertices as $v ) {
  $t[] = $v->rotateX($angleX)->rotateY($angleY)->rotateZ($angleZ)->project(400,300,256,4);
}

/* When drawing the cube we must be careful to draw only the faces that are visible.
   We do that by using the Painter's Algorithm, which consists in drawing the faces
   from back to front.
   Note that other algorithms do exist, and are classified as HIDDEN SURFACE REMOVAL
   ALGORITHMS. */

/* It will store the average Z value of each face. */
$avgZ = array();

/* Calculate the average Z value of each face. */
foreach( $faces as $index=>$f ) {
  $avgZ["$index"] = ($t[$f[0]]->z + $t[$f[1]]->z + $t[$f[2]]->z + $t[$f[3]]->z) / 4.0;
}

/* Sort the array in descending order. */
arsort($avgZ);

/* Draw the faces from back to front. */
foreach( $avgZ as $index=>$z ) {
  $f = $faces[$index];
  $points = array(
    $t[$f[0]]->x,$t[$f[0]]->y,
    $t[$f[1]]->x,$t[$f[1]]->y,
    $t[$f[2]]->x,$t[$f[2]]->y,
    $t[$f[3]]->x,$t[$f[3]]->y
  );
  imagefilledpolygon($im,$points,4,$im_colors[$index]);
}

/* Tell the browser/client we are outputing a PNG image. */
header("Content-Type: image/png");

/* Output the image. */
imagepng($im);

If you like this article please share it by clicking one of the buttons below, follow me on twitter, or register on my RSS to receive article updates. Thanks!

Arduino LED Bar Graph with a 4017 Counter and Potentiometer

lefam — Sun, 05 Jun 2011 18:34:03 +0000

In this tutorial I will show you how to drive a LED bar graph using an arduino and a potentiometer. This is fairly easy to do and a nice tutorial about it already exists on the arduino website. This tutorial will be different in that we will use a 4017 counter to save pins from the microcontroller. Additionally, I will demonstrate the concept of “persistence of vision”.

See below a video of the circuit in action.

If you are able to reproduce this project, have any question, correction, or suggestion, please, let me know by leaving a comment.

Hardware Required

Arduino board
(1) Rotary Potentiometer
(1) 4017 Decade Counter
Breadboard
Some wires

Schematic

(Click the image to enlarge)

This is how it works:

The 10 LEDs are wired to the outputs of the 4017 counter. There is no need to protect them with current limiting resistors because the maximum current per pin is 10 mA. The arduino controls the 4017 counter using just 2 digital pins: digital pin 2 is connected to the counter’s clock pin, and the digital pin 3 is connected to the counter’s reset pin. The arduino runs a program that reads the analog input from the potentiometer (returning a value between 0 and 1023). The value read is mapped to the range 0-9 and is used to decide the number of LEDs to turn on.

Using the counter we face the limitation of not being able to turn on more than one LED at the same time. To solve this, we quickly turn on/off the LEDs in succession, and thanks to the ”persistence of vision” effect, all the LEDs appear to be on at the same time.

Below is the picture of the circuit in real life.

(Click the image to enlarge)

CODE

/*
 * LED Bar Graph controlled with an external potentiometer.
 *
 * A 4017 counter is used to save pins on the arduino.
 * The technique of "Persistence of vision" is used to turn on
 * many LEDs at the same time.
 *
 * Developed by Leonel Machava
 * http://codentronix.com
 *
 * This code is release under the "MIT License" available at
 * http://www.opensource.org/licenses/mit-license.php
 */

/* Digital pin connected to the counter's clock pin */
int clockPin = 2;

/* Digital pin connected to the counter's reset pin */
int resetPin = 3;

/* Analog pin connected to the potentiometer wiper */
int potPin = 0;

void setup() {
  pinMode(clockPin,OUTPUT);
  pinMode(resetPin,OUTPUT);
  reset();
}

void loop() {
  /* Read the analog value from the potentiometer. */
  int potValue = analogRead(potPin);

  /* Map the value to the range 0-9. */
  int n = potValue * 10 / 1024;

  /* Turn ON/OFF quickly the first n LEDs. The n LEDs
     will appear to be ON at the same time due to the
     "persistence of vision" effect. */
  for( int i = 0; i < n; i++ ) {
    clock();
  }

  reset();
}

/*
 * Sends a clock pulse to the counter making it advance.
 */
void clock() {
  digitalWrite(clockPin,HIGH);
  delay(1);
  digitalWrite(clockPin,LOW);
}

/*
 * Resets the counter making it start counting from zero.
 */
void reset() {
  digitalWrite(resetPin,HIGH);
  delay(1);
  digitalWrite(resetPin,LOW);
}

Click here to download the source code (arduino_led_bar_graph_4017_pot.pde / 1.38 Kb)

If you like this article please share it by clicking one of the buttons below, follow me on twitter, or register on my RSS to receive article updates. Thanks!

Arduino LED Bar Graph Driven by a 4017 Counter

lefam — Sun, 05 Jun 2011 02:21:33 +0000

In this tutorial, my primary objective is to show you how to make a simple LED animation using a LED bar graph and an Arduino. My secondary objective is to share with you a trick to save pins of the Arduino using a 4017 decade counter circuit. The video below shows what we will be making.

If you are able to reproduce this project, have any doubt, correction, or suggestion, please, let me know by leaving a comment.

Hardware Required

Arduino board.
(1) LED bar graph (or alternatively 10 LEDs)
(1) 4017 Decade Counter IC
Some wires
Breadboard

Schematic

(Click the image to enlarge)

As you can see, using the 4017 counter we just need one digital pin from the arduino. Otherwise, we would need 10 pins from the arduino.

This is how it works: the LEDs of the bar graph are wired to the 10 outputs of the 4017 counter. The clock pin from the counter is wired to the arduino. When the arduino is running, it sends clock pulses to the counter making it advance. When the counter advances, the current LED is turned OFF, and the next one is turned ON. See below the picture of the circuit in real life.

(Click the image to enlarge)

Code

/*
 * Simple LED Bar graph animation using a 4017 counter.
 * The 4017 is used to save pins on the arduino.
 *
 * Developed by Leonel Machava
 * http://codentronix.com
 *
 * This code is release under the "MIT License" available at
 * http://www.opensource.org/licenses/mit-license.php
 */

/* PIN used to send clock pulses to the counter. */
int clockPin = 2;

void setup() {
  pinMode(clockPin,OUTPUT);
}

/*
 * Sends a clock pulse to the counter making it advance.
 */
void clock() {
  digitalWrite(clockPin,HIGH);
  delay(1);
  digitalWrite(clockPin,LOW);
}

void loop() {
  /* Send a clock pulse to the counter. It makes the counter advance
     causing the current LED to be turned off, and the next one to be
     turned ON */
  clock();
  /* Wait for 300 ms. */
  delay(300);
}

Click here to download the source (arduino_led_bar_graph_4017.pde / 1KB)

NOTE: This animation can also be made using just a LED bar graph, a 555 timer, and a counter. My main aim in this tutorial was to share with the arduino fans how to make it using an arduino. Additionally, as said in the beginning, my secondary objective was to show a method of saving pins on the arduino, and I did it using a 4017 counter. An alternative way of saving pins would be through the use of 595 shift registers, but for this case it would not be better than using a 4017 counter because we would need 3 pins from the arduino and 2 shift registers.

If you like this article please share it by clicking one of the buttons below, follow me on twitter, or register on my RSS to receive article updates. Thanks!

3D Starfield made using Python and Pygame

lefam — Sat, 28 May 2011 17:53:58 +0000

In this tutorial I will show you how to create a pretty cool 3D Starfield simulation using Python and Pygame. See in the video below a demonstration of the simulation.

Click here to download the full source code.

NOTE: In previous tutorials, I have demonstrated how to create a Simple Starfield as well as how to create a Parallax Starfield.

The Code

To simulate the effect of a 3D starfield, we initially create a list of stars that are randomly positioned in the world. Each star is represented as a 3D coordinate, I mean, for each star we just store its X,Y and Z coordinates. Then we start the animation loop where we decrease the star’s Z coordinates on each frame. Decreasing the Z coordinate of a star makes it appear to be approaching the screen. When a star disappears from the screen, we reposition it again in the screen giving it random X and Y coordinates, and setting Z = maximum depth.

To make it even more interesting, we make closer stars bigger than distant stars. Similarly, we make closer stars brighter than the distant ones.

Since the stars are represented as 3D coordinates, they must be converted to 2D before being drawn into the screen. The code does that using perspective projection formulas.

The code is presented below. As you can see, the simulation is made with very few lines of code. If you have any doubt or suggestion, please don’t hesitate to leave a comment.

"""
 3D Starfield Simulation
 Developed by Leonel Machava 

http://codeNtronix.com

http://twitter.com/codentronix

"""
import pygame, math
from random import randrange

class Simulation:
    def __init__(self, num_stars, max_depth):
        pygame.init()

        self.screen = pygame.display.set_mode((640, 480))
        pygame.display.set_caption("3D Starfield Simulation (visit codeNtronix.com)")

        self.clock = pygame.time.Clock()
        self.num_stars = num_stars
        self.max_depth = max_depth

        self.init_stars()

    def init_stars(self):
        """ Create the starfield """
        self.stars = []
        for i in range(self.num_stars):
            # A star is represented as a list with this format: [X,Y,Z]
            star = [randrange(-25,25), randrange(-25,25), randrange(1, self.max_depth)]
            self.stars.append(star)

    def move_and_draw_stars(self):
        """ Move and draw the stars """
        origin_x = self.screen.get_width() / 2
        origin_y = self.screen.get_height() / 2

        for star in self.stars:
            # The Z component is decreased on each frame.
            star[2] -= 0.19

            # If the star has past the screen (I mean Z<=0) then we
            # reposition it far away from the screen (Z=max_depth)
            # with random X and Y coordinates.
            if star[2] <= 0:
                star[0] = randrange(-25,25)
                star[1] = randrange(-25,25)
                star[2] = self.max_depth

            # Convert the 3D coordinates to 2D using perspective projection.
            k = 128.0 / star[2]
            x = int(star[0] * k + origin_x)
            y = int(star[1] * k + origin_y)

            # Draw the star (if it is visible in the screen).
            # We calculate the size such that distant stars are smaller than
            # closer stars. Similarly, we make sure that distant stars are
            # darker than closer stars. This is done using Linear Interpolation.
            if 0 <= x < self.screen.get_width() and 0 <= y < self.screen.get_height():
                size = (1 - float(star[2]) / self.max_depth) * 5
                shade = (1 - float(star[2]) / self.max_depth) * 255
                self.screen.fill((shade,shade,shade),(x,y,size,size))

    def run(self):
        """ Main Loop """
        while 1:
            # Lock the framerate at 50 FPS.
            self.clock.tick(50)

            # Handle events.
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    pygame.quit()
                    return

            self.screen.fill((0,0,0))
            self.move_and_draw_stars()
            pygame.display.flip()

if __name__ == "__main__":
    Simulation(512, 32).run()

Click here to download the full source code.

If you liked this article, please consider leaving a comment, or sharing this post using one of the buttons below, or even subscribing to the blog.

Rotating Solid Cube Using VB.NET and GDI+

lefam — Wed, 25 May 2011 11:30:36 +0000

In my last tutorial I have shown how to make a wireframe cube using VB.NET and GDI+. Today, we will build from the code from the last tutorial in order to make a rotating solid cube. The video below shows what we will achieve after finishing the tutorial.

THE FULL SOURCE CODE IS HERE.

The Code

The original code was divided in 2 files [Point3D.vb and Main.vb]. The Point3D.vb file defined the Point3D class which represents points in 3D space. The file Main.vb defined the Window form where the simulation runs.

The class Point3D remains unchanged and is presented below.

'
' Defines the Point3D class that represents points in 3D space.
' Developed by leonelmachava 
' http://codentronix.com
'
' Copyright (c) 2011 Leonel Machava
'
Option Explicit On

Public Class Point3D
    Protected m_x As Double, m_y As Double, m_z As Double

    Public Sub New(ByVal x As Double, ByVal y As Double, ByVal z As Double)
        Me.X = x
        Me.Y = y
        Me.Z = z
    End Sub

    Public Property X() As Double
        Get
            Return m_x
        End Get
        Set(ByVal value As Double)
            m_x = value
        End Set
    End Property

    Public Property Y() As Double
        Get
            Return m_y
        End Get
        Set(ByVal value As Double)
            m_y = value
        End Set
    End Property

    Public Property Z() As Double
        Get
            Return m_z
        End Get
        Set(ByVal value As Double)
            m_z = value
        End Set
    End Property

    Public Function RotateX(ByVal angle As Integer) As Point3D
        Dim rad As Double, cosa As Double, sina As Double, yn As Double, zn As Double

        rad = angle * Math.PI / 180
        cosa = Math.Cos(rad)
        sina = Math.Sin(rad)
        yn = Me.Y * cosa - Me.Z * sina
        zn = Me.Y * sina + Me.Z * cosa
        Return New Point3D(Me.X, yn, zn)
    End Function

    Public Function RotateY(ByVal angle As Integer) As Point3D
        Dim rad As Double, cosa As Double, sina As Double, Xn As Double, Zn As Double

        rad = angle * Math.PI / 180
        cosa = Math.Cos(rad)
        sina = Math.Sin(rad)
        Zn = Me.Z * cosa - Me.X * sina
        Xn = Me.Z * sina + Me.X * cosa

        Return New Point3D(Xn, Me.Y, Zn)
    End Function

    Public Function RotateZ(ByVal angle As Integer) As Point3D
        Dim rad As Double, cosa As Double, sina As Double, Xn As Double, Yn As Double

        rad = angle * Math.PI / 180
        cosa = Math.Cos(rad)
        sina = Math.Sin(rad)
        Xn = Me.X * cosa - Me.Y * sina
        Yn = Me.X * sina + Me.Y * cosa
        Return New Point3D(Xn, Yn, Me.Z)
    End Function

    Public Function Project(ByVal viewWidth, ByVal viewHeight, ByVal fov, ByVal viewDistance)
        Dim factor As Double, Xn As Double, Yn As Double
        factor = fov / (viewDistance + Me.Z)
        Xn = Me.X * factor + viewWidth / 2
        Yn = Me.Y * factor + viewHeight / 2
        Return New Point3D(Xn, Yn, Me.Z)
    End Function
End Class

The file Main.vb has suffered some changes. See below its code.

'
' Simulation of a Rotating Cube using GDI+
' Developed by leonelmachava 
' http://codentronix.com
'
' Copyright (c) 2011 Leonel Machava
'
Imports System.Drawing.Graphics
Imports System.Drawing.Pen
Imports System.Drawing.Color
Imports System.Drawing.Brush
Imports System.Drawing.Point
Imports System.Drawing.Bitmap

Public Class Main
    Protected m_timer As Timer
    Protected m_vertices(8) As Point3D
    Protected m_faces(6, 4) As Integer
    Protected m_colors(6) As Color
    Protected m_brushes(6) As Brush
    Protected m_angle As Integer

    Private Sub Main_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        ' Enable double-buffering to eliminate flickering.
        Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
        Me.SetStyle(ControlStyles.OptimizedDoubleBuffer, True)

        InitCube()

        ' Create the timer.
        m_timer = New Timer()

        ' Set the timer interval to 25 milliseconds. This will give us 1000/25 ~ 40 frames per second.
        m_timer.Interval = 25

        ' Set the callback for the timer.
        AddHandler m_timer.Tick, AddressOf AnimationLoop

        ' Start the timer.
        m_timer.Start()
    End Sub

    Private Sub InitCube()
        ' Create the cube vertices.
        m_vertices = New Point3D() {
                     New Point3D(-1, 1, -1),
                     New Point3D(1, 1, -1),
                     New Point3D(1, -1, -1),
                     New Point3D(-1, -1, -1),
                     New Point3D(-1, 1, 1),
                     New Point3D(1, 1, 1),
                     New Point3D(1, -1, 1),
                     New Point3D(-1, -1, 1)}

        ' Create an array representing the 6 faces of a cube. Each face is composed by indices to the vertex array
        ' above.
        m_faces = New Integer(,) {{0, 1, 2, 3}, {1, 5, 6, 2}, {5, 4, 7, 6}, {4, 0, 3, 7}, {0, 4, 5, 1}, {3, 2, 6, 7}}

        ' Define the colors of each face.
        m_colors = New Color() {Color.BlueViolet, Color.Cyan, Color.Green, Color.Yellow, Color.Violet, Color.LightSkyBlue}

        ' Create the brushes to draw each face. Brushes are used to draw filled polygons.
        For i = 0 To 5
            m_brushes(i) = New SolidBrush(m_colors(i))
        Next
    End Sub

    Private Sub AnimationLoop()
        ' Forces the Paint event to be called.
        Me.Invalidate()

        ' Update the variable after each frame.
        m_angle += 1
    End Sub

    Private Sub Main_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Dim t(8) As Point3D
        Dim f(4) As Integer
        Dim v As Point3D
        Dim avgZ(6) As Double
        Dim order(6) As Integer
        Dim tmp As Double
        Dim iMax As Integer

        ' Clear the window
        e.Graphics.Clear(Color.LightBlue)

        ' Transform all the points and store them on the "t" array.
        For i = 0 To 7
            Dim b As Brush = New SolidBrush(Color.White)
            v = m_vertices(i)
            t(i) = v.RotateX(m_angle).RotateY(m_angle).RotateZ(Me.m_angle)
            t(i) = t(i).Project(Me.ClientSize.Width, Me.ClientSize.Height, 256, 4)
        Next

        ' Compute the average Z value of each face.
        For i = 0 To 5
            avgZ(i) = (t(m_faces(i, 0)).Z + t(m_faces(i, 1)).Z + t(m_faces(i, 2)).Z + t(m_faces(i, 3)).Z) / 4.0
            order(i) = i
        Next

        ' Next we sort the faces in descending order based on the Z value.
        ' The objective is to draw distant faces first. This is called
        ' the PAINTERS ALGORITHM. So, the visible faces will hide the invisible ones.
        ' The sorting algorithm used is the SELECTION SORT.
        For i = 0 To 4
            iMax = i
            For j = i + 1 To 5
                If avgZ(j) > avgZ(iMax) Then
                    iMax = j
                End If
            Next
            If iMax <> i Then
                tmp = avgZ(i)
                avgZ(i) = avgZ(iMax)
                avgZ(iMax) = tmp

                tmp = order(i)
                order(i) = order(iMax)
                order(iMax) = tmp
            End If
        Next

        ' Draw the faces using the PAINTERS ALGORITHM (distant faces first, closer faces last).
        For i = 0 To 5
            Dim points() As Point
            Dim index As Integer = order(i)
            points = New Point() {
                New Point(CInt(t(m_faces(index, 0)).X), CInt(t(m_faces(index, 0)).Y)),
                New Point(CInt(t(m_faces(index, 1)).X), CInt(t(m_faces(index, 1)).Y)),
                New Point(CInt(t(m_faces(index, 2)).X), CInt(t(m_faces(index, 2)).Y)),
                New Point(CInt(t(m_faces(index, 3)).X), CInt(t(m_faces(index, 3)).Y))
            }
            e.Graphics.FillPolygon(m_brushes(index), points)
        Next
    End Sub
End Class

The code is pretty much self-explanatory. Below I will just list the key changes.

In the Load event I enable double buffering. This is fundamental to eliminate flickering in the animation. Try to remove the first 2 lines of code, and run the application. You will certainly see the flickering that results.

Basically I have changed the code to draw filled faces instead of lines. However, now we must make sure to draw distant faces first, and closer ones last (Painters Algorithm).

THE FULL SOURCE CODE IS HERE.

Conclusion

As I have promised in the last tutorial, today I have shown how to make a rotating solid cube. In my next VB.NET tutorial, I will show you how to make a cool game in pretty simple steps.
If you liked this article, please consider leaving a comment, or sharing this post using one of the buttons below, or even subscribing to the blog.

codeNtronix

HTML5 Canvas Crazy Balls

See Also:

First Android App: Touch Controlled Cube on Samsung Galaxy S2

The Idea

The Code

Resource Files

See Also:

5 Cool OpenGL Demos in VB.NET

1. Loading and animating Quake 2 (MD2) models

2. Terrain Rendering with heightmaps

3. Simple Camera in OpenGL

4. Textured Cube

5. Gouraud Shaded Cube

See Also:

3D Starfield in HTML5 Canvas

The idea

Code

Conclusion

See Also:

A Simple 3D Room made with DirectX and C++

How it works

See Also:

How to Draw A Cube Using PHP

Code

See Also:

Arduino LED Bar Graph with a 4017 Counter and Potentiometer

Hardware Required

Schematic

CODE

See Also:

Arduino LED Bar Graph Driven by a 4017 Counter

Hardware Required

Schematic

See Also:

3D Starfield made using Python and Pygame

The Code

See Also:

Rotating Solid Cube Using VB.NET and GDI+

The Code

Conclusion

See Also: