Rendering 2D maps into 3D graphics inspired us to try and visualize light bending due to gravitational lensing in 2D, and projecting what that would look like in 3D. Furthermore, we wanted to learn a completely new language, such as javascript, to do this project.

What it does

The code computes the intersection point from all of the light rays to all of the boundaries present within the scene, then projects a line from the light source to the closest boundary. If a massive object is nearby, the light rays will bend at a certain angle given by the gravitational lensing formula. To render the 3D scene, we simply take the magnitude of the distance vector from the light source to the closest boundary and generate a bunch of rectangles that have heights relative to its magnitude (for example, inverse square law).

How we built it

We used javascript + html + css to generate our graphics on a locally-hosted webpage.

Challenges we ran into

Making the light bend correctly conflicted quite a bit with the implementation of the light rays for the rendering system because we simply drew a straight line from the light source to the closest boundary. We weren't able to incorporate the gravitational lensing to the final version in time.

Accomplishments that we're proud of

We built computer graphics from scratch!

What we learned

We learned the basics of javascript and computer graphics rendering.

Built With

Share this project: