使用算法制作动画 GIF 的最佳方法是什么?

发布于 2024-07-23 07:10:28 字数 939 浏览 7 评论 0原文

我有一个在各种尺寸(大尺寸,如 100x100)的棋盘上进行骑士旅行的算法,我想为结果制作动画。 每次骑士移动到一个新的方块时,(方块)画布中相应的像素就会改变颜色,直到最终整个画布都被着色。生成的电影将可以在有关该算法的网页上观看。

如果我想要广泛的浏览器支持,动画 GIF 似乎是最好的方法(尽管也欢迎其他建议)。 执行此操作的最佳工具或库是什么? 我很乐意使用 Linux 或 Mac 计算机上免费提供的任何东西。

实际算法太长,无法在此处提供有用的示例(请参阅本文 如果你真的很好奇),但这里是在 8x8 板上进行(无聊的)国王之旅的伪代码:

movie = new Movie()
frame = new Frame()
frame.fillRectangle((1,1), 8, 8, BLUE)
for row in [1..8] {
    if (row.isOdd()) { colrange = [1..8] } else { colrange = [8..1] }
    for col in colrange {
        frame.colourPixel(row, col, RED)
        movie.addFrame(frame)
    }
}
movie.saveAsGIF("tour.gif")

额外学分问题:我们可以利用这部电影的特殊功能是减少文件大小? 维基百科文章表明我们也许能够做到这一点,只要我们改变一些像素——事实上我们每帧只改变一个!

I have an algorithm for knight's tours on chessboards of various sizes (large sizes, like 100x100) and I'd like to animate the result. Each time the knight moves to a new square, a corresponding pixel in the (square) canvas will change colours, until eventually the whole canvas is coloured in. The resulting movies will be available for viewing on a web page about the algorithm.

Animated GIFs seem like the best method if I want broad browser support (though other suggestions are welcome). What is the best tool or library to do this with? I'm happy to use anything that's freely available on a Linux or Mac computer.

The actual algorithm is too long to make a useful example here (see this paper if you're really curious) but here's pseudocode for a (boring) king's tour on an 8x8 board:

movie = new Movie()
frame = new Frame()
frame.fillRectangle((1,1), 8, 8, BLUE)
for row in [1..8] {
    if (row.isOdd()) { colrange = [1..8] } else { colrange = [8..1] }
    for col in colrange {
        frame.colourPixel(row, col, RED)
        movie.addFrame(frame)
    }
}
movie.saveAsGIF("tour.gif")

Extra-credit question: can we take advantage of the special features of this movie to reduce the file size? The Wikipedia article suggests that we might be able to do this, if we are only changing some of the pixels - in fact we are only changing one per frame!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

剩余の解释 2024-07-30 07:10:28

您可以使用 giflib 来完成此操作。 文档位于下载中。

例如,此页面包含使用 giflib 创建的动画 gif 以及所用程序的源代码生成动画。 了解如何使用 giflib 制作动画可能会有所帮助。

编辑:如果您不介意进行一些后处理,另一种选择是使用简单的格式简单地输出帧(例如 PPM),然后制作动画使用 ImageMagick 生成 gif

至于您的额外学分问题:ImageMagick 甚至可以为您进行帧比较,以减少输出的大小。

You can use giflib to accomplish this. Documentation is in the download.

As an example, this page contains animated gifs created using giflib and source code to the program used to generate the animations. Might be helpful to see how to use giflib for animations.

Edit: Another alternative, if you don't mind some post-processing, is to simply output your frames using a simple format (such as PPM) and then make the animated gif using ImageMagick.

As for your extra credit question: ImageMagick can even do frame comparisons for you to reduce the size of the output.

很酷又爱笑 2024-07-30 07:10:28

为了回答您的额外学分问题,您可以自己进行此改进,只需在新框架上绘制图像的更改部分并将其余部分设置为透明。

In response to your extra credit question, you could do this improvement yourself by only drawing the changed part of the image on the new frames and setting the rest to be transparent.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文