Graphics and Animation software recommendations

In summary, you need Python and Matplotlib for generating frames of a rotating square. You could also use Pygame or Processing.org with Python.
  • #1
PeroK
Science Advisor
Homework Helper
Insights Author
Gold Member
2023 Award
26,893
18,410
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?
 
Computer science news on Phys.org
  • #2
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
 
  • Like
Likes PhDeezNutz, Vanadium 50, jedishrfu and 1 other person
  • #4
jedishrfu said:
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.
Let me take a look at that. Thanks.
 
  • Like
Likes PhDeezNutz
  • #5
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.
 
  • Like
Likes jedishrfu and phyzguy
  • #6
Blender has Python console:
 
  • Like
Likes PhDeezNutz, jedishrfu and PeroK
  • #7
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.
 
  • #8
Can you have the chessmen attack each other a la Star Wars?



"Let the Wookie win."
 
  • Like
Likes PhDeezNutz
  • #10
jedishrfu said:
or like in Harry Potter:


What do you expect if you play the Scandanavian!
 
Last edited:
  • Haha
Likes jedishrfu
  • #11
I have a follow-up question. I actually found python chess and chess.svg libraries, which appear to do everything I need.

https://python-chess.readthedocs.io/en/latest/svg.html

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?
 
  • #12
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")
 
  • Like
Likes PeroK
  • #13
phyzguy said:
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?
 
  • #14
  • Like
Likes PeroK
  • #15
robphy said:
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.
 
  • #16
On reflection, I think my first objective is to learn how to integrate web-pages with python scripts! And then take it from there.
 
  • #17
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.
 
  • #18
phyzguy said:
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.
 
  • #19
PeroK said:
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:
https://www.wired.com/story/what-random-walks-in-multiple-dimensions-teach-you-about-life/
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:
  • #20
robphy said:
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 ...'.
 
  • #21
PeroK said:
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?
 
  • #22
robphy said:
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.
 
  • #24
jedishrfu said:
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
 
  • #25
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.
 
  • #26
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).
 
  • #27
pbuk said:
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.
 
  • #28
pbuk said:
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.
 
  • Like
Likes PeroK
  • #29
The mpeg presents a moving image, but it is placed statically in the HTML so I would call this static.
 
  • #30
PeroK said:
I just fed the raw svg files into a browser without any HTML wrapper.
SVG is valid HTML.
 
  • #31
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)
 
  • #32
PeroK said:
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) {
  board.addMarker(move.slice(-2));
}

// 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());
  board.addMarker(moves[0].substring(0, 2));

  // 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);
 
  • Like
Likes PeroK

1. What is the best graphics and animation software for beginners?

The best graphics and animation software for beginners is Adobe Photoshop and Adobe After Effects. These programs are user-friendly and have a wide range of tools and tutorials to help beginners get started.

2. Which software is better for 3D animation - Maya or Blender?

This is a matter of personal preference. Maya is a professional software used in the film and gaming industry, while Blender is a free and open-source software with a strong community and constantly improving features. Both have their strengths and weaknesses, so it is recommended to try out both and see which one suits your needs better.

3. Is it necessary to have a high-end computer for using graphics and animation software?

It depends on the complexity of the projects you will be working on. For basic 2D animation and graphic design, a mid-range computer with a good graphics card should suffice. However, for 3D animation and rendering, a high-end computer with a powerful processor and graphics card is recommended for smoother performance.

4. What are some alternative software options to Adobe Creative Suite?

Some alternative software options to Adobe Creative Suite are CorelDRAW, GIMP, and Inkscape for graphic design, and Blender, Toon Boom, and Synfig for animation. These programs offer similar features and functionality to Adobe Creative Suite at a lower cost or for free.

5. Can I use graphics and animation software for creating scientific visualizations?

Yes, graphics and animation software can be used for creating scientific visualizations. Some programs, such as Autodesk Maya and Blender, have specialized tools and plugins for creating scientific visualizations. Additionally, Adobe After Effects can be used for motion graphics and animations to enhance scientific visualizations.

Similar threads

Replies
4
Views
2K
Replies
2
Views
6K
Replies
2
Views
767
  • Special and General Relativity
3
Replies
70
Views
3K
  • Programming and Computer Science
Replies
29
Views
2K
  • Computing and Technology
Replies
3
Views
2K
  • Electrical Engineering
Replies
18
Views
1K
  • STEM Educators and Teaching
Replies
22
Views
3K
  • Programming and Computer Science
Replies
8
Views
1K
  • STEM Career Guidance
Replies
4
Views
1K
Back
Top