Programming Log

04:18 PM Yesterday, We created a 3D 'F', that we can rotate, scale and translate. But somewhat was amiss. The 'F' we created was 3D, but it did not have the perspective. All the sides of the F were of the same size, ndependent of how far it was. This representation of 3D is called as Orthographic.  But it is not how we percieve real world objects. In real world, we assume there is an eye at the center of the screen, and we percieve closer objects as larger and far off objects as smaller. This type of representation is called Perspective. Today, I implemented this 3D perspective projection into yesterday's code. Following is how it looks now, the controls are similar, (with added [ and ] keys for z translation ).

11:40 AM Yesterday, we have dived into the visual world of WebGL, and completed the initial setup, and drew a simple 2D "F" figure. Today, I tried creating some 3D magic using WebGL. It was quite similar to 2D. Just needed to add another dimension to the translation and scale matrix.  Rotation was a different thing. Since in 2D, we can have rotation about only one, namely Z-axis. But in 3D, rotations about 3 different axes are possible. Hence we need to create 3 different methods for rotation about X, Y and Z axes. WebGL draws shapes using primitive triangles. We provide it with vertexes of triangles, and it draws them. For example, if we want to draw a rectangle, we would provide it with 2 sets of 3 vertex. One set of 3 vertex draws one triangle, and another draws another. If we provide the vertex such that the triangles have a common hypotenous, we get a rectangle. For the 3D F, I needed 16 rectangles. Hence I needed to supply 16 * 6, 96 vertices. Following ...

12:31 PM So, the long Diwali vacations are over and we are back to business. I left the journey at the verge of starting to learn WebGL. And god it was tiring. Today, I managed to create a simple figure, and apply some basic operations like translate, scale and rotate on the figure. So, to create a WebGL program, you need to do quite a lot of setup.  First you need to create a HTML Canvas element, since all of the magic that WebGL does happens inside this. Then you need to get the webgl context of this element. WebGL is basically a rasterization engine, that runs on 2 shaders, Vertex and Fragment.  The vertex shader tells the GPU the position of each vertex on the screen, and the fragment shader is used to determine the colour of each pixel. You need to create these 2 shader programs, which are written in GLSL, a shader language, which is written in a C/C++ type syntax.  Then you need to compile these shaders, and create a program and link those shaders wit...

2:00 PM Today, I improved upon yesterday's work. Yesterday, I created an object which raycasted uniformly in all directions, and only those rays were shown which hit something.  Today, I added a bit of movement and rotating functionality, as well as restricted the rays so that they form a cone. This is similar to having a torch and moving around. Also I drew the complete rays, even if they don't hit the wall, which created a kind of wall shadow illusion.  Below is the embedded project, you can move using arrow keys and rotate using mouse's X coordinate. Having completed this, I am now moving on and will try to display a sphere that is shaded by a directional light! 2:17 PM I need to back down a bit 😆. To create 3D graphics, I first need to learn OpenGL. I can ofcourse use the primitives defined by the P5 library itself, but it completely destroys the purpose of learning from scratch. So OpenGL it is! 10:45 PM So today was just a skim what is OpenGL ...

3:00 PM I did something with bezier curves today, and achieved some kind of good looking grass. It was good, but I am thinking now of doing something right from the basics. So, I choose Raycasting.  Raycasting is nothing, just casting rays and computing intersections so to visualize the space. I am going to do a 2D version first, which consists of an object, which casts out light in a cone (torch) fashion, and the path lights up.  5:00 PM Raycasting was so much fun!! I was able to create a shadow like 2D effect, where the circle is a Raycaster, and casts ray in all direction, and displays the ray when it hits a boundary/wall.

5:00 PM I have been playing Counter Strike for about 2 hours. So now is the time to do something creative and programmingy! I am starting to develop a natural simulation in Processing 3D. First, I thought about developing it in the original processing 3d java version. But Java! I am fed up with the notorius errors and what not. So I would prefer P5.JS. 5:35 PM So atleast the beginning was succesfull. I succesfully created a 2D close to grass field, that looks like is undergoing a breeze. Following is what I have achieved till now.. Just created an ellipse, coloured it, positioned it randomly between 0 and width of the screen. And then applied perlin noise to the rotation of the grass. I did not use random, because random is, well , too random.  Perlin noise is close to random but more of a continuous and harmonius random. Hence it is better suited for natural systems.

11 PM  Today marks the day from when I would keep a daily log of whatever things I did. No excuses, no procrastination. Just.Pure.Work! Started working on Blogger API, so I would not require to log on to blogger everyday, and also because I cannot think of anything to work on! Well it is more because I would like to update even if my laptop is not available for the moment. So, full steam ahead! 12 PM Aw Snap! So following things happened today, I first tried creating an oAuth consent screen for my blog, but it turns out that Google needs a top level domain for that and glitch.me does not qualify. So to go with oAuth2, I would need to deploy it on Heroku. Then I thought of creating a Service Account for the project. But voila, it so happens that Google does not allow creation of blogs and posts to a regular account using a service account. So this cannot be done. All in all, to be positive, atleast we learnt how NOT to use Blogger API. Let's hope tomorrow ...