2024-12-30
Qiita Advent Calendar 2024からネタ探し。コンパクトできれいなグラフィクスを実現できるSVGが目に留まりました。

SVG - Qiita Advent Calendar 2024 - Qiita」より、「SVGアニメーションで作る!かわいいもふもふキャラクターGIF #Python - Qiita」では、Pythonを使って生成したSVGからアニメーションGIFを生成しています。プログラムでかわいいづくり、良さそうですね!


「かわいいもふもふキャラクターSVG」
src on GitHub
かわいくアニメーションします!

かわいいアニメーションのポイントとなるPythonでのコード

<!-- もふもふ層1 --> {' '.join([f''' <circle cx="{40 * math.cos(i * math.pi / 8)}" cy="{40 * math.sin(i * math.pi / 8)}" r="{15 + fluff_wave + 2 * math.sin(frame_num * 0.2 + i)}" fill="#E6EEFF" stroke="#CFE3FF" stroke-width="2"/> ''' for i in range(16)])}

f""" で囲む、Pythonでのデータ埋め込み用改行付きの文字列、JavaScriptでは ` で囲み、{}の代わりに ${} を使う。mathは、JavaScriptでは標準のMathを使用。for i in range(16) は、range関数を作って、map/joinで対応したのが下記のJavaScriptでのコード。

<!-- もふもふ層1 --> ${range(16).map(i => ` <circle cx="${40 * Math.cos(i * Math.PI / 8)}" cy="${40 * Math.sin(i * Math.PI / 8)}" r="${15 + fluff_wave + 2 * Math.sin(frame_num * 0.2 + i)}" fill="#E6EEFF" stroke="#CFE3FF" stroke-width="2"/> `).join("")}

range関数はこちら

const range = (n) => { const res = new Array(n); for (let i = 0; i < n; i++) res[i] = i; return res; };

楽しい、SVG入門もどうぞ!
SVG チュートリアル - SVG: スケーラブルベクターグラフィック | MDN

Deno - Qiita Advent Calendar 2024 - Qiita」では、deno run コマンドの run がいつのまにか省略できるようになったこと、--allow-read などの替わりに -R が追加されたことを知る。

プログラミング言語としては、Gleamが気になったので、次のGeo3x3移植対象としよう。(Issuesには2023年に掲載済みだった)

楽しく知識のアップデート!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS