# 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 axesLet me take a look at that. Thanks.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.
jedishrfu said:or like in Harry Potter:
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.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")
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.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)
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.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.
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.
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 ...'.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?
Is the rendering of a symbol of a "knight" critical to your animation? It may be a nice touch, but is it necessary?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 ...'.
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.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?
jedishrfu said:or like in Harry Potter:
That's the plan: to learn HTML and JavaScript next. Started that today.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).
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.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:
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.
- 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.
Personally I would choose JavaScript for this, I'll give you an idea of how to do this in a CodePen (watch this space).
SVG is valid HTML.PeroK said:I just fed the raw svg files into a browser without any HTML wrapper.
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)PeroK said:That's the plan: to learn HTML and JavaScript next. Started that today.
// 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);
