Martin Kleppe Profile picture
Mapper. Reducer. https://t.co/P01fQFzxsF and https://t.co/i2eJi6XDjs creator. @Ubilabs co-founder and @GMapsPlatform GDE. Ex @HHjs and @JSUnconf organizer.

Apr 2, 2021, 13 tweets

I'm fascinated by this simple formula to create bit fields that look like alien art:

(x ^ y) % 9

Source:

<canvas id="c" width="1024" height="1024">
<script>
const context = c.getContext('2d');
for (let x = 0; x < 256; x++) {
for (let y = 0; y < 256; y++) {
if ((x ^ y) % 9) {
context.fillRect(x*4, y*4, 4, 4);
}
}
}
</script>

More examples:

(x ^ y) % 5
(x ^ y) % 17
(x ^ y) % 33

(inspired by )

If we use OR instead of XOR, we get some nice Sierpinski triangles:

(x | y) % 7
(x | y) % 17
(x | y) % 29

Circular patterns:

(x * y) & 64
(x * y) & 24
(x * y) & 47

Steps:

(x ^ y) < 77
(x ^ y) < 214
(x ^ y) < 120

Beams:

(x * 2) % y
(x * 64) % y
(x * 31) % y

This is just beautiful!

((x-128) * 64) % (y-128)

Checker:

(x ^ y) & 32
(x ^ y) & 72
(x ^ y) & 23

Noise:

((x * y) ** 4) % 7
((x * y) ** 5) % 99
((x * y) ** 9) % 3

Rotate:

(x % y) % 4
(y % x) % 20
40 % (x % y)

Minimal:

x & y
x % y
x & 9

You can also combine different patterns:

(x & y) & (x ^ y) % 19
((x ^ y) & 32) * (x ^ y) % 9)
(x * 64) % y * ((x ^ y) < 77)

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling