View my sketch: Pink Cafe Wall
I wanted to turn the pink geometric shapes from my earlier self-portrait into a repeated pattern. The first idea was a grid of two-tone pink diamonds, but I felt it looked more decorative than illusory. I then moved to a pink version of the Café Wall illusion, using alternating dark and light blocks with offset rows.
I kept the pink palette and made a static sketch in p5.js. The blocks are 64 pixels wide, with 3-pixel horizontal gaps. Every other row shifts by 32 pixels. This arrangement is intended to make the level gaps appear tilted. So far, the main experiment has been changing the repeated shape and arrangement; next, I would compare different offsets and gap widths.
The dark-light repetition is easy to see, but judging whether the gaps are horizontal is harder. For me, creating an illusion means making the viewer perceive something that is not actually drawn: here, a diagonal rhythm appears within level rows.
I can predict the block positions because there is no randomness. However, I cannot tell from the code alone how strong the illusion will look. The diamond idea showed me that clear repetition does not automatically create a convincing illusion.
Instead of giving every block its own coordinates, I use two loops: the outer loop moves down one row, while the inner loop draws a dark-light pair and moves across. The positions come from x, y, size, and offset. After each row, this line switches the offset between 0 and 32:
offset = size / 2 - offset;
This is a new sketch using my earlier palette, rather than a direct rewrite of the portrait. It still replaces repeated drawing instructions with a positioning rule. Regular grids are easier to express with loops because their spacing is consistent; irregular arrangements need additional rules. Changing a few simple parameters changes the whole pattern.
How can I use a loop to give each row a different horizontal offset?
for(inital; control; keep going increasement){ }
for(let x=0; x<with; x=x+1){
square(x,200,100);
}