By
@urged-st
Simulates gravitational lensing from Earth's perspective, with variables that can be used to explore how different types of massive objects can affect the path and appearance of background light.
I have developed a functioning gravitational lensing simulator, where you can drag a massive object across a real deep field image and watch it warp the light from background galaxies in real time. You can adjust the mass of the lens and switch between presets simulating different object types: a simple lens, black hole, neutron star, and galaxy cluster, each with a distinct visual appearance.
The most technically challenging part was the rendering architecture. Rather than handling everything in p5.js, I wrote a custom GLSL fragment shader running in WebGL to perform the actual light deflection, with p5.js running as a separate overlay layer for the UI and lens visuals.
This was my first time writing a shader, and getting the aspect ratio correction and UV space deflection maths to work correctly took a long time. I also had to carefully calibrate the p5 lens visual to match the shader's distortion radius, since they compute size differently.
The landing overlay and info cards took a significant amount of time across many iterations because I wanted the design to feel polished and intentional rather than throwaway, and I'm especially happy with how the article view and card animations turned out. If the colour scheme and UI style look familiar, that's intentional cause I've developed a consistent design language across my simulators, using the same typefaces and colour palette to give them a coherent identity.
One of the main limitations is having to model everything as a perfect circle as I have never made a shader before this, but too complex and users won't really enjoy it.
Thanks for reading, hope you find this interesting.
Ok so I have been polishing this up now, making it look complete and just using trial and error to adjust the values for distortion cause there were quite a few annoying issues with that. Now, I present the finished G-Lens simulator. So, what have I done since my last devlog? I’ll split it into sections for you.
Added a dedicated side panel for stats, where there is a low opacity rectangle to create separation from the background image as it was hard to read the stats before.
Added labels to everything where needed
Changed the style of the “simple” preset from a solid blue circle to a circle with a blue glow, it’s nothing necessary but just looks better than a solid circle.
Added bg switcher
Added auto scaling to each bg - this was necessary as different images had galaxies of different sizes, so the same massive black hole would look disproportionate if you used the same default scaling. So, I changed the scaling based on which image it is (no auto detect or anything but you see the point lol)
Added a show/hide button for the lensing - previously this would prevent lens movement but there wasn’t really a reason to restrict this so I reverted it.
Of course, we needed a reset button lol.
Had to change distortion scaling with trial and error (this was the majority of 2hrs) and also modelling and remodelling the distort to match the scaling of the size of the lens.
If you have seen my other sim, you’ll know I wasted no time on adding presets.
Well I now have presets for this sim too to replicate lensing from different celestial bodies
Also, the distortion was kinda eliptical, so I had to fix this as it would change due to different aspect ratios (now its circular).
Added a mass slider, this had some layering issues before but thats not a problem now. I had to fix a bug where the field size and lens size increased at different rates (my stupid ahh used two different equations) so I just rewrote the equations I used for both.
Overall a pretty productive 1hr 30mins, will probably add MORE UI features to make it feel more polished, change the bg image etc. Also probably a toggle lensing button.
See you in the next one!
all video devlogs are at https://instagram.com/urged.st
Okay so for the last 4 hours i’ve been fighting with my shader code as it didnt work for a long time, but it finally works.
Overall, that 4 hour period was a rollercoaster and i’m glad its over. If you want to see how it broke (I didnt devlog this cause I was too preoccupied) there’s a video devlog on my instagram:
Been toying around with distortion lately, I’m still torn between making a full on shader or just having distortion to look like lensing. Most of my time spent has been trial and error with different ways of distorting, from basic inward radial distortion to a more complex particle tracing distortion. I am gonna try and perfect this before moving on I think, because if I can’t get this right then in my opinion I have a long way to go before making a shader.
added mass slider, larger masses = more gravity, so more lensing/distortion!
made the source draggable, but I don’t know how useful this really is lol (maybe easier to centre, to see einstein rings?)
This is, to say the least, gonna be hard.
I have a rough idea of what I’m gonna do, but really i have never made a shader before or used GLSL.
Luckily I decided not to do this today as I was already tired and decided to make a prototype which rather than solving the lens equation, simply uses a radial distort to… well distort the space around it. I did initially try distort a point mass (yeah my bad) so obviously had to switch it to a bunch of particles densely packed. This actually shows a distort, even if its not accurate to astrophysics (this isn’t the goal for today)
Next steps? think about how i will integrate actual physics into this, and read MORE research papers.
