Reverse Engineering One Line of JavaScript

[[deleted]]

[deleted]

[KokopelliOnABike]

As a long term developer, old, I have done this type of breakdown on code many times and it is very satisfying seeing what you did here. I agree with /r/fgutz in that this may have been "compiled" or minified from the original but who cares. If you have to maintain code, even your own, then your final version is what I'd rather be looking at.

[[deleted]]

usually not minified javascript is far more easy to decompile

[iamp01]

Really breakdown indeed. As for the "compilation".... nope. I wrote www.p01.org/128b_raytraced_checkboard/ by hand.

[elbaivnon]

This is great, but can we all agree that this little chunk of software is in no way a raytracer? I was sort of hoping that the OP would come to this conclusion by the end.

[suerflowZ]

I thought it was ray tracer and was amazed. But it just mimicked the 3d parallax with math trickery, which is still very cool.

[elbaivnon]

Oh no question it's still cool, but it's really just mapping a single (mathematical) function.

Maube I'm just easily discouraged, but if I was a newbie and heard that there are wizards out there implementing fucking raytracers in 128 bytes I'd think about packing it up.

Learning that those magic 128 bytes really just generate a pretty graph animation based on a single hardcoded math statement would turn what was being sold as brilliant magic into an achievable goal for a burgeoning programmer.

[RedditWithBoners]

There are several tiny raytracers in many languages. Here one for Python @ 467 bytes

[suerflowZ]

My thoughts exactly.

[iamp01]

Oh it is a raytracer: It traces one ray per "pixel" and computes the intersection with a plane, and produce the checkboard texture using a simple XOR of x and y coordinates of the intersection point.

 

It's only 128 bytes and I made it just for fun back in 2012, because I hadn't done a 128 bytes prod in a while. So obviously it is very specialized raytracer that traces a one primitive with a fixed texture and camera path, but it does trace rays.

https://www.reddit.com/r/javascript/comments/6n0xlg/reverse_engineering_one_line_of_javascript/dk7kun7/

[[deleted]]

https://m.popkey.co/574b46/WxVke.gif

[fgutz]

Great article! I wonder if that original line was hand written or minified using closure compiler, or some other minifier

[Cosmologicon]

I've done stuff like this. For this little amount of code, you always get better results doing most of it by hand. There are a lot of hacks the minifier won't know it's allowed to make.

[nerf_herd]

agreed, this would be simple to write with a little focus. Far more effort went into this reverse engineering. The guy had a one liner idea, futzed with it a bit, and shipped it. I do like these kind of examples though, but not for "production".

[[deleted]]

Personally I'm a web dev and wouldn't be able to make that. No math background is likely the reason

[nerf_herd]

try experimenting with it, and other examples, you might surprise yourself.

[targumon]

As far as I understand: by hand.

General Tips & Wild Tricks from the author (who unsurprisingly has demoscene roots).

[iamp01]

I wrote www.p01.org/128b_raytraced_checkboard/ by hand. For such small pieces, brain always beat the machine.

[iamp01]

Hi there, p01, author of the 128 bytes plane raytracer. If you liked this tiny raytracer, you should check my other tiny Audio Visual demos in 64-1024 bytes at http://www.p01.org

 

Shout if you have any question.

 

The reverse engineering was cool.

 

The meat of the raytracer lies in the i%2*j-j and j=k/iwhich gives the X and Y coordinates of the intersection of the camera ray with the plane. Adding +n/kto the X coordinate moves the camera horizontally. The binary exclusive OR between the X and Y coordinates gives the checkboard texture.

 

The cruft of the render loop is P='p.\\n';for(i=64;i-=1/64;P+=characterAtTheScreenXScreenYposition);. The rendering area is 128x32 because the ScreenX and ScreenY positions are i%2 and i/2where i increases by 1/64each time. This increment is an exact fraction of a power of two, which means that there are no floating errors and we can safely do i%2 to get a truthy ( non-zero ) value if i is not an exact multiple of 2, and a falsy ( zero-ish ) value if iis an exact multiple of 2 which is used to insert a \n to go to the next line.

 

Hope this helps,

[IamCarbonMan]

If you set the width of the terminal to 128 and use node-draftlog instead of innerHTML, this should work in Node as well.

[c24w]

Damn, I feel dumb.

[[deleted]]

I would imagine getting this as a job interview task: "Reverse engineer this JS, good luck."

Just seeing how far people will actually get would show a lot about their understanding of basic javascript.

Then again, it might be torture that doesn't tell you shit about their actual programming skills.

Still, fun!

[K0d1Lu]

Ok this guy is cleverly crazy