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

时间:2022-04-04 15:55:28

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.

我在各种尺寸的棋盘(大尺寸,如100x100)上有骑​​士游览的算法,我想为结果制作动画。每当骑士移动到一个新的方块时,(方形)画布中的相应像素将改变颜色,直到最终整个画布被着色。所得到的电影将可以在关于算法的网页上查看。

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.

如果我想要广泛的浏览器支持,动画GIF似乎是最好的方法(尽管欢迎其他建议)。使用它的最佳工具或库是什么?我很高兴使用Linux或Mac电脑上免费提供的任何东西。

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:

实际的算法太长了,不能在这里做一个有用的例子(如果你真的很好奇,请参阅本文),但这是一个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")

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!

额外信用问题:我们可以利用这部电影的特殊功能来减小文件大小吗?*的文章表明,如果我们只改变一些像素,我们也许可以做到这一点 - 实际上我们每帧只改变一个!

2 个解决方案

#1


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

您可以使用giflib来完成此任务。文档在下载中。

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.

例如,此页面包含使用giflib创建的GIF动画和用于生成动画的程序的源代码。可能有助于了解如何使用giflib进行动画制作。

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.

编辑:另一种选择,如果你不介意一些后期处理,只需使用简单的格式(如PPM)输出你的帧,然后使用ImageMagick制作动画gif。

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

至于你额外的信用问题:ImageMagick甚至可以为你做框架比较,以减少输出的大小。

#2


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.

为了回应您的额外信用问题,您可以通过仅在新帧上绘制图像的已更改部分并将其余部分设置为透明来自行完成此改进。

#1


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

您可以使用giflib来完成此任务。文档在下载中。

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.

例如,此页面包含使用giflib创建的GIF动画和用于生成动画的程序的源代码。可能有助于了解如何使用giflib进行动画制作。

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.

编辑:另一种选择,如果你不介意一些后期处理,只需使用简单的格式(如PPM)输出你的帧,然后使用ImageMagick制作动画gif。

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

至于你额外的信用问题:ImageMagick甚至可以为你做框架比较,以减少输出的大小。

#2


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.

为了回应您的额外信用问题,您可以通过仅在新帧上绘制图像的已更改部分并将其余部分设置为透明来自行完成此改进。