Extract formula from vector drawing

by mansim   Last Updated May 15, 2018 18:13 PM

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..



Related Questions


2d animation on html5 canvas using a vector and speed

Updated November 27, 2016 08:05 AM

Calculating angle difference in HTML Canvas

Updated August 23, 2017 20:13 PM

javascript game camera that follows my player

Updated December 24, 2016 07:36 AM

How to Prevent zoom-out On an HTML Canvas

Updated May 07, 2018 02:13 AM



Cache file /home/queryxchang/public_html/apps/frontend/config/../cache/-q-14-158684-extract-formula-from-vector-drawing- could not be written