# Bitmap Outliner
This algorithm converts a bitmap image to vector paths enclosing the pixel groups.
*The outlined paths on the right side are slightly shifted to show their way around the pixels; they will, of course, be aligned with the pixel borders.*
## SVG Paths
Given the following bitmap from the above image:
```c
0, 1, 1, 1, 0, 0,
1, 0, 1, 0, 0, 1,
1, 1, 0, 0, 1, 1,
1, 0, 0, 1, 0, 1,
0, 0, 1, 0, 1, 1,
1, 0, 1, 1, 1, 0,
```
The generated SVG path will look like this (line breaks are added to separate the path loops):
```xml
```
## C Example
```c
#include
#include "bitmap-outliner.h"
// the bitmap size
int const width = 6;
int const height = 6;
// the bitmap data
uint8_t const data[] = {
0, 1, 1, 1, 0, 0,
1, 0, 1, 0, 0, 1,
1, 1, 0, 0, 1, 1,
1, 0, 0, 1, 0, 1,
0, 0, 1, 0, 1, 1,
1, 0, 1, 1, 1, 0,
};
int main() {
// allocate outliner
bmol_outliner* outliner = bmol_alloc(width, height, data);
// find paths in bitmap
bmol_find_paths(outliner, NULL);
// calculate SVG path length (needs some performance).
// for numerous calls to `bmol_svg_path`,
// better use a large enough buffer directly.
size_t path_len = bmol_svg_path_len(outliner);
// ok for small bitmaps; be aware to not use large buffers on the stack!
char path[path_len];
// write SVG path to `path`
bmol_svg_path(outliner, path, path_len);
// output SVG
printf(
"\n", width, height, path);
// free outliner
bmol_free(outliner);
return 0;
}
```
### Run
Execute the following command to run `main.c`:
```sh
$ sh main.c
```
## Javascript Example
```js
import 'src/bitmap-outliner';
// the bitmap size
const width = 6;
const height = 6;
// data can be any indexable array
const data = new Uint8Array([
0, 1, 1, 1, 0, 0,
1, 0, 1, 0, 0, 1,
1, 1, 0, 0, 1, 1,
1, 0, 0, 1, 0, 1,
0, 0, 1, 0, 1, 1,
1, 0, 1, 1, 1, 0,
]);
// create outliner
let outliner = new BitmapOutliner(width, height, data);
// get SVG path; implicitly calls `outliner.findPaths()`
let path = outliner.svgPath();
// output SVG
console.log(
``);
```