# Graphics and Animation software recommendations

• PeroK
In summary, you need Python and Matplotlib for generating frames of a rotating square. You could also use Pygame or Processing.org with Python.f

#### PeroK

Homework Helper
Gold Member
2022 Award
TL;DR Summary
Looking for software recommendations.
I've been learning Python and I've got a program to generate Knight's tours on a chessboard. The output is in the format A1-C2 ... What software would I need, for example, to produce an animation of the knight hopping round a chessboard?

I just use Python matplotlib to create the individual frames, then stitch them together into an mpeg movie using ffmpeg, which you can download. As an example, I generated a bunch of frames of a rotating square with this code:
Python:
# Making frames for a rotating square

import numpy as np
import matplotlib.pyplot as plt

# Unrotated vertices
LL0 = [-1.0,-1.0]
LR0 = [1.0,-1.0]
UR0 = [1.0,1.0]
UL0 = [-1.0,1.0]
NumFrames = 200
plt.figure(facecolor='white')

for i in range(NumFrames):
theta = 2.0 * np.pi * float(i) / float(NumFrames)
# Rotate the vertices
LL = [LL0[0] * np.cos(theta) + LL0[1] * np.sin(theta), -LL0[0] * np.sin(theta) + LL0[1] * np.cos(theta)]
LR = [LR0[0] * np.cos(theta) + LR0[1] * np.sin(theta), -LR0[0] * np.sin(theta) + LR0[1] * np.cos(theta)]
UR = [UR0[0] * np.cos(theta) + UR0[1] * np.sin(theta), -UR0[0] * np.sin(theta) + UR0[1] * np.cos(theta)]
UL = [UL0[0] * np.cos(theta) + UL0[1] * np.sin(theta), -UL0[0] * np.sin(theta) + UL0[1] * np.cos(theta)]
# Plot them
ax = plt.axes(aspect=1)
ax.plot(LL,LR, lw=4, color='black')
ax.plot(LR,UR, lw=4, color='blue')
ax.plot(UR,UL, lw=4, color='red')
ax.plot(UL,LL, lw=4, color='green')
ax.set_xlim(-1.5, 1.5) # Sets the axis limits
ax.set_ylim(-1.5, 1.5) # Sets the axis limits
ax.axis('off') # Turns off the axes

filename = 'movie1/frame_%03d.png'%i
plt.savefig(filename) # Save the plot
plt.cla() # Clear the axes

And then built the movie with this command:
ffmpeg -pattern_type glob -i '*.png' -f mp4 -vcodec libx264 -pix_fmt yuv420p -framerate 60 square.mp4

PhDeezNutz, Vanadium 50, jedishrfu and 1 other person
Another scheme would be to use pygame with python or something similar.

https://wiki.python.org/moin/GameProgramming

it allows you to make some cool interactive graphics games.

PeroK
PhDeezNutz
If you want to get fancier interactive graphics and animation as part of the program,
you can use https://glowscript.org/ (also available at http://trinket.io) .
https://glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/BinaryStar-VPython
https://glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/Gyroscope-VPython
https://glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/HardSphereGas-VPython
If necessary, one could screencapture it or program in a periodically-scheduled pause to do individual screen captures... then string them together with ffmpeg or imagemagick.

jedishrfu and phyzguy
Blender has Python console:

PhDeezNutz, jedishrfu and PeroK
Yet another option is the python mode in Processing.org. Its python 2.7 aka jython which can utiliize the underlying graphics methods of Processing.org to do some cool stuff.

Can you have the chessmen attack each other a la Star Wars?

"Let the Wookie win."

PhDeezNutz
or like in Harry Potter:

or like in Harry Potter:

What do you expect if you play the Scandanavian!

Last edited:
jedishrfu
I have a follow-up question. I actually found python chess and chess.svg libraries, which appear to do everything I need.

But, in order to render the board as an image (as opposed to a simple, monochrome grid of letters and dots), it looks like I need something like Jupyter Notebooks?

It looks like you can pip install pyvips and use it to convert the svg file to png, then save that. See this link.
Python:
import pyvips

image = pyvips.Image.new_from_file("something.svg", dpi=300)
image.write_to_file("x.png")

PeroK
It looks like you can pip install pyvips and use it to convert the svg file to png, then save that. See this link.
Python:
import pyvips

image = pyvips.Image.new_from_file("something.svg", dpi=300)
image.write_to_file("x.png")
What I'm missing is more fundamentally the software to control a window. At the moment all I have is the Windows command line (where the output is a simple format) or the text editor I'm using (Sublime text), where likewise the output is a simple and monochrome.

There's no software in my development environment currently that allows me to do more than that. I've only got Python - although I'm just learning Django now.

My current thinking is that I could learn some HTML to render the output of my python programs? Or, perhaps I could do it using Django?

What's not clear to me is how the whole thing fits together: if I want a web-page with an animation of a Knight jumping round a chessboard, then how does all that fit together?

I'm got my python program that finds Knight's tours. That's done,

It looks like python chess.svg can produce an output file that should look like a real board with real pieces. And, I should be able to generate these files from within python.

Let's say I can then produce a sequence of SVG files out of Python. I then convert them to PNG files? And, finally, I have some HTML that scrolls through the files and displays them.

Perhaps this is too ambitious for now? I assumed that getting a computer to do "cool stuff" wasn't that hard. But, perhaps, I have to know a lot more about how all this software integrates at a practical level.

I'm grateful for all the advice on here, but perhaps fundamentally it's knowing how to put all these pieces of the jigsaw together that will take more experience?

PeroK
Possibly useful:
https://stackoverflow.com/questions/45945254/make-a-88-chessboard-in-pygame-with-python/45948976
Some of the code examples work in https://trinket.io/ (supports python, glowscript, pygame)

You can probably do it in glowscript.
Here are some examples that draw a grid
https://trinket.io/library/trinkets/3e25027ad1 (starter code for a Gauss law calculation)
https://trinket.io/library/trinkets/5843a035fd (relaxation method animation)
That's the other option: to learn to use pygame and/or glowscript! But, whether I do that or not, I'm still going to need something like pychess.svg for the proper rendering of the pieces.

On reflection, I think my first objective is to learn how to integrate web-pages with python scripts! And then take it from there.

I guess I'm missing what you are trying to do. Once you've made a sequence of png files, ffmpeg will stitch them together into a movie in mp4 format. This is a single file. You can then play the movie with a player like QuickTime, or whatever the Windows equivalent of QuickTime is. You can attach the movie to a web page with any html editor, and the movie will play when you click on it in the browser.

I guess I'm missing what you are trying to do. Once you've made a sequence of png files, ffmpeg will stitch them together into a movie in mp4 format. This is a single file. You can then play the movie with a player like QuickTime, or whatever the Windows equivalent of QuickTime is. You can attach the movie to a web page with any html editor, and the movie will play when you click on it in the browser.
I think I'm just trying to get to grips with how to do this stuff. Let me see whether I can get your method to work.

That's the other option: to learn to use pygame and/or glowscript! But, whether I do that or not, I'm still going to need something like pychess.svg for the proper rendering of the pieces.

So, is the main goal to animate the action of a knight on a chessboard?
Or to render the symbol of a knight?

If you wish to use Python and webpages for the goal of more easily sharing your work,
then glowscript and things that are supported by trinket.io and places like it are better.
They can be imbedded in webpages.. example:
shows a 2-D random walk as a glowscript program imbedded in a webpage.

While Jupyter notebooks can access powerful libraries, only folks with a local installation can view them.

Note that glowscript can use external images
https://www.glowscript.org/docs/VPythonDocs/textures.html
So, you can map an image of a knight to a geometric object, then move the geometric object.

Certainly, one can generate a sequence of images or screencaptures
and then use ffmpeg of imagemagick to make a movie out of it.
Then upload it to a website for others to view.

Of course, the advantage of glowscript and things like it are
that things can be viewed in a browser and can interactively be controlled and viewed.

Last edited:
So, is the main goal to animate the action of a knight on a chessboard?
Or to render the symbol of a knight?
It was to animate a knight moving round the chessboard, using the sequence of moves that currently is just in text format 'A1-C2-A3 ...'.

It was to animate a knight moving round the chessboard, using the sequence of moves that currently is just in text format 'A1-C2-A3 ...'.
Is the rendering of a symbol of a "knight" critical to your animation? It may be a nice touch, but is it necessary?

Is the rendering of a symbol of a "knight" critical to your animation? It may be a nice touch, but is it necessary?
I haven't done anything yet that produces output other than text (or json) files. That's why I was thinking that perhaps this is too ambitious. I'd be happy to learn how to have any sort of UI for a python program.

I'm leaning towards learning HTML now to get a feel for how to do "web" things.

or like in Harry Potter:

Not exactly full blown Wizard's chess, But what do you expect from just a couple of hours of modeling/animating?
https://youtu.be/GFEPWb871UM

I've got this working in a slightly rough and ready fashion.

I've got my knight's tour in the format 'A1-C2 ...'.

I converted that to a sequence of FEN format chess positions and, using the chess and chess.svg libraries, produced a sequence of svg files. It was also easy to put an X in every previously used square. So, it looks exactly as I wanted it with the pattern of used squares gradually building up as the knight hops round the board.

Then, I launched a sequence of browser windows from python to display the svg files. This was quicker and dirtier than producing an mpeg file, as @phyzguy suggested. But only because python opens a new browser window for every position.

I might try that next.

If you want something to be visible in a web browser then it has to exist it in a language that the web browser understands. In 2021 web browsers understand 4 languages:
• HTML which is used for presenting static content (text and images).
• CSS which is used for styling static content (sizing, colours etc.)
• JavaScript which is used for anything that isn't static.
• WebAssembly which interacts with the web page through JavaScript so cannot be used for anything on its own.
So if you want an animated chess board, the animations have to exist in JavaScript. You can either write this JavaScript yourself, or use what is essentially a cross-compiler in another language (e.g. Glowscript in Python) to write it for you.

Personally I would choose JavaScript for this, I'll give you an idea of how to do this in a CodePen (watch this space).

So if you want an animated chess board, the animations have to exist in JavaScript. You can either write this JavaScript yourself, or use what is essentially a cross-compiler in another language (e.g. Glowscript in Python) to write it for you.

Personally I would choose JavaScript for this, I'll give you an idea of how to do this in a CodePen (watch this space).
That's the plan: to learn HTML and JavaScript next. Started that today.

Note that a web browser can render individual images, jpeg, mpeg and svg files etc. You can just open the file from the browser. That's what I did here. I just fed the raw svg files into a browser without any HTML wrapper.

If you want something to be visible in a web browser then it has to exist it in a language that the web browser understands. In 2021 web browsers understand 4 languages:
• HTML which is used for presenting static content (text and images).
• CSS which is used for styling static content (sizing, colours etc.)
• JavaScript which is used for anything that isn't static.
• WebAssembly which interacts with the web page through JavaScript so cannot be used for anything on its own.
So if you want an animated chess board, the animations have to exist in JavaScript. You can either write this JavaScript yourself, or use what is essentially a cross-compiler in another language (e.g. Glowscript in Python) to write it for you.

Personally I would choose JavaScript for this, I'll give you an idea of how to do this in a CodePen (watch this space).
I don't think this is quite right. What you call images can be an mpeg file which displays as a movie in the browser. So I wouldn't call this "static". I have done this many times by just inserting an mpeg file in the HTML. So I think you don't really need JavaScript to display a movie.

PeroK
The mpeg presents a moving image, but it is placed statically in the HTML so I would call this static.

I just fed the raw svg files into a browser without any HTML wrapper.
SVG is valid HTML.

Sorry no time to do something custom but here is an example of what can be easily achieved:
https://chessboardjs.com/examples/3004

Note that the only code that has been written to achieve that is what follows, everything else is in the libraries.
JavaScript:
var board = Chessboard('myBoard', 'start')

$('#move1Btn').on('click', function () { board.move('e2-e4') })$('#move2Btn').on('click', function () {
board.move('d2-d4', 'g8-f6')
})

$('#startPositionBtn').on('click', board.start) That's the plan: to learn HTML and JavaScript next. Started that today. Excellent! The chessboard module I linked uses some modern concepts that you may not encounter for a while so I drafted something for you to crib as a head start below. Note that this is not going to work in Internet Explorer. JavaScript: // We are using ES6 imports so this needs to be inside script type="module" - // this is handled automatically in CodePen. import { Chessboard } from "https://cdn.jsdelivr.net/npm/cm-chessboard@3/src/cm-chessboard/Chessboard.js"; // Note we have also loaded the following module which creates the Chess global. // https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.11.0/chess.min.js // Set up a 'game' in FEN. const game = new Chess("8/8/8/8/8/8/8/1N6 w - - 0 1"); // Some moves in PGN. const moves = "b1-c3,c3-a2,a2-c1,c1-b3,b3-a1,a1-c2,c2-a3,a3-b2".split(","); // Select DOM element as a target. const el = document.querySelector("#board"); // Set the sprites to use for pieces (the default doesn't work when loading from a CDN). const url = "https://cdn.jsdelivr.net/npm/cm-chessboard@3/assets/images/chessboard-sprite-staunty.svg"; // Create the board. const board = new Chessboard(el, { sprite: { url }, // Move more slowly (default 300ms). animationDuration: 1000 }); // Log a move into the DOM. function logMove(move) { document.querySelector("#moves").innerHTML += ${move.slice(-2)};
}

// Mark a move on the board.
function markMove(move) {
}

// This function is declared asynchronous so we can use 'await'.
async function play() {
// Log the initial position;
document.querySelector("#moves").innerHTML = moves[0].substring(0, 2);

// Set up the board then mark the initial position.
await board.setPosition(game.fen());

// Iterate through the moves.
for (let i = 0; i < moves.length; ++i) {
const move = moves[i];
logMove(move);

// Try to execute the move.
if (!game.move(move, { sloppy: true })) {
// Log an illegal move and stop playing.
document.querySelector("#moves").innerHTML += " Illegal move";
break;
}
// The move was successful so execute the move on the board and mark the square.
// Note that setPosition() returns a Promise that is resolved when the move is
// complete, so wait for it before continuing.
await board.setPosition(game.fen());
markMove(move);

// Reset the game from the displayed board otherwise it will be black's turn!
game.load(board.getPosition() + " w - - 0 1");
}
}

// Wait for a bit before we start moving things around.
const timer = setTimeout(play, 2000);

PeroK