Hacker-like Text Transform

Fri Dec 14 2018


Today we are happy to present our newest open source library animatext that can helps you animate text change. This library was heavily inspired by most hacker movies' scene where the hacker is decrypting something to its original text and while decrypting, the text changed randomly as if its looking for the right value.

Demo: https://codepen.io/hdriqi/pen/aPdNOB

Github: https://github.com/EviusIndustri/animatext

Behind the scene

First, we find the distance between each character of the original text and new text by their ASCII code. ASCII code is the numeric representation of characters in computer. The distance will be used to find out how far the characters need to be transformed.

Ascii TableFor example, if our first character in the original text is A (65) and the first character of the new text is R (82) then the distance between them is 65 - 82 = | -17 |, which is 17.

By dividing duration and interval we can find out the maximum steps for each character to transform to the next value. For example, duration of 2000 and interval of 50 resulting in 2000/50 = 40 steps.

If we combine the distance and the steps, we can calculate the rate of change for each step for each character. If we used our previous example then 17/40 = 0.425, means that in each step the original text (A) should be increased at least by 0.425. At the end of the 40 steps the ASCII value of A (65) become 65 + (0.425 * 40) = 82, which is the ASCII code for our target, R.

In each steps, we just need to round the original value and transform the ASCII code to its character representation. For example in step 8, character A will be transformed into D [65 + (0.425 * 8) = 68.4 -> 68].

What if the length of the two sentences are different? We can't find the distance!

To handle that we just need to generate/remove the length difference while randomly transforming its values. When generating new values, we just generate random ASCII code and compare it with the new text on the fly. When removing values, we just randomly transforming the text and just wait until it's removed. How many do we generate and remove in each step is using the same method when we calculate the distance between each character.

For example, if original text has length of 50 and the new text has length of 100. The distance is 50 and it has 40 steps to get from 50 to 100. We can use distance/steps formula so we will have 50/40 = 1.25 for the rate of change.

The randomness

If we just use previous method, then everything will be done only on the last steps (step 40 in our example) we want it as if some values can be found faster than the other. For example original text 'ABC' is transformed into 'DEF' in 40 steps, what we want is on step 20 some value already transformed to the new text, for example 'BED'. To do that we just need to alter the interval for each characters when calculating its rate of change, just subtract the defined interval (50 in our example) by some random value so that its rate of change is faster and can transformed into the new characters faster than the others.

Alright we already explain the animatext's behind the scene and if you want to see the code and use it on your website, just check our github or try it online with codepen.