Challenge for Update

FLOATING POINT IMPRECISION

The biggest challenge by far this update, was in creating the animations for the three new segments. Each animation seems fairly similar, however every animation is hand made. This is by choice but far from the most optimal method of achieving the outcome.

Each molecule in the app is geometric and has very sharp edges that are in very close proximity to each other. Almost like tetris. This is great for being able to build different segments very quickly that have different nucleotides. The problem however is that computers aren’t sure about exactly where the edges are.

Which kind of has the computer thinking that edges of different molecules or 3D objects are in the exact same place, leading to gaps or weird visual inconsistencies between molecules or 3D objects.

Notice how every object connects almost perfectly without any gaps

A fundamental computational problem called the floating point imprecision is behind this. How exactly does this work? Well because the computer can only store so many decimal places computers just approximate values which often leads to cases of where two or more numbers have similar or possibly the same number as a result of missing decimal places.

I think this leads to points on 3D models being moved when rendered after the computer approximates values and finds the edges of 3D models at the same point. Now I’m not going to say I understand how this works completely. If I did I’m guessing that the solution would have been a lot simpler, instead of the one used to solve this issue.

So how did I solve this problem? I would assume that some algorithm that maybe corrects at the stage of rendering that probably requires linear algebra or something if I’m going to be completely honest is probably at least at the time of this update is beyond my current understanding of computer graphics is going to probably be a great solution. I do hope that future discoveries of solutions don’t lead me to sad realisations of unfortunate inefficient amounts of time unnecessarily spent.

The solution was that I just adjusted every number for the edges positions. That sounds really simple. But I can tell you it wasn’t. It takes someone with a crazy amount of obsessive compulsive disorder to painstakingly adjust decimal places at three different numbers because 3D dimensional space requires 3 numbers to specify a location of an object, this was required for every object that was out of place or had a visual inconsistency. And then checking by eye and then testing the app by running and interacting with the animations to make sure there were no gaps between objects.

Unfortunately due to different screen sizes, I was unable to account for all the visual inconsistencies that might possibly exist. So humans will probably still see one occasionally.

If you’re looking for more exact information on how computers calculate numbers check out binary counting by scrolling down the contents after clicking the link here and then read the following at the link here. I’ll be honest, I don’t completely understand it, only thing I really understand is that it made creating the animations for the segments really tough.

These entries are intended to provide value and a look at the behind the scenes of creating an app.