Skip to content

JA3. Learning Journal 3

1. Discuss the week’s activities and your observations. Be sure to cite references using APA format

I started this week by reading the material which I was not able to finish so I will put some extra effort next week to catch up. I then started reading this week’s material and creating example files to try the reading’s examples myself through simple HTML/JS files, which I created a dozen of them.

The topics of this week included color blending, transparency, and the alpha channel. I learned about the RGBA color model and how it adds transparency and blending to the RGB model. I also learned about true colors, color depth, how colors are stored in memory with different bit depths, along with some mathematics related to computer graphics (UoPeople, 2024).

Did anything surprise you?

I was surprised that how simple things like color, transparency, and blending that we as humans take for granted require a lot of work, computation, and coordinations between multiple hardware and software components to make it happen on a computer screen. I was also surprised by the number of colors that most graphics systems can support, which is 16,581,375 different color hues (UoPeople, 2024) despite us only familiar with the colors of the rainbow.

I was also surprised to know the difference between transparency and alpha channel. Transparency is the ability to see through an object, while the alpha channel is the portion of color that is blended with other colors (UoPeople, 2024). I used alpha values in CSS for long time but I never knew how it works.

Did you face any challenges in this Unit? If so, how did you overcome them?

While doing my assignment, adding the shadow was specifically challenging. I followed every step in the documentation, but I could not see the shadow. I then realized that the shadow was not visible because the light source was not positioned correctly. I then adjusted the light source and properly set the castShadow, and receiveShadow properties.

I enabled shadow mapping on the renderer, set the light source and the shape to cast shadow, and added a plane to receive the shadow (Three.js docs, 2024). I did get some shadow but I don’t think it is perfect yet. The demo is available here: https://ahmad-ali14.github.io/AY2025-T2-CS4406/unit3/ and the code is available here: https://github.com/ahmad-ali14/AY2025-T2-CS4406/blob/main/src/unit3/code.ts

2. Discuss how shadows or transparency are used in today’s software applications to enhance visual perception

Transparency is the ability to see through an object. It may be useful to make things more realistic, such as seeing through a glass window or a water bottle. Transparency can also be used to create a sense of depth, that is, layering objects on top of each other to create a sense of distance (Why Transparency Is Hard, 2020). Transparency can be particularly useful in scientific or industrial modeling, as it may let the user see the internal structure of an object without the need to physically cut it open; for example, in medical imaging, transparency can be used to see the internal organs of a human body.

Shadow is another interesting concept that mimics the real world’s objects reaction to light. Shadows can also be used to create a sense of realism, but they also have practical uses. For example, in architectural planning, shadows of objects can be studied to maximize corps exposure to light. Understanding shadows is important for medical imaging, as organs may cast shadows on each other which may change the appearance of the actual image.

References

‌