シンプルな数式だけで作られた16x16ドットアニメーション！
引用元：https://news.ycombinator.com/item?id=43942881
Tixy マジすごいね！俺も似たようなの作ったんだよ→ https://muffinman.io/pulsar/ LED マトリックス用にアニメーション作りたかったんだけど、Tixy が見つからなくてさ。pulsar 作ってからまた見つけたんだ。
他には https://sliderland.blinry.org/ ってのも似てるね。これは HTML スライダー使ってるよ。楽しいよね！
これ見てると昔の Sony のロゴ思い出す人いない？
https://tixy.land/?code=y%3C7%26%26%28x%2Bsin%28y%29%3C6.4%2…
追記: 否定形にするともっといい感じ！
もし dwitter まだ見たことないなら、絶対 https://www.dwitter.net 行ってみるべきだよ。
これすごいね。でももっといいレンダラーが必要だよ。ほとんどのアニメーションや画像がひどいモアレに悩まされてる。普通のブラウザの canvas はこういうの向きじゃないんだ。細かい線のアートにはスーパーサンプリングとか高品質なフィルタリングが必要だよ。
それは”dweets”の一部に過ぎないし、何千もの素晴らしいビジュアルはそんな問題抱えてないよ。それに、高品質な”レンダリング”は dwitter.net の本質じゃないんだ。大事なのは140文字の JavaScript で驚くべきものを作るってことだよ。
俺も数年前に Tixy に出会ってすごく気に入ったから、オリジナルの作者さんに許可をもらってこれ作ったんだ → https://www.mathsuniverse.com/tixy Tixy グリッド上で解くパズルがあるんだよ。コンピュータサイエンスの学生たちに使ってるんだけど、みんなすごくハマってるよ。
最近リリースされた Replicube ってゲーム思い出すね。あれも3Dで同じようなことやってるよ。https://store.steampowered.com/app/3401490/Replicube/
これ、教えるのにクールな方法だね！俺も最初はあの小さな関数にぶっ飛んだよ。だから calculang ってのでクローン作って実験したんだ（参照 [1]）。部分式を選んでどうなるか見れる評価機能（F9）を追加したんだけど、これがパターン理解にすごく役立ったよ（[2]の動画見て）。
[1] https://calculang-editables.netlify.app/tixyish
[2] https://www.youtube.com/watch?v=uXUd_-xrycs
40年以上プログラミングやってるけど、この種のことを学ぶのに今までで一番楽しい方法だって言えるよ。本当に面白い。
俺の5歳の子、これすごく楽しんでたんだけど、7番でつまずいちゃった！俺が構文手伝ってるけど、概念的なヒントはまだ我慢してるよ。即座に視覚的なフィードバックが得られるのがすごくいいね！
”sin(i) * (x ＞ 7)) - (i == 5) + (i == 20) + 0.5 * (i == 32)” って puzzle 36 の答えじゃないの？
面白いね。ありがとう！スマホでもうまく動くよ。スマホのキーボードがちょっと使いにくいけど動く（それはスマホの問題だね）
＞ computer graphics では、原点（0, 0）は左上であって左下じゃない。うーん…
その記述の何が悪いの？ラスタディスプレイでは歴史的にも伝統的にも正しいんだよ。コンピューターで標準の Cartesian みたいな座標を使う方法があったとしてもね。
ハードウェアのピクセル座標では通常左上が（0, 0）だったけど（ただし例外もたくさんあるよ、例えば mode 13h のスクロールとか）、 computer graphics 全般についての一般的な記述としては誤解を招くね。
この記述のどこに問題があるか分からないんだよね、たぶん”通常は”っていう言葉を加えるくらいかな。”。僕の生徒たちは数学のグラフで原点が常に左下なのを知ってるだろうね。 HTML canvas とか、僕がこれまでやった他のあらゆる computer graphics の状況では、代わりに左上だったよ。
” PostScript は左下原点、他のグラフィックスツールでも真ん中左や真ん中、左から1/3とか色々あるんだ。ラスタディスプレイやメモリベースのプログラムは左上をよく使うけど、それは最初にそうなったからで、直感的じゃないと思うよ。
左上原点は直感的じゃないってことはないよ。データは書き込まれた順に表示されるし、左上から右下に読む僕たちの習慣に合わせてディスプレイが作られたんだ。だからデータと表示の向きが同じになるのは当然。もし他の言語圏の人が最初にテキストを普及させてたら、もしかしたら違ってたかもね。
でも、なんで BMP file format は画像を上下逆さまに保存するの？
IBMのアレがMicrosoftに採用されちゃったのか．デバイスに依存しないビットマップがなんで上下逆さまなの？ Raymond Chenの記事（URL省略）によるとね…まともな1:1マッピングはWinGとかDirectXを待たなきゃダメだったと思うよ．OpenGLも古いから、同じような座標系の考え方してたんだよね．
＞ HTML canvasとか他のコンピューターグラフィックスの場面で私が扱ったやつだと、全部左上から始まるんだよね．OpenGLだと（真ん中，真ん中）だよ．
うぇーい：
これ見てよ（数式省略）
白血球の攻撃：
こっちも見て（数式省略）
tixyにインスパイアされて、プログラマブルなブラシがあるお絵かきアプリ作ったんだ：https:／／fig.sonnet.ioだよ．時間の流れで形が変わるから，リズムに合わせて描くのが結構楽しいんだよね．どう動くかとか，どう実装したかっていうのはここ見て：https:／／untested.sonnet.io／notes／fig-tree-brushes／だよ．
これめっちゃ好き！ ワイパーだよ．https:／／tixy.land／？code=sin%28t%29*%281%2Bx%2By%29-x
要するにhttps:／／www.shadertoy.com／の初心者向けって感じだね．まさに私の得意分野、ハハ
https:／／tixy.land／？code=（数式省略） レーダーだよ
さて、いくつか点滅するの追加してみよう！
他の作業待ってる間にいくつか落書きで作ってみたよ．創造性を刺激するのに最高の制約だね．
X Plus Star：
（数式省略）
Sin Sin：
（数式省略）
Traffic：
（数式省略）
火だよ！
https:／／tixy.land／？code=（数式省略）
5 fold starだよ！数式例はこれ見てね！
https:／／tixy.land／?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%2…
もっとコメントを表示（1）
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…
独自の変なやつをtixyスタイルで表示するsuffix作れたよ！面白い挑戦だったな。
suffixはこれ！ 2＜02-＞P8dus:vs
これはね、各部分がどういう意味か説明してくれてるよ！
https:／／c50.fingswotidun.com／show／?code=28ddx%24%3Ay*%243o…
うんうん、めっちゃおすすめだよ！
作者はMartin Kleppeだよ！Xでの名前は@aemkeiね。信じられないようなquineとか他のJSマジックで有名な人だよ。
サイトはこちら！
https:／／aem1k.com／world／
https:／／aem1k.com／qlock／
メリークリスマス！クリスマスのアニメーションはこれ！
https:／／tixy.land／?code=Math.sin%28y%2F8%2By%3C9%26%26Math.a…
これ大好き、シンプル＆かっこいいね！数式例はこれ！
https:／／tixy.land／?code=(y%2Fi*y%2Fsin(x%2Bt))*max(cos(t)%2C…
過去にもコメント欄でパターンについて議論があったみたいだよ！リンク貼っとくね！
https:／／news.ycombinator.com／item?id=24974534
楽しいね！https://tixy.land/?code=sin%28i%2Bt%29
何が起きてるか分からないけど、すごいきれいだね！https://tixy.land/?code=sin%28i*t%2F128%29
これは少し傾いたサイン波のグラデーションを描画してるんだって（i=16y+x so atan(1/16) ≈ 3.6°）．周波数が上がると解像度の限界でエイリアシングを起こして、信号処理の基本である wagon wheel effect みたいになるみたいだよ．良い例だね！［1］ wagon-wheel effect についてはこちらを見てね！ https://en.m.wikipedia.org/wiki/Wagon-wheel_effect
こんなコードもあるよ！https://tixy.land/?code=x-y*y%2Ft%2F5’Vanishing Curve’
こんなコードも試せるよ！https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y…
似たプロジェクトで、Forth がベースのものもあるみたいだよ！https://forthsalon.appspot.com/
これすごいね．ビューソースで右にスクロールしたら分かったんだけど：最後の行は編集できてeval’dされるんだって．作者さんにお願い：改行は残しておいてほしいな．
＞最後の行は編集できてeval’dされるんだね．そうだね．
https://tixy.land/?code=alert（”foo”）
良くないのは入力値をサニタイズしてないことだよ．
うわー、色で分かったつもりだったけど、URLのはちょっと違うんだね。でも、この式をコピペすればPokeballになるよ。あれ、長さが決まってないんだね、だから
https://tixy.land/?code=%281-sqrt%28pow%287.5-x%2C2%29%2Bpow…
真ん中から波が広がるやつだよ：https://tixy.land/?code=Math.sin%28-2t%2B0.045%28x-7.5%29*…
へー、すごいね！スピナーみたいにも使えそうだね。
どうやってこの「魔法の数字」を思いついたの？
こういう技は、90年代のNoah Spurrierのacidwarp.exeっていうVGAデモで初めて知ったんだ。今、誰が最初にこの三角関数を使ったピクセル描画の技を発表したのかなって思ってるんだよね。HAKMEMのmunching squaresと80年代のdemosceneの間くらいかな？
なかなかサイケだね
https://tixy.land/?code=Math.cos%28y%2F8%2Bsqrt%282ti%2Bx%…
めっちゃ楽しいね！こういうミニマルなサンドボックス的なアイデア、大好きだなあ。
それ、最高だね！これ、リビングにあったらいいなあ。ただの画面じゃなくて、もっと色々できたら特にね。例えば、256個の画面を並べたグリッドとか？それか、膨らむ風船とか？もっと簡単に作れるもの？単純にオンオフするだけの大きなピクセルとかでもいいかも？
これ見てみて：https://tixy.land/?code=sin%280.2xt%29+-+cos%280.2yt%29
関連情報だよ：
Tixy.land - https://news.ycombinator.com/item?id=36646163 - July 2023 （コメント２件）
Minimal 16x16 Dots Coding Environment - https://news.ycombinator.com/item?id=24974534 - Nov 2020 （コメント37件）
これ、僕が作ったやつ、気に入ってるんだ：https://tixy.land/?code=sin%28t*x%29%2Bi%2F256
ChatGPTがいくつか良いアイデア出してくれたんだって、例えばこれ見てよ https://tixy.land/?code=Math.sin%28t+%2B+Math.atan2%28y+-+7….
定番のやつね： sin(x/2+t)+cos(y/2+sin(t))
めんどくさがりの君のためにリンクだよ： https://tixy.land/?code=sin%28x%2F2%2Bt%29%2Bcos%28y%2F2%2Bs…
もっとコメントを表示（2）
あれは月じゃないぞ！ https://tixy.land/?code=%28%28d%3D36-%28x-%3D7%29**2-%28y-%3…
これ見て https://tixy.land/?code=%28%28x%2Bt%29%5E%28t%7Cy*t%29%29%25… あとストロボ点滅注意ね，特に20秒後からやばいよ．
赤信号だよ https://tixy.land/?code=%28floor%28t%29%252%29%3F0%3A-cos%28…
うわーこれすごいよくできてるね！デフォルト設定が全部秀逸で，シンプルな入力でめっちゃきれいな結果が出るようになってるんだ．結果の値の解釈とか，tのスケールとか，色とか，何もかも完璧にするのって全然簡単じゃないのに！脱帽だよ
動いてて，どんどん広がる円：
https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%252…
楽しいね！はい，ハートだよ： https://tixy.land/?code=hypot%28x-7%2Cy%2Babs%28x-7%29-9%29-…
脈打つハート： https://tixy.land/?code=%28x%2F7.5-1%29**2%2B%28y%2F7.5-1%29…
すごい動きだよこれ！見てみて： https://tixy.land/?code=Math.sin%28y%2Bi%2Ft%29%2BMath.cos%2…
伸び縮みするカーテンっぽいね：(sin(t) * sin(t) + 0.2) * (sin(y / (cos(t) * cos(t) + 0.7)) + sin(x))
カチカチするやつ： https://tixy.land/?code=%28sin%28t%29+*+sin%28t%29+%2B+0.2%2…
これ好きなら、LEDキューブの3Dアニメーションも見てみて。これだよ： https://m.youtube.com/watch?v=odFljHeCNaY
スパイラルだよ： https://tixy.land/?code=hypot%28x-%3D7%2Cy-%3D7%29%2Batan2%2…
これも見てみて： https://tixy.land/?code=sin%28tsin%28t%29%2F9-x%29sin%28t-…
これが初めて出た時、The White Stripesの”Fell In Love With A Girl”っていうMVにオマージュを捧げたやつを作ったんだ。これだよ： https://tixy.land/?code=floor(t%256)%20%3D%3D%3D%200%20%3F%0…
ウェブサイトもここで三角関数とかに詳しい人たちもすごいなあって感心したよ。
このドットで手動でアニメーションさせて、数式では表現できないパターンとかアニメーションってあるのかな？
アニメーションが時間的に有限で、時間ステップやサンプル点も有限なら、無理だと思うな。十分な次元があれば、どんな点の集まりにもポリゴンを当てはめられるからね。
これ、ロード画面のアニメーションとして考えてるんだ。いろんな関数を使えば、ユーザーも楽しめるんじゃないかな。
tixyのQR codeで、自分自身へのリンクを含むものって作れるのかな？
なんで ”=＞” が逆方向を向いてるんだろう？
＞ // hit ”enter” to save in URL
って書いてあるけど、スマホのAndroid Chromeにはエンターキーがないんだよね。
そのメッセージをタップすれば、スマホのキーボードのエンターキーが効くよ。
これを物理的に、iris diaphragmsの配列として実装したらクールだろうね。
iって x + 16*y じゃなかったっけ？ なんでそれが必要なの？
コードをもっとキレイにするためじゃないかな、たぶん。
