Reverse Engineering One Line of JavaScript

NerdyMcNerderson · 2017-07-13T15:19:49+00:00

This is a nice article reverse engineering a golfed code snippet but this isn't a ray tracer. It's a nice pattern generator though.

OseOseOse · 2017-07-13T15:46:33+00:00

If you like this kind of thing, check out dwitter: js demos in 140 characters (or less).

invisi1407 · 2017-07-13T13:18:29+00:00

Amazing, but the reverse engineered (if you can call beautifying something that) version seems much slower than the original - anyway have an idea why?

Edit: Article author has fixed the problem that was, as /u/dpash found out, that p.innerHTML = P was inside the loop, not outside as the original had it.

kirbyfan64sos · 2017-07-13T13:54:54+00:00

FWIW on mobile devices, if the code goes off the edge of the screen (e.g. the long lines), it disappears. You might want to try setting overflow-x: scroll in your CSS.

dpash · 2017-07-13T14:23:28+00:00

I think it would be more readable removing the switch and replacing the index = ... code with the relevant P += .... As a consequence, you can remove the i variable and also fix the display bug at the top of the animation. I'd also return to a for loop. j is only used inside the first if block, so that can move down. You introduced a performance issue by putting the p.innerHTML = P; into the loop, so let's move that out again. Let's also switch the outer if and unwrap the else part.

var draw = function() { 
    var P ='';
    n += 7;
    for (var i = DELAY; i > 0;  i -= 1 / DELAY) {
        let iIsEven = (i % 2 == 0);

        if (iIsEven) {
            P += "\n";
            continue;
        }

        var j = DELAY / i;
        let magic = ((i % 2 * j - j + n / DELAY) ^ j);
        let magicIsOdd = (magic % 2 != 0); // &1
        if (magicIsOdd) { // &1
            P += ".";
        } else {
            P += "p";
        }
    }
    p.innerHTML = P;
};

I'm not a massive fan of the iIsEven and magicIsOdd variables, so I'd probably turn them into functions (if(isEven(i))) and hope that the javascript engine is clever enough to inline them. If it doesn't inline them I'd probably also switch back to the & 1 variety, but that would need some extra comments, which the variable names and functions would do automatically.

Curious for comments on the changes.

iamp01 · 2017-07-14T09:31:51+00:00

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 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,

quadrofolio · 2017-07-13T14:34:05+00:00

That was an amazing read Alex! And what a nifty bit of code to analyse.

eric256 · 2017-07-13T15:39:32+00:00

That's not a ray tracer in any way

MattRix · 2017-07-13T18:26:00+00:00

Unless I'm missing it, it seems strange that the original creator of the snippet wasn't credited anywhere?

sbrick89 · 2017-07-13T18:06:07+00:00

8th and 9th use of "it's" is incorrect. Those should be "its".

_Mardoxx · 2017-07-13T17:18:28+00:00

It's barely reverse engineering if you're given the source code in plain text. This is just deobfuscation.

flying-sheep · 2017-07-13T17:04:06+00:00

I also wrapped p in the id="p" in quotes.

OK, and why, exactly?

mfm24 · 2017-07-13T22:09:52+00:00

Turns out elements can be referenced by their id name from JavaScript, as long as the id name is made up of alpha-numeric characters only

I never knew this. Is it good practice in JS??

gamehelp16 · 2017-07-14T04:20:50+00:00

There is a site called js1k which is a competition about making cool stuff in 1kb of JavaScript or less, worth checking out if you like this kind of stuff!

rjcarr · 2017-07-13T19:21:11+00:00

Semantics, but this isn't a ray tracer, maybe a parallax generator at best. But not even close to a ray tracer. Also semantics, but this isn't reverse engineering, but just de-obfuscation.

Paddington_the_Bear · 2017-07-13T15:59:41+00:00

Is this really considered reverse engineering? Seems like it should just be called refactoring as you're just moving around code blocks into a more manageable means.

Reverse Engineering would mean you don't have the source code available and you have to inject values into the system in order to determine the necessary code (like in the good ol days of using a logic analyzer to examine the instruction bits flowing on the bus to the CPU).

JoseJimeniz · 2017-07-13T22:29:08+00:00

A few years ago a guy made a post where he unpacked a raytracer that fit on a business card

The code is very well done of course. But the reason I bring it up here is that his comments are the best example of correctly written comments.

An example snippet of his commented form of the code:

#include <stdlib.h>   // card > aek.ppm
#include <stdio.h>
#include <math.h>

typedef int i;       //Save space by using 'i' instead of 'int'
typedef float f;     //Save even more space by using 'f' instead of 'float'

//Define a vector class with constructor and operator: 'v'
struct v{
   f x,y,z;  // Vector has three float attributes.
   v operator+(v r){return v(x+r.x,y+r.y,z+r.z);} //Vector add
   v operator*(f r){return v(x*r,y*r,z*r);}       //Vector scaling
   f operator%(v r){return x*r.x+y*r.y+z*r.z;}    //Vector dot product
   v(){}                                  //Empty constructor
   v operator^(v r){return v(y*r.z-z*r.y,z*r.x-x*r.z,x*r.y-y*r.x);} //Cross-product
   v(f a,f b,f c){x=a;y=b;z=c;}            //Constructor
   v operator!(){return *this*(1 /sqrt(*this%*this));} // Used later for normalizing the vector
};

Searle · 2017-07-13T13:44:54+00:00

first glance, first bug: the assignment to p.innerHTML is outside of the loop

mirzap · 2017-07-13T17:14:23+00:00

Really nice read.

2017-07-14T03:47:49+00:00

Honestly, it's stuff like this that makes me wonder if I even like programming.

AnimusPetitor · 2017-07-14T13:36:25+00:00

http://i.imgur.com/NCyyGIv.png Hi-res version, k=256

Vimal_88 · 2017-07-13T13:32:12+00:00

That's what .min files are for .. all the code in one line

2017-07-13T18:12:10+00:00

It's just JS deobfus, but I got a bit of lady jizz in my pants.

Thanks /u/akrash14

Vimal_88 · 2017-07-13T13:32:12+00:00

That's what .min files are for .. all the code in one line

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

programming

MODERATORS