7

I don't know how to make this algorithm in JavaScript/Node.js that converts bitmaps into svg paths pixel by pixel:

input input

// input
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 1 1 1 1 1 1 0 0 
0 0 1 1 1 1 1 1 0 0 
0 1 1 1 0 0 1 1 1 0 
0 1 1 1 0 0 1 1 1 0 
0 0 1 1 1 1 1 1 0 0 
0 0 1 1 1 1 1 1 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 

// output
<path d="M2 2 h6 v2 h1 v2 h-1 v2 h-6 v-2 h-1 v-2 h1 v-2 M4 4 v2 h2 v-2 z">

Does anyone know how the algorithm should work?

Any pseudocode would help.

Tools does the similar approach:

defghi1977
  • 5,081
  • 1
  • 30
  • 29
pravdomil
  • 2,961
  • 1
  • 24
  • 38

1 Answers1

9

You can converts pixels to SVG path string like this.

enter image description here

Using this algorithm, I made script coverts pixel art to SVG.

http://defghi1977.html.xdomain.jp/tech/img2svg3/dot2svg3.htm

(Sorry this page is written in Japanese.)

defghi1977
  • 5,081
  • 1
  • 30
  • 29
  • yes thats basically it, but the step from one to two got me into trouble, how did you joined the overlapping vectors in your algoritm? – pravdomil Mar 04 '17 at 12:33
  • For example, if a vector was presented by `x:y:direction` (string), the inverse of `0:0:right` vector is `1:0:left`. So you can push vector to (normal) object as key for searching inverse vector. – defghi1977 Mar 04 '17 at 12:41
  • I think that I have it, is your code available on internet? GitHub? By the way I have added more tools that solves the same problem and most of it comes form Japan :) look at the question – pravdomil Mar 04 '17 at 13:51