https://labs.cybozu.co.jp/blog/akky/tags/%E6%95%B0%E5%AD%A6/ Recent content in 数学 on akky@サイボウズラボ・ブログ Hugo ja Wed, 29 Jun 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/ Wed, 29 Jun 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/ <p><a href="https://ptol.github.io/hexyzland/">hexyzland</a> は、六角形ベースの図形を6つの変数と数式で動かす、プログラミング実験場です。</p> <p><a href="https://ptol.github.io/hexyzland/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/hexyzland_hu_cc952e2ee41a9eb9.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/hexyzland_hu_dcb6835d5cbcd0fd.webp 700w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/hexyzland.png" width="700" height="791" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>Hexyzland トップページ</p> <p>6つの変数は t(時間), r(中心からの距離), a(角度), x,y,z(3方向の座標) となっていて、各ヘックスの値を -1(真っ赤) から 1(真っ白)の間に変えることでヘックスのサイズと色が変わります。</p> <p>あとは数学的な関数を組み合わせればアニメーションのできあがり。チュートリアルにたくさんの実例が出ています。</p> <p>作成した図形は URL が生成されるので <a href="https://ptol.github.io/hexyzland/#sin%28t%2Ba%2F30%2Br%258%29">SNS 等で共有すること</a>もできますし、動いているところを動画として保存することもできます。</p> <p>http://localhost:8099/wp-content/uploads/2022/06/hexyzland.webm</p> <p>GitHub に<a href="https://github.com/ptol/hexyzland">サイトのソースコードも公開</a>されています。</p> <p><a href="https://tixy.land/">tixyland</a> という正方形ベースの<a href="https://twitter.com/aemkei/status/1323399877611708416">同様の遊び場</a>があり、hexyzland はそれにインスパイアされたものだそうです。</p> <p><a href="https://tixy.land/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/tixyland-top_hu_24f08c49dc8e97c3.webp 340w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/06/playing-math-and-hex/tixyland-top.png" width="340" height="467" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>tixy.land トップページ</p> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">A collection of colorful examples from <a href="https://t.co/664X7G2TH2">https://t.co/664X7G2TH2</a>:<br><br>// sin cos sin cos sin cos<br>// by <a href="https://x.com/inky?ref_src=twsrc%5Etfw">@inky</a> <br>(t,i,x,y)=&gt;<br>((x^y)%2?sin:cos)(t)<a href="https://t.co/fp20uLGg2Z">https://t.co/fp20uLGg2Z</a> <a href="https://t.co/ymY0kg6hCl">pic.twitter.com/ymY0kg6hCl</a></p>&mdash; Martin Kleppe (@aemkei) <a href="https://x.com/aemkei/status/1326637580486578177?ref_src=twsrc%5Etfw">November 11, 2020</a></blockquote> <script async src="https://platform.x.com/widgets.js" charset="utf-8"></script> <p>via reddit/programming</p>