Reverse Engineering Code Art - Part 2
Analyzing The eye of the storm
eval(unescape(escape`𩡯𬠨𪐽𪀽𝐴𣰽𬐽🠨𣑡𭁨𨑮𩁯𫐨𞱸𫁥𨑲𤡥𨱴𝐬𝠫𛰲𛀳𝐬𞀰𮀮𩡩𫁬𤡥𨱴🐨𭰽𛁙👨𛁳👷𛰨𭀥𞀩𛰹𛁳𛁸𪑬𫁓𭁹𫁥👠𪁳𫀨𣑡𭁨𮑰𫱴𛁙`.replace(/u../g,'')))
The whole code is in Unicode, this is to reduce the size of the whole code. Let’s evaluate the Unicode to utf-8
for(i=h=540,O=q=>(Math.random()*2-1)*w;i--;x.clearRect(h+i%2*45,256+(i%4/2|0)*90,35,80))x.fillRect(X=(w=960)+O(),Y=h+O(),s=w/(t%8)/9,s,x.fillStyle=`hsl(150 99%${(Math.hypot(X-w,Y-h)/180)**3}%`);
Much better, now let’s start analyzing it
for (
i = h = 540, O = (q) => (Math.random() * 2 - 1) * w;
i--;
x.clearRect(h + (i % 2) * 45, 256 + (((i % 4) / 2) | 0) * 90, 35, 80)
)
x.fillRect(
(X = (w = 960) + O()),
(Y = h + O()),
(s = w / (t % 8) / 9),
s,
(x.fillStyle = `hsl(150 99%${(Math.hypot(X - w, Y - h) / 180) ** 3}%`)
)
Rearranging things to make it look readable.
There are some JS tricks I ran into used to obscure the code
(w = 960) + O()
is simply960 + O()
with w initialized- In the function
O=q=>(Math.random()*2-1)*w;
even though the paramq
is not used, we have a param asq
is 1 char compared to()
2 chars Math.hypot(X, Y)
to save space instead of(X**2 + Y**2)**0.5
const w = 960;
const h = 540;
const O = () => (Math.random() * 2 - 1) * w;
for (let i = h; i--; ) {
const X = w + O();
const Y = h + O();
const s = w / (t % 8) / 9;
x.fillStyle = `hsl(150 99%${(Math.hypot(X - w, Y - h) / 180) ** 3}%`;
x.fillRect(X, Y, s, s);
x.clearRect(h + (i % 2) * 45, 256 + (((i % 4) / 2) | 0) * 90, 35, 80); // Lens flare
}
Now for the math
Summary
- w is the width of the eye of the storm
O = () => (Math.random() * 2 - 1) * w;
gives value from [-w, w]- Using the
O()
a randomX
andY
is calculated x.clearRect
is used to give the lens flare effectMath.hypot(X - w, Y - h) / 180) ** 3
is used to calculate the lightness inhsl
(distance from center)s
is the size of the pixel,t % 8
so the size varies with time to give the blur effect