The Joy of Tixy

• creativity
• limitations
• coding
• math
• tixy
• 2d
• 3d
• dots

Preface»

I don’t want to take the credit for someone else’s efforts, I would rather share my fascination with the world for what a source of inspiration and creativity Tixy.land was and still is for me and many others.

As long as I don’t know better, it all started in early November 2020 with a tweet from Martin Kleppe alias @aemkei. And as already written in my previous post ”Limitations as a source of creativity”, Tixy.land offers a lot of potential to be creative by restricting the degrees of freedom. Because of that a lot of people have done great things.

Functions and Patterns»

The actual limitation is that you can write a function body which calculates a value out of the arguments t, i, x and y. The return value of that function should be between -1 and 1. So t is the time, i the index and x and y the coordinates of a dot in a 16 x 16 dot matrix. If your return value is a function of t, you get an animation, otherwise it is a static pattern. The character limit for the function was a bit tricky at times.

Here’s a basic example written as a Javascript Arrow function.

const tixy = (t,i,x,y) => Math.sin((y-x)/8+t);

There were many who took part within a short period of time including me. Take a look at the thread of the initial tweet. A gallery of some can be found at https://tixy.land/gallery/

Code golf and Gamification»

Code golf is a type of recreational computer programming competition in which participants strive to achieve the shortest possible source code that implements a certain algorithm. - Wikipedia

It seems rather wanted than forbidden to take up other people’s ideas and code to play Code golf. I think, this is similar but not the same as Photoshop Tennis in which people always change something using Photoshop based on the previously changeg picture. In the end a strongly modified result comes out.

There was the idea to play games with Tixy.land. My attempt was Tic Tac Toe, but the official character limit for the function was pretty tough. Here are the tixy functions to the four pictures below:

(t,i,x,y) => (5*y/5*x%5<1)||-(x<5&&y<5);
(t,i,x,y) => (5*y/5*x%5<1)||-(x<5&&y<5)||([30,30,30,30][y-6]&1<<x-5);
(t,i,x,y) => !(x%5*y%5)||"011120111"[(x/5|0)%3+(y/5|0)*3]-1;
(t,i,x,y) => !(x%5*y%5)||-(y/10)|0||4/x|0;

Thiemo Kreuz alias @maettig created an interactive Snake game, which works also directly on the original Tixy.land website.

Same same but different»

Languages and Frameworks»

Nobody said you have to limit yourself to the formulas. And so people started to clone Tixy.land. They re-created the renderer in different programming languages or using different frameworks or tools. The output was also different. A search on Github reveals a surprising number of results. My list is certainly not complete, but it gives an idea of how contagious Tixy.land is.

• Ruby,
• Swift,
• Kotlin(1),
• Kotlin(2),
• Python (with WASM),
• GLSL Shader (.frag file),
• Haxe,
• C++,
• React,
• Elm(1) by @DeedoDev,
• Elm(2) by @arkh4m and
• Svelte by @matths (myself)

I was and still am very much into Svelte, so I did a Javascript Implementation with Svelte, you find a Svelte REPL Playground here and here. And most of the examples or “illustrations” at this blog post are based on my early versions. Interesting, that this did inspire @lihautan to make a youtube tutorial about this.

Resolution»

Then there’s again Thiemo Kreuz alias @maettig who came up with a high resolution tixy version.

And there was another so called HDTixy was created by @lebster.

Martin Kleppe alias @aemkei, the Tixy inventor himself, implemented also a command line version using node.js which renders as Ascii art.

And in preparation for my LED version, I developed a variant where, instead of dots, squares are now shown in color gradation to the result value. Here you can see such different variants with the same Tixy function.

Tixy’s Cartesian coordinate system already allows us to calculate x and y just by the index i assuming a square field and size being the width and height of that field. In return, we can determine as well i out of x and y.

const iToX = i => scale(i%size);
const iToY = i => scale(Math.floor(i/size));

const xyToI = (x, y) => y*size+x;

Coordinate system»

And then again there were other Mash-ups that used different coordinate systems.

Anthony Fu alias @antfu7 for example was inspired by Tixy to create a renderer using Polar Coordinates. You can play with his invetion at https://100.antfu.me/005. The callback function for this renderer expects t, r and th instead of t, i, x, y as parameters, where t is time, r is the radius, or distance from center and th is the angel theta.

Thomas Broadley had a very similar idea, his version can be found here. He still renders the result with 16x16 dots, while Anthony renders in high resolution.

The result still being rendered in 2D space, you can calculate r and th based on i like this:

const iToRandTh = i => {
	const c = {
		x: (iToX(i) - size/2) / (size/2),
		y: (iToY(i) - size/2) / (size/2)
	};
	return ({
		r: Math.sqrt(Math.pow(c.x, 2) + Math.pow(c.y, 2)),
		th: Math.atan2(c.y, c.x)
	});
};

Here are a few examples with their polar coordinate formulas:

(t,r,th) => Math.sin(r - 3*t)
(t,r,th) => r*Math.sin(5*r-3*th-t)
(t,r,th) => Math.sin(5/(r+.2)-t)*Math.sin(5*th+t)
(t,r,th) => Math.abs(-3*th/Math.PI+t/3)*4%2>1&&-r||r

You can see those using Anthony Fu’s Polar renderer:

• sin(r-3t)
• r*sin(5r-3th-t)
• sin(5/(r+.2)-t)*sin(5th+t)
• abs(-3th/PI+t/3)*4%2>1&&-r
• Addon: sin(t-10r)+cos(th)

But you could also convert a formulas from Polar back to Cartesian coordinates, replacing x and y with this:

const rthToXy = (r, th) => ({
	x: r * Math.cos(th),
	y: r * Math.sin(th)
});

But as a fun fact, the ripple effect a little further up on this page is already using r in its Tixy formulas, resulting in a much eaier Trth formulas:

(t,i,x,y) => Math.sin(t-Math.sqrt(Math.pow((x-7.5),2)+Math.pow((y-6),2)))
(t,r,th) => Math.sin(t-9*r)

See these both formulas produce the same ripple effect on Anthony’s page:

• sin(t - sqrt( (9r · cos(th))² + (9r · sin(th))²) )
• sin(t - 9r)

3D Space»

It was only a matter of time before Tixy was also done in 3D. I quickly had the idea to adapt my early experiments and represent the return value of the Tixy function as the height of an isometric cuboid. For that I could still use DIV elements and CSS pseudo elements and transform properties to rotate the sides of the cuboid. But 512 cuboids cost the browser quite a bit of power, therefore the animation only starts on mouseover. See the result in the first of the following four demos.

Inspired by the tweet of @ycwhk about a ripple effect using three.js and his source at codepen I came up with demos similar to the ones above, see my tweets one, two and three.

Fred Moser alias @frdmsr did another, similar 3d mashup but with mapboxgl.

But Noah Doersing alias @doersino went a step further and then really added a z and made Tixyz with 8 x 8 x 8 Dots. The result is impressive, the source code at Github, some discussions on Hackernews. I’ve read, he uses David DeSandro, alias desandro, Zdog 3D library.

Hardware Hacks»

Now I come to the hardware hacks. A dot matrix could also be made out of LEDs. And I wasn’t the only one who tried it, either.

• Owen McAteer alias @motus_art ported Tixy.land to his 15x15 Arduino powered LED matrix. Just recently I found a tweet from him where he works with a flip dot display.
• Yaroslaw Turbin alias [@ldir_ko] made an emulator for Tixy functions using the Soulmate IDE, I’ve found at Reddit.
• Ateş Göral alias @atesgoral put Tixy.land on his hacked Ikea FREKVENS cube.
• Julian Jocque alias @okiyama was running Tixy.land on a LED panel on his RaspberryPI 4.
• Martins Kleppe, @aemkei himself putted Tixy.alnd Animations to his @Divoom Pixoo 16x16 LED display, there’s a gallery of available animations.
• Sylvain Pollet-Villard alias @SylvainPV is using a 8x8 Launchpad MK2 through WebMidi.

I myself, @matths did order some chinese 16x16 WS2812B LED Panel and after some unsuccessful tries with the SP110E Bluetooth controller, I switched over to a Raspberry PI Zero and got it working quite easily. You can read my howto at github. But I didn’t stop there, as soon as I could display something on the LED matrix, I started to come up with more ideas, I can display 16 x 16 pixel favicons or do some pixel font scrolling effects, but that is a different story.

Game engines»

Austin Henley alias @austinzhenley was also inspired by Tixy.land, so he made a simple game engine with 16 x 16 animated “pixels” called Wiggleface Game Engine. He used it “as an in-class activity during the last week of the semester”, he wrote at hackernews.

Games and game engines can be a source of inspiration on their own. And although the next one was not inspired by Tixy.land, it has some similarity. James Routley, alias jamesroutley created 24a2.routley.io where all games feature a 24 by 24 grid of dots long before Tixy was born. Source code available at Github.

Conclusion»

Sure, then we move further and further away from Tixy, but that’s how new things come about. That’s inspiration.

So what inspired Martin Kleppe to create Tixy.land in the first place? In a tweet he states that “Inspiration came from the @hundredrabbits logo, @dwitter_net, @ilithya_rocks and @Shadertoy“.

I was inspired by Tixy.land a lot and I hope the blog post and all of its links don’t overwhelm you, but inspire you to do something beautiful as well.

Be inspired and happy coding!

p.s. I’ll publish the code to my different Tixy Svelte components soonish.