I am creating a game with HTML5 canvas for browser. I want to create animations with many shapes, which would be drawed with canvas, not from spritesheets.
The problem i face now is - to create formulas for so many shapes. I need them resizeable, also different width/height ratio. I was drawing chess pawn, but took 1 week to complete it right using arc's.
This is that pawn formula:
function pawn_shape(ctx, xx, yy, fill, stroke, grid_size) {
var g = grid_size / 100;
g *= 0.8;
ctx.lineWidth = grid_size / 10;
xx += g * 12;
yy += g * 10;
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.lineJoin = "miter";
ctx.beginPath();
var x = xx + 50 * g;
var y = yy + 25 * g;
var radius = 10 * g;
var startAngle = 0.8 * Math.PI;
var endAngle = 2.2 * Math.PI;
ctx.arc(x, y, radius, startAngle, endAngle);
x = xx + 55 * g;
y = yy + 48 * g;
radius = 15 * g;
startAngle = 1.6 * Math.PI;
endAngle = 2.4 * Math.PI;
ctx.arc(x, y, radius, startAngle, endAngle);
x = xx + 50 * g;
y = yy + 97 * g;
radius = 35 * g;
startAngle = 1.7 * Math.PI;
endAngle = 1.955 * Math.PI;
ctx.arc(x, y, radius, startAngle, endAngle);
x = xx + 30 * g;
y = yy + 92 * g;
ctx.lineTo(x, y);
x = xx + 50 * g;
y = yy + 98 * g;
radius = 35 * g;
startAngle = 3.055 * Math.PI;
endAngle = 3.3 * Math.PI;
ctx.arc(x, y, radius, startAngle, endAngle);
x = xx + 45 * g;
y = yy + 48 * g;
radius = 15 * g;
startAngle = 2.6 * Math.PI;
endAngle = 3.4 * Math.PI;
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fill();
ctx.closePath();
}
This is only 1 pawn. I need many more figures as configurable formulas. What would be the ways to get faster such formulas?
So far I am thinking about a new open source project, where people could draw shapes and these would be converted into such formulas. Or maybe even extract formulas from simple images, like programs do image to vector.
Another idea was to find out how does normal vectors work - what formulas they have. Maybe i could reuse and modify that? No idea, hoping to find answer here..
