A simple 16x16 dot animation from simple math rules
104 comments
·May 10, 2025stankot
montag
Anybody else reminded of the old Sony logo?
https://tixy.land/?code=y%3C7%26%26%28x%2Bsin%28y%29%3C6.4%2...
edit: much better with a negation :)
leptons
If you haven't seen dwitter yet, you really should head over to https://www.dwitter.net
virtualritz
This is awesome. But it needs a better renderer.
Almost every animation/image there suffers from horrible moiré because a normal browser canvas was not meant for this. Fine line art needs supersampling and high quality filtering.
leptons
You're complaining about a small subset of "dweets" there. There are thousands of great visuals there that are not "fine line art" and do not suffer from what you described. And no, I do not think it "needs a better renderer" as high quality "rendering" is not the point of dwitter.net, the point is producing amazing things in 140 characters of javascript.
jakegmaths
I loved tixy when I first discovered it a few years ago so created this https://www.mathsuniverse.com/tixy (with permission from the original author) with puzzles to solve on the tixy grid. I use it with my computer science students who get really into it.
oneeyedpigeon
Reminds me of [Replicube](https://store.steampowered.com/app/3401490/Replicube/), which has released recently and does the same kind of thing in 3D.
tonetheman
[dead]
dndn1
This is a cool way to teach!
I was blown away by the little functions at first and I too made a clone to experiment with calculang [1].
I added an evaluation feature (F9) so you can select sub-expressions and see what they do, which was helpful to figure out some patterns (video in [2])
xunil2ycom
I've been programming for over 40 years, and I can say this is the most fun way I've experienced to learn this kind of thing. It really is fun.
PebblesRox
My 5yo did great on these until he hit #7 and got stuck! I’m helping him with syntax but trying to hold back from giving conceptual hints for now.
I love the instant visual feedback!
frogarden
Why isn't "(sin(i) * (x > 7)) - (i == 5) + (i == 20) + 0.5 * (i == 32)" a solution to puzzle 36?
acomjean
Fun. Thanks!
Works well on phone. The phone keyboard is a bit clumsy but it works (that’s a phone issue)
soegaard
Well done!
chrisjj
> In computer graphics, the origin (0, 0) is top-left rather than bottom-left
Umm...
LocalH
What's wrong with that statement? It has historically and traditionally been true for raster displays, even if there do exist ways to use standard Cartesian-style coordinates with a computer.
taneq
There top left has usually been (0, 0) for hardware pixel coordinates (although even then there’s plenty of exceptions, e.g. mode 13h scrolling) but as a blanket statement about computer graphics in general it’s misleading.
jakegmaths
I'm struggling to see the problem with this statement, other than maybe to add in the word "usually". My students will know of graphs in maths where the origin is always bottom left. When working with HTML canvas and every other computer graphics situation I've worked in, it's top left instead.
ForOldHack
"PostScript uses a coordinate system where the origin is at the bottom-left corner of the page, with the x-axis increasing to the right and the y-axis increasing upwards."
Oscilloscopes use middle-left.
Unreal engine and SketchUp use Screen middle with xy increasing to the right.
in AutoCAD, the user coordinate system is 1/3 of the screen to the left for the origin, with X increasing to the right, and Y increasing upwards.
Almost all raster displays, and memory based programs assume top left, because that is how it was done first - counter intuitive.
6P58r3MXJSLi
> When working with HTML canvas and every other computer graphics situation I've worked in, it's top left instead.
In OpenGL is (center, center)
animal531
Weeee: https://tixy.land/?code=sin%28x%29*cos%28y%29%2Bcos%28x%29*s...
White blood cells attack: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bco...
rpastuszak
I made a drawing app with programmable brushes inspired by tixy:
It’s pretty fun because the shape dynamics are time, and not pressure/tilt based, so you need to draw in a rhythm.
Here’s how they work and how they’re implemented:
Nautman
I love it! Here's a windscreen wiper.
levzettelin
Basically https://www.shadertoy.com/ for dummies. Right up my alley haha ;)
Isognoviastoma
nomel
now to add a few blips!
agys
The author is Martin Kleppe (@aemkei on X), famous for his incredible quines and other JS magic.
Reefersleep
I've made a few of these as doodles while waiting for other stuff. Great set of restrictions to inspire creativity.
X Plus Star https://tixy.land/?code=%28sin%28t*0.8*-sqrt%28%28x-7.5%29**...
Sin Sin https://tixy.land/?code=sin%28sin%28i*sin%28t%2F10%29%29%29
Jyaif
Lerc
I managed to come up with a suffix that displays outputs of my own weird thing in a tixy style.
https://c50.fingswotidun.com/show/?code=28*ddx*%24%3Ay*%243o...*
Quite a fun challenge.
The Suffix is 2<02->P8dus:vs
which is
2<02-> clip to -2 to +2
P8*d 2 copies of 8*PI
u*s 8 horizontal sine
:v*s 8 vertical sine
* mix horz and vert to make the tixy circles.
Tixy is amazing! I built something very similar:
https://muffinman.io/pulsar/
I wanted to create animations for my LED matrix screen, and I couldn’t find tixy anywhere. Only after I built pulsar I found it again.
Another similar project is https://sliderland.blinry.org/ which uses HTML sliders.
Fun stuff!