How a 128‑Byte JavaScript One‑Liner Generates a Ray‑Tracing Demo

Introduction

Recently a question appeared asking to reverse‑engineer a single‑line JavaScript snippet that draws a 128‑byte ray‑tracing demo. The original code uses

setInterval

with a string that is evaluated, updating a

<pre id="p">

element to render the picture.

Making the Code Readable

First the HTML and JavaScript are separated. The variable

k

is renamed to

delay

and the string passed to

setInterval

is rewritten as a real function. The direct DOM manipulation of the

p

element is also made explicit.

var delay = 64;
var p = document.getElementById("p");
var draw = function() {
    var i = delay;
    var P = 'p.\n';
    var j;
    var n = setInterval(draw, delay);
    // original string logic will be expanded below
};

Converting the Loop

The original

for

loop is transformed into a

while

loop so that the loop condition becomes the

while

condition and the remaining statements are placed before or after the loop body.

while (i > 0) {
    p.innerHTML = P;
    j = delay / i;
    i -= 1 / delay;
    // ternary expression handling will be expanded next
}

Expanding the Ternary Expression

The ternary operator

i % 2 ? (i % 2 * j - j + n / delay ^ j) & 1 : 2

is broken down. When

i

is odd, the complex expression is evaluated and masked with

& 1

to obtain a 0/1 result; when

i

is even the index

2

is used.

let index;
let iIsOdd = (i % 2 !== 0);
if (iIsOdd) {
    let magic = (i % 2 * j - j + n / delay) ^ j;
    let magicIsOdd = (magic % 2 !== 0);
    index = magicIsOdd ? 1 : 0;
} else {
    index = 2;
}
P += P[index];

Understanding & 1 and XOR

The bitwise

& 1

extracts the least‑significant bit, effectively testing whether a number is odd. The XOR operator

^

flips bits and is used here to create a pseudo‑random pattern that determines whether a dot or a "p" character is added.

Final Refactored Version

The fully refactored and annotated code is shown below. Constant

DELAY

replaces the mutable

delay

for clarity.

const DELAY = 64; // ~15 frames per second
var n = 1; // setInterval returns an incremental ID, first call yields 1
var p = document.getElementById("p");
var draw = function() {
    var i = DELAY;
    var P = 'p.\n';
    var j;
    n += 7; // original code adds 7 each interval
    while (i > 0) {
        p.innerHTML = P;
        j = DELAY / i;
        i -= 1 / DELAY;
        let index;
        let iIsOdd = (i % 2 !== 0);
        if (iIsOdd) {
            let magic = ((i % 2 * j - j + n / DELAY) ^ j);
            let magicIsOdd = (magic % 2 !== 0);
            index = magicIsOdd ? 1 : 0;
        } else {
            index = 2;
        }
        switch (index) {
            case 0: P += "p"; break;
            case 1: P += "."; break;
            case 2: P += "\n"; break;
        }
    }
    p.innerHTML = P;
};
setInterval(draw, DELAY);

Visualising the Mathematics

Several charts illustrate how the expressions

i % 2

,

64 / i

, and their combination behave across the 64‑iteration range. The diagrams show the alternating odd/even pattern that drives the placement of "p", "." and line‑break characters.

Conclusion

The demo demonstrates how a compact JavaScript one‑liner can generate a recognizable ray‑tracing pattern by repeatedly applying simple arithmetic, modulo, and bitwise operations. Understanding each transformation—from string evaluation to explicit loops and conditional indexing—reveals the clever tricks used to compress the logic into just 128 bytes.