# 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.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.
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.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.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.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.
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 ...'.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?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.Is the rendering of a symbol of a "knight" critical to your animation? It may be a nice touch, but is it necessary?
or like in Harry Potter:
That's the plan: to learn HTML and JavaScript next. Started that today.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.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.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)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);