tixy.land: the website that animates 256 dots with code

tixy.land is a browser toy that turns one short line of JavaScript into a moving picture made of dots. A visitor types a tiny expression, a 16 by 16 grid of circles starts to pulse, swirl, and ripple, and the whole thing stays under 32 characters. It is part playground, part puzzle, and a neat demonstration that animation does not need a game engine, a timeline, or even many keystrokes.

In brief

• tixy.land draws a 16 by 16 grid, 256 dots in all, and redraws it every frame from a single function.
• That function receives four values, t, i, x, and y, and returns one number that sets each dot's color and size.
• Expressions are capped at 32 characters, which quietly turns casual doodling into code golf.
• It is free, open source, and the work of Martin Kleppe, a programmer known for squeezing effects into almost no code.

How one line of code becomes a picture

The idea behind tixy.land is small enough to hold in one hand. The screen is a fixed grid, sixteen columns by sixteen rows. Every circle on that grid runs the same function, and the function decides what the circle looks like right now. There is no scene to manage and no list of objects to move. There is one rule, applied 256 times, sixty times a second.

The function returns a plain number, and tixy reads that number in two ways. The sign chooses the color: a positive result paints the dot white, a negative result paints it red. The magnitude chooses the size, so a value near zero shrinks the dot to nothing and a larger value fills its cell. Because the grid is recomputed on every animation frame, changing numbers become motion with no extra effort from the author.

This is the quiet trick of the whole site. The visitor never writes a loop, never clears a canvas, and never schedules a redraw. tixy owns all of that machinery. What is left to the human is the interesting part, the math that maps a position and a moment to a brightness. The browser does the drawing; the person does the thinking.

The cost of that approach is pleasantly low. Running one short expression 256 times per frame is trivial for a modern browser, so the grid stays smooth even on a phone. It also means there is nothing to install and nothing to wait for. The page loads, the function runs, and the dots are already moving before a visitor has decided what to type. The whole experience is contained in a single screen with no navigation to speak of.

The four letters: t, i, x, and y

The name is the signature. A tixy expression is written as a function of four inputs, and learning what each one means is most of the learning curve.

t is time

The letter t holds the number of seconds since the animation started, as a floating point value that keeps climbing. Anything that should move over time leans on t. Wrapping it in a sine wave, as in sin(t), produces a smooth back and forth; multiplying it, as in sin(t*5), speeds that oscillation up. Without t, a tixy picture is a still image. With it, the grid breathes.

i is the index

The letter i counts the dots in order, from 0 for the top left circle to 255 for the bottom right. It is a single flat number for the whole grid, which makes it handy for effects that should sweep across every dot in sequence rather than respect rows and columns. Patterns built on i tend to look like scanning or cascading.

x and y are the coordinates

The letters x and y give the column and the row of the current dot, each running from 0 to 15. They are what let an expression care about shape and position. A test like x less than y lights up a triangle; the distance of x and y from the center, measured with hypot, draws rings. Most of the recognizable tixy patterns, the diagonals, the frames, the expanding circles, come from doing arithmetic on x and y.

One convenience hides in the background. The expression runs inside a JavaScript with block scoped to the Math object, so functions like sin, cos, tan, hypot, and atan are available without a Math prefix. That is why tixy code reads so cleanly and why 32 characters stretch surprisingly far.

Why the 32 character limit matters

The character cap is not an accident, and it is the feature that gives tixy its personality. A generous editor would let people paste in long, literal descriptions of what they want. A tight one forces them to find the shortest expression that happens to produce an interesting result. That shift, from describing a picture to discovering one, is the entire appeal.

The site's own tagline, visible in the page source and on its repository, is creative code golfing, and the phrase is exact. Code golf is the sport of solving a problem in as few characters as possible. tixy applies that sport to visuals, so a working animation and an elegant one often differ by a handful of symbols. The input box even turns red when an expression crosses the 32 character line, a small, firm nudge back under the limit.

The constraint also keeps the barrier to entry low. Nobody is going to write a thousand lines by accident. A newcomer can change one number, watch the grid react, and immediately understand that they are in control. The limit makes the toy approachable and, at the same time, gives experts something to chase.

The built-in examples do the teaching

tixy.land ships with a rotating set of sample expressions, and clicking the grid advances to the next one. This is the fastest way to learn, because each example is both a finished effect and a readable lesson. A commenter on the Hacker News discussion of the site made the point directly, noting that the many built in examples double as great documentation.

The samples cover a satisfying range. Some are almost trivial, like a single sine wave that makes the whole grid fade in and out together. Others combine a time term with a distance term to send a ripple outward from the middle, or mix a modulo operation with a coordinate to produce a drifting checkerboard. Reading them in sequence builds an intuition for which small moves produce which kinds of motion.

Because the examples are short, they invite tampering. A visitor can click to a pattern they like, change a 5 to an 8, and watch the rhythm shift. That loop, see an effect, tweak a number, see the result, is where the learning actually happens. The site never lectures; it just keeps handing over working toys and letting curiosity do the rest.

A few patterns, read closely

Reading a handful of tixy's own examples in detail shows how much the four letters can carry. Take the one labeled frame, written as x==0 | x==15 | y==0 | y==15. Each comparison is true only along an edge of the grid, true counts as 1 and lights the dot white, and false counts as 0 and hides it. The result is a clean white border drawn without any notion of a rectangle, just four tests on the coordinates.

The diagonals example, y == x || -(15-x == y), is sneakier. The first half lights the main diagonal where the row equals the column. The second half tests the opposite diagonal and then negates the result, so those dots come back red instead of white. One short line produces a two color cross and quietly teaches that the sign of the answer is doing real work.

Motion arrives when t joins the coordinates. The drop pattern, 8*t%13 - hypot(x-7.5, y-7.5), subtracts each dot's distance from the center from a value that climbs and resets with time. The moment of balance sweeps outward as t grows, so a ring appears to expand from the middle and fade at the edges, over and over. It is a shock wave written in a few characters.

Not every example is tidy, and that is part of the charm. The one called disco, sin(t*5) * tan(t*7), multiplies two fast trigonometric terms with no spatial input at all. The tangent spikes wildly, the whole grid stutters between white and red, and the effect looks less like geometry than like a broken television. Studied side by side, these four lines map most of the grammar a newcomer needs.

Saving and sharing a pattern

A tixy creation is just text, which makes sharing trivial. Pressing enter in the editor writes the current expression into the page URL as a code parameter, so the address bar becomes a permanent link to that exact animation. Sending someone a pattern means sending them a URL, and opening that URL drops them straight into the running result with the code already in the box.

This design has a pleasant side effect. There is no account, no save button, and no server storing anyone's work. The artifact and its address are the same thing. It fits the spirit of a site that is trying to stay as small as the code it celebrates, and it means a clever one liner can travel across chat windows and social posts without losing anything.

Who built it

tixy.land is the work of Martin Kleppe, a developer with a long history of extreme minimalism in JavaScript. His personal site, aem1k.com, is itself a gallery of tiny programs, and he is widely associated with the culture of writing code that is as much art as utility. tixy fits that body of work precisely: a serious idea delivered as a playful, almost absurdly compact tool.

The project is open source and lives on GitHub as aemkei/tixy, where the repository description is simply the function signature followed by the phrase creative code golfing. The code is short enough to read in a sitting, which is on brand for an author whose whole point is that small things can do a lot. For anyone who wants to understand the rendering loop rather than just the expressions, the source is the primary document.

That provenance matters because it frames what tixy is for. It is not a commercial product chasing engagement. It is a demonstration piece from someone who enjoys the craft of compression, shared freely so other people can enjoy it too. The site has stayed deliberately plain for years, and that restraint is part of why it keeps circulating.

Where it sits among browser toys

tixy belongs to a small family of sites that treat code itself as the medium rather than a means to an end. The shared idea is that a very short program, given a good runtime and an audience, becomes a form of expression. Readers who enjoy that flavor of the web, where the point is the elegance of the mechanism, will find tixy an unusually pure example.

It also sits comfortably next to the quieter, single purpose corners of the internet, the sort of pages that do one thing with no sign up and no clutter. For a related kind of generative calm, a visitor might wander over to Sandpile, which lets patterns emerge from a simple rule rather than a typed expression. Both reward the same posture: show up, poke at something, watch a system respond.

What sets tixy apart in that company is how legible its magic is. Many generative toys hide their rules. tixy puts the rule in an editable box at the top of the screen and dares the visitor to change it. The result is a site that is fun to look at and, rarer still, fun to understand.

How to get the most out of a visit

The best first move on tixy.land is to resist the keyboard and just click the grid a few times. Cycling through the examples builds a feel for the vocabulary before any typing starts. Only once a pattern looks intriguing is it worth stopping to read the expression that produced it.

From there, the fastest way to learn is to break things on purpose. Swap a plus for a minus, double a constant, wrap a term in sin, and watch what the grid does. Because every change is live and every expression is tiny, mistakes cost nothing and reveal a lot. The 32 character ceiling means there is never a wall of code to untangle, only a short phrase to adjust.

Anyone who lands on something they like should press enter to bake it into the URL, then keep that link. Over a few sessions, a visitor ends up with a small personal collection of one line animations, each one a URL, each one a reminder that a picture can be an idea compressed down to almost nothing.

FAQ

Do I need to know JavaScript to use tixy.land?

Not to enjoy it. Clicking the grid cycles through working examples with no typing at all. To create original patterns a little familiarity with arithmetic and functions like sin helps, but the 32 character limit keeps everything small enough to learn by experiment rather than by study.

What do the colors and sizes of the dots mean?

Each dot runs the expression and gets back a number. A positive number makes the dot white and a negative number makes it red, while the size of the number sets the size of the dot. A result near zero makes the dot vanish, which is how patterns create empty space.

Can I save or share something I make?

Yes. Pressing enter stores the current expression in the page URL, so the address bar becomes a shareable link to that exact animation. There are no accounts and no server side saving; the link is the whole artifact, and opening it restores the code and the running result.

What is code golf, and why does tixy use it?

Code golf is an informal programming sport where the goal is to solve a problem in the fewest characters possible, rather than the clearest or fastest way. tixy applies that mindset to visuals, which is why its tagline is creative code golfing and why the editor caps every expression at 32 characters and turns red when a line runs over.

Who made tixy.land and is it open source?

It was created by Martin Kleppe, a developer known for writing very compact JavaScript, and it is open source. The code lives on GitHub as aemkei/tixy, and his personal site at aem1k.com collects more work in the same minimalist spirit.