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.
The most requested feature was to remove the 32 character limit. I keep that as a "soft limit", so you'll see a warning while typing ahead.

Example: tixy.land/?code=sin%28at…

So, no need to hack the maxlength attribute anymore while experimenting.

h/t @joeytwiddle Image
I've created an GIF maker for tixy.land. Just add /gif to the path and specify the duration.

Eg: tixy.land/gif/?code=4+%2…

This will render and download a high-res Animated GIF that works perfectly in a tweet.
Hint: There is also an experimental tool that will render a (static) PNG preview on the server. I might use that for the link open-graph previews:

tixy.land/image/?code=4+…
Added many examples to the tixy.land tutorial, including some great community contribution, like:

I've ported tixy.land to pure Node.js!

You can now render the examples in the command line as beautiful #ASCII art:

> npx tixy-land "sin(t-sqrt((x-7.5)**2+(y-6)**2))"

• • •

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

2 Apr
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
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

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

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!