Reverse Engineering Code Art - Part 3

Original Dwitter by Author

for(c.width=i=608;i--;)i%320<64&&i&2||i>447&i%32<6|i>576&i%2||x.fillRect(304+S(A=i/5.1+t)*(80+19*(i<256))+i%5,99+(i>>5)*12+(s=C(A)*8),8+s,9)

---

Let’s start with a simple format

for (c.width = i = 608; i--; )
    (i % 320 < 64 && i & 2) ||
      ((i > 447) & (i % 32 < 6)) | ((i > 576) & i % 2) ||
      x.fillRect(
        304 + S((A = i / 5.1 + t)) * (80 + 19 * (i < 256)) + (i % 5),
        99 + (i >> 5) * 12 + (s = C(A) * 8),
        8 + s,
        9
      );

---

Now let’s rearrange it a bit

Hmm, not much improvement in understanding the code yet

Notes:

• c.width = 608 is to clear the canvas at the start of the animation frame
• The effect of rotation is handled by the 304 + (Math.sin(A) * 80), 99 + (Math.cos(A) * 8) where A = i / 5.1 + t

c.width = 608;
for (i = 608; i--; ) {
  if (!(i % 320 < 64 && i & 2)) {
    if (!(((i > 447) & (i % 32 < 6)) | ((i > 576) & i % 2))) {
      const A = i / 5.1 + t;
      const s = C(A) * 8;
      x.fillRect(
        304 + S(A) * (80 + 19 * (i < 256)) + (i % 5),
        99 + (i >> 5) * 12 + s,
        8 + s,
        9
      );
    }
  }
}

---

Let’s break this down

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    x.fillRect(
      304 + S(A) * 80,
      99,
      8 + s,
      9
    );
  }
};

Would produce a single strip

---

Adding the varying s we get a band

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    x.fillRect(
      304 + S(A) * 80,
      99 + s,
      8 + s,
      9
    );
  }
};

---

We add (i >> 5) * 12 so we can get multiple bands, and make it a cylinder

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    x.fillRect(
      304 + S(A) * 80,
      99 + (i >> 5) * 12 + s,
      8 + s,
      9
    );
  }
};

---

Adding (i % 5) make some segments in the band elevated, giving the bricks effect

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    x.fillRect(
      304 + S(A) * 80 + (i % 5),
      99 + (i >> 5) * 12 + s,
      8 + s,
      9
    );
  }
};

---

To make the top of the tower larger than the base we increase the x pos by adding 19 * (i < 256)

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    x.fillRect(
      304 + S(A) * (80 + 19 * (i < 256)) + (i % 5),
      99 + (i >> 5) * 12 + s,
      8 + s,
      9
    );
  }
};

---

Beyond this it’s not very straightforward but let’s break it even more

• The expression ((i > 447) & (i % 32 < 6)) is to add the entrance at the bottom of the tower
• ((i > 576) & i % 2) is to add the brick effect at the base layer of the tower
• ((i > 447) & (i % 32 < 6)) | ((i > 576) & i % 2) is to combine both the equations

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    (((i > 447) & (i % 32 < 6)) | ((i > 576) & i % 2)) || 
    x.fillRect(
      304 + S(A) * (80 + 19 * (i < 256)) + (i % 5),
      99 + (i >> 5) * 12 + s,
      8 + s,
      9
    );
  }
};

---

Now for the last condition

• i % 320 < 64 cause a section in the tower to not be filled
• Along with i & 2 the equation (i % 320 < 64 && i & 2) will create the windows in middle and the iconic tower shape in the top
• To test the last statement I extended the height of the tower to 960

const u = (t) => {
  c.width = 608
  for (i = 608; i--; ) {
    const A = i / 5.1 + t;
    const s = C(A) * 8;
    (i % 320 < 64 && i & 2) || 
    x.fillRect(
      304 + S(A) * (80 + 19 * (i < 256)) + (i % 5),
      99 + (i >> 5) * 12 + s,
      8 + s,
      9
    );
  }
};

---

Putting all the equations together we get the tower

Summary

• c.width = 608 is to clear the canvas at the start of the animation
• The effect of rotation is handled by
  • X = 304 + Math.sin(A) where A = i / 5.1 + t
  • Y = 99 + s
  • size of brick is s = Math.cos(A) * 8
• We now have a single band, to repeat the bands (i >> 5) * 12
• To make some segments elevated and get the brick effect we use (i % 5)
• To make the top of the tower larger than the base we increase the x pos by adding 19 * (i < 256)
• The expression ((i > 447) & (i % 32 < 6)) is to add the entrance at the bottom of the tower
• ((i > 576) & i % 2) is to add the brick effect at the base layer of the tower
• i % 320 < 64 cause a section in the tower to not be filled
• (i % 320 < 64 && i & 2) will create the window effect

Whew, this probably took quite effort to create, incredibly satisfying experience for me to figure it out