Martin Kleppe Profile picture
Apr 2, 2021 13 tweets 8 min read
I'm fascinated by this simple formula to create bit fields that look like alien art:

(x ^ y) % 9 VALUE = 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 ) 51733
If we use OR instead of XOR, we get some nice Sierpinski triangles:

(x | y) % 7
(x | y) % 17
(x | y) % 29 ImageImageImage
Circular patterns:

(x * y) & 64
(x * y) & 24
(x * y) & 47 ImageImageImage
Steps:

(x ^ y) < 77
(x ^ y) < 214
(x ^ y) < 120 ImageImageImage
Beams:

(x * 2) % y
(x * 64) % y
(x * 31) % y ImageImageImage
This is just beautiful!

((x-128) * 64) % (y-128) Image
Checker:

(x ^ y) & 32
(x ^ y) & 72
(x ^ y) & 23 ImageImageImage
Noise:

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

(x % y) % 4
(y % x) % 20
40 % (x % y) ImageImageImage
Minimal:

x & y
x % y
x & 9 ImageImageImage
You can also combine different patterns:

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

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Martin Kleppe

Martin Kleppe Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @aemkei

Nov 2, 2020
The most minimalist creative coding environment is alive:

tixy.land

Control the size and color of a 16x16 dot matrix with a single JavaScript function. The input is limited to 32 characters – but no limits to your creativity!

🔴🔴
🔴🔴
Some basic hints:

1. Click the dots to get detailed instructions.
2. Update the code to create your own animations.
3. Hit "submit" to save the code in the URL.
4. Make sure to share your creations in the comments!

I will pick the best and add them to the default examples.💕
You can now skip `Math.` in your code and access functions and props like `sin` and `PI` directly! This gives you x*5 more space for your art.

I'm impressed by the overwhelming feedback. tixy.land got 2500 likes, 1000 retweets and 250 replies in less than 24 hours.
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(