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.
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.
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.
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])
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.
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.
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.
"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.
It it not counter intuitive and the decision extends far earlier than the first displays.
A raster image onscreen is displayed in the order that the data appears when written down. It stands to reason that a data depiction should be in the same orientation as the display orientation. Displays were created by people who read from left to right, top to bottom. If the displays did not follow that order. images would be flipped or rotated when displayed in a data form.
The first pixel written to the display is in the top left because we read from the top left. If writers of another language had have popularised the text, perhaps things might have been different.
It draws a slightly tilted sine wave gradient (i=16y+x so atan(1/16) ≈ 3.6°) whose frequency increases until it starts to alias due ro the limited resolution (cf. Nyquist sampling theorem) and exhibit what’s essentially the wagon wheel effect [1]. Nice illustration of signal processing fundamentals!
I would love something like this in my living room. Especially if it is not just a screen. Maybe a grid of 256 screens? Or inflating balloons? Something easier to make? Just on/off big pixels?
Wow this is extremely well done! All the defaults are chosen so well to make simple inputs get pretty results. The interpretation of the result value, the scale of `t`, the colors, it's all not trivial at all to get right! Hats off
If the animation is finite in time and with finite time steps and sample points, I think no. Because you can fit a polygon through any set of points if the polygon has enough dimensions.
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!
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 :)
If you haven't seen dwitter yet, you really should head over to https://www.dwitter.net
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.
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.
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.
Reminds me of [Replicube](https://store.steampowered.com/app/3401490/Replicube/), which has released recently and does the same kind of thing in 3D.
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])
[1] https://calculang-editables.netlify.app/tixyish
[2] https://www.youtube.com/watch?v=uXUd_-xrycs
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.
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!
Why isn't "(sin(i) * (x > 7)) - (i == 5) + (i == 20) + 0.5 * (i == 32)" a solution to puzzle 36?
Fun. Thanks!
Works well on phone. The phone keyboard is a bit clumsy but it works (that’s a phone issue)
Well done!
> In computer graphics, the origin (0, 0) is top-left rather than bottom-left
Umm...
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.
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.
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.
"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.
It it not counter intuitive and the decision extends far earlier than the first displays.
A raster image onscreen is displayed in the order that the data appears when written down. It stands to reason that a data depiction should be in the same orientation as the display orientation. Displays were created by people who read from left to right, top to bottom. If the displays did not follow that order. images would be flipped or rotated when displayed in a data form.
The first pixel written to the display is in the top left because we read from the top left. If writers of another language had have popularised the text, perhaps things might have been different.
Why does the BMP file format store the image upside-down though?
IBM brain rot adopted by Microsoft.
Why are device-independent bitmaps upside down? Raymond Chen https://devblogs.microsoft.com/oldnewthing/20210525-00/?p=10...
I think you had to wait for WinG or maybe even DirectX to get normal 1:1 mapping.
OpenGL is so old it had same stupid ideas about coordinates.
> 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)
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...
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
Traffic https://tixy.land/?code=sin%28i*i*t*0.0005%29
I love it! Here's a windscreen wiper.
https://tixy.land/?code=sin%28t%29*%281%2Bx%2By%29-x
I made a drawing app with programmable brushes inspired by tixy:
https://fig.sonnet.io
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:
https://untested.sonnet.io/notes/fig-tree-brushes/
Basically https://www.shadertoy.com/ for dummies. Right up my alley haha ;)
https://tixy.land/?code=%28%28t%2F4%2Batan2%28x-8%2Cy-7%29%2...
a radar
now to add a few blips!
Fire! https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%2...
5 fold star: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%2...
Two snakes: https://tixy.land/?code=exp%28-%28%28x-7%29**2%29%2F12%29*si...
https://tixy.land/?code=-.5%2B%28x%5Ey%29%25%283*Math.sin%28...
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
This one is sick!
oh yes, highly recommended! :)
Marry Christmas
https://tixy.land/?code=Math.sin%28y%2F8%2By%3C9%26%26Math.a...
The author is Martin Kleppe (@aemkei on X), famous for his incredible quines and other JS magic.
https://aem1k.com/world/
https://aem1k.com/qlock/
Previous discussion with patterns in comments: https://news.ycombinator.com/item?id=24974534
Love it, simple & cool :)
https://tixy.land/?code=(y%2Fi*y%2Fsin(x%2Bt))*max(cos(t)%2C...
Fun!
https://tixy.land/?code=sin%28i%2Bt%29
i don't even know whats happening but its mesmerizing https://tixy.land/?code=sin%28i*t%2F128%29
It draws a slightly tilted sine wave gradient (i=16y+x so atan(1/16) ≈ 3.6°) whose frequency increases until it starts to alias due ro the limited resolution (cf. Nyquist sampling theorem) and exhibit what’s essentially the wagon wheel effect [1]. Nice illustration of signal processing fundamentals!
[1] https://en.m.wikipedia.org/wiki/Wagon-wheel_effect
Ah, man, with the colors, I thought this was obvious, but it doesn't quite fit the url. But you can still copy, paste in the box:
(1-sqrt(pow(7.5-x,2)+pow(7.5-y,2))/8)*(y-7.5)
Pokeball.
edit Actually, there's no fixed length, so https://tixy.land/?code=%281-sqrt%28pow%287.5-x%2C2%29%2Bpow...
https://tixy.land/?code=x-y*y%2Ft%2F5
'Vanishing Curve'
https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y...
Similar project, but based on Forth: https://forthsalon.appspot.com/
Cool stuff.
Learned by scrolling far enough right in view source: The last line is editable and eval'd.
Request to author: keep the newlines.
> The last line is editable and eval'd
Right. https://tixy.land/?code=alert(%22foo%22)
That’s not nice
What's not nice is not sanitizing inputs.
I am impressed by both the website and how good people here are at trig.
Centered circle wave: https://tixy.land/?code=Math.sin%28-2*t%2B0.045*%28x-7.5%29*...
Cool! I can see it being usable as a spinner as well. How did you come up with these magic numbers?
Related:
Tixy.land - https://news.ycombinator.com/item?id=36646163 - July 2023 (2 comments)
Minimal 16x16 Dots Coding Environment - https://news.ycombinator.com/item?id=24974534 - Nov 2020 (37 comments)
Pretty psychedelic https://tixy.land/?code=Math.cos%28y%2F8%2Bsqrt%282*t*i%2Bx%...
A lot of these tricks I first learned from Noah Spurrier’s acidwarp.exe VGA demos in the 90s.
Now I’m wondering who first published these trig function pixel paint tricks. Somewhere between HAKMEM munching squares and the 80s demoscene?
ChatGPT had some nice ideas, e.g.
https://tixy.land/?code=Math.sin%28t+%2B+Math.atan2%28y+-+7....
That's fantastic!
I would love something like this in my living room. Especially if it is not just a screen. Maybe a grid of 256 screens? Or inflating balloons? Something easier to make? Just on/off big pixels?
https://tixy.land/?code=sin%280.2*x*t%29+-+cos%280.2*y*t%29
I like this creation of mine:
https://tixy.land/?code=sin%28t*x%29%2Bi%2F256
The classic: sin(x/2+t)+cos(y/2+sin(t))
Link for the lazy: https://tixy.land/?code=sin%28x%2F2%2Bt%29%2Bcos%28y%2F2%2Bs...
https://tixy.land/?code=%28%28x%2Bt%29%5E%28t%7Cy*t%29%29%25...
Strobe warning, especially after about 20 seconds.
Wow this is extremely well done! All the defaults are chosen so well to make simple inputs get pretty results. The interpretation of the result value, the scale of `t`, the colors, it's all not trivial at all to get right! Hats off
That's no moon! https://tixy.land/?code=%28%28d%3D36-%28x-%3D7%29**2-%28y-%3...
Moving, ever expanding circle: https://tixy.land/?code=%28x-10*t%2521%29**2%2B%28y-10*t%252...
red traffic light https://tixy.land/?code=%28floor%28t%29%252%29%3F0%3A-cos%28...
fun! Here's a heart: https://tixy.land/?code=hypot%28x-7%2Cy%2Babs%28x-7%29-9%29-...
Stretchy curtain:
(sin(t) * sin(t) + 0.2) * (sin(y / (cos(t) * cos(t) + 0.7)) + sin(x))
Clicky https://tixy.land/?code=%28sin%28t%29+*+sin%28t%29+%2B+0.2%2...
Beating heart: https://tixy.land/?code=%28x%2F7.5-1%29**2%2B%28y%2F7.5-1%29...
If you like this, also check 3d animations on a led cube. https://m.youtube.com/watch?v=odFljHeCNaY
Here’s a wild ride: https://tixy.land/?code=Math.sin%28y%2Bi%2Ft%29%2BMath.cos%2...
https://tixy.land/?code=sin%28t*sin%28t%29%2F9-x%29*sin%28t-...
spiral: https://tixy.land/?code=hypot%28x-%3D7%2Cy-%3D7%29%2Batan2%2...
When this was first released, I put together an homage to the music video for “Fell In Love With A Girl” by The White Stripes.
https://tixy.land/?code=floor(t%256)%20%3D%3D%3D%200%20%3F%0...
Also https://ptol.github.io/hexyzland/
Is it possible to create a tixy QR code that contains a link to itself ?
Is there a pattern or animation you can manually animate on those dots that can’t be represented by an equation?
If the animation is finite in time and with finite time steps and sample points, I think no. Because you can fit a polygon through any set of points if the polygon has enough dimensions.
I’m considering that as a load screen animation. Bunch of different functions, and the user will be entertained.
this is beautiful. i love it so much :)
> // hit "enter" to save in URL
There's no enter on Android Chrome on phone.
The enter key on the phone keyboard works if you tap that message.
Would be cool to implement this physically as an array of iris diaphragms
Isn't i == x + 16*y? Why is it needed?
To make the code cleaner I’d assume.
I got the impression though that i is the least useful of the bunch.
candy waves on a shore: https://tixy.land/?code=sin%28i*t%2F128%29
candy lasers redux: https://tixy.land/?code=0.2%2Bsin%28i*t%2F64%29%2B.3*sin%288...
Shame that 32 characters is a bit too few to make a raycaster. 128 would be quite enough I think.
is this just shaders but not?
Why is the "=>" going in the wrong direction ?
I feel so dumb. How can I make this zoom centered on the grid?
https://tixy.land/?code=Math.sin%28x*t%29%2BMath.cos%28y*t%2...
I think something like https://tixy.land/?code=sin%28%28x-7.5%29*t%29%2Bcos%28%28y-...
When in doubt: translate your center to the origin, do your work there, then un-translate.
really impressive, keep up the good work
great