Learn to code | Codecademy

Today's post is about a website I planned to talk about, bu totally forgot! It's called Codecademy and it's actually a very nice tutorial to teach kids, from 7 to 77, how to handle basic principles in source code.

It shows how to code in Javascript. And in the last years, mostly with HTML5, Javascript is getting even more important. And there's a rule on the Internet about Javascript: If something can be done in Javascript, eventually, someone will do it. And it's actually true. Just take a look at Google Docs. Also, by choosing Javascript, you don't have to think about compilers or on which OS you are. You can jump directly in the fun part.

The tutorial starts by asking your name and you just have to write it as a string like "Widgg". Then, gradually, you are introduce to various concepts like variables, conditions, loops and so on. The only problem that I had with the tutorial is that the syntax in Javascript requires semicolons at the end of each statement, but that was not explicitly mentioned in the tutorial. Or I just did not find it.

I did that tutorial a while ago, so maybe they corrected it. But even with that small problem, it's actually a really good starts for anyone who want to start programming or are just curious.

Red and Cyan Stereoscopy

Here's a small entry for any of you who has a pair of 3D glasses (the ones with a red and cyan lens) and are interested in creating a 3D environment with OpenGL.

I'm not giving a lot of detail, for this post, I assume that you're familiar with OpenGL. At least the basic. If you're not, you can follow the tutorials on NeHe Productions. Here, I'm more interested with the general strategy because there's more than one way to do this. In this example, I present an approach that makes everything you see coming out of the screen. The screen itself would be the farthest object in the scene.

Consider that you have a function called draw_scene() where all the geometry and the computation is done, except the initialization to render the scene like clearing the depth buffer or glFlush();.

So here's the approach to render your scene:

Step 1:

glColorMask is a function that control which color you want to modify. So calling it with the four parameters set to true will allow to write on the red, green, blue and alpha value of each pixel concerned.

glColorMask(true, true, true, true);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 

If you use the stencil buffer, or any other buffers, add them as parameter in glClear.

Step 2:

Now, we want to draw what the left eye (red lens) will see. Imagine that the variables position, look_at and up are a structure such as:

struct coordinate
{
  float x, y, z;
};

describing two locations in space (position and look_at) and a vector (up).
Here we use gluLookAt to create a matrix used to setup the point of view on the scene. But other functions or methods exist to create the initial viewpoint.

glColorMask(true, false, false, true);
glLoadIdentity();
gluLookAt(position.x, position.y, position.z, look_at.x, look_at.y, look_at.z, up.x, up.y, up.z);
draw_scene();

At this point, half of the drawing is done.

Step 3:

For the right eye, we need first to move a little bit the point of view to simulate the distance between our eyes. Let the variable eye_distance be that distance. The piece of code is very similar to the code in the previous step.

glColorMask(false, false, true, true);
glLoadIdentity();
glTranslatef(-eye_distance, 0.0f, 0.0f);
gluLookAt(position.x, position.y, position.z, look_at.x, look_at.y, look_at.z, up.x, up.y, up.z);
draw_scene();

First, we switch the mask to accept only the blue. But why the "-eye_distance" ? Remember that I want everything to go out of the screen. This mean that the same object that we see with the right eye needs to be to the left of the copy of that object that we see with our left eye.

To understand this phenomenon. Put I finger in front of you and close your right eye. Then switch to your left eye. You can observe that your finger seems to be moving to the left. And the closer you put your finger, the larger the distance is. It's this effect that allow your eyes, when they focus on the same object, to determine the distance.

Another proof of this, take the example at the bottom. Look at the image first with you glasses and see how closer it is to you than the screen. Then clique on the image to have the larger version. You will see that the object looks even closer. And this is because the distance between the red and blue version is larger and your eyes make you think the object is closer.

Step 4:

Compile (debug if necessary) and enjoy your work.

Bonus step:

Let say that you have a background that is suppose to be far far away, like the sky. Your eyes shouldn't see the difference because it should be right on the screen. So, to save time, you should draw it before both eyes with the red and blue color activated. This way, you draw this part only once.

Here's the kind of images you should have: