👑

NimでGIFアニメーション

2023/01/03に公開

はじめに

NimでSVGを扱うライブラリを使い、GIFアニメーションを作ってみます。

使用ライブラリ

NimSvgを使います。
使い方は↓
https://zenn.dev/neo/scraps/457658255c275c

実装

試しに、波を描いてみます。

import
  std/math,
  pkg/nimSvg

let settings = animSettings(
  "animation2",
  renderGif = true,
  gifFrameTime = 1
  # backAndForth = true
)
let frames = 200


settings.buildAnimation(frames) do (i: int) -> Nodes:
  let
    w = 800
    h = 800
    amplitude = 200f
    time = 30
    length = 200

  buildSvg:
    svg(width = w, height = h):
      for x in 0..w:
        let y = amplitude * sin(2 * PI * (i / time - x / length))
        circle(cx = x, cy = y + (h/2), r = 1, `stroke-width` = 0, fill = "#000")

できました!

波をもう一つ用意し、複雑な合成波を描いてみます。

import
  std/math,
  pkg/nimSvg

let settings = animSettings(
  "animation2",
  renderGif = true,
  gifFrameTime = 1
  # backAndForth = true
)
let frames = 200


settings.buildAnimation(frames) do (i: int) -> Nodes:
  let
    w = 800
    h = 800
    amplitude1 = 200f
    amplitude2 = 150f
    time1 = 30
    time2 = 50
    length1 = 200
    length2 = 180

  buildSvg:
    svg(width = w, height = h):
      for x in 0..w:
        let
          y = amplitude1 * sin(2 * PI * (i / time1 - x / length1)) +
          amplitude2 * sin(2 * PI * (i / time2 - x / length2))
        circle(cx = x, cy = y + (h/2), r = 1, `stroke-width` = 0, fill = "#000")

できました!

おわりに

NimSvgを使って波をアニメーションをつくりました。簡単にできたのでぜひ使ってみてください!

GitHubで編集を提案

Discussion