update readme

README.md

@@ -1,68 +1,48 @@
 # Contourer
 
-Tool for creating svg contours for stickers images.
+Tool for creating svg contours for images.
 
-## Example
+![](docs/assets/contourer-app.gif)
 
-| **Original image**            | **Contour with margin 0**       | **Contour with margin 10**       |
-|-------------------------------|---------------------------------|----------------------------------|
-| ![](assets/examples/phil.png) | ![](assets/examples/phil_0.svg) | ![](assets/examples/phil_10.svg) |
+## Example
 
 As an original image you should use png pic with a transparent background.
 
-## How it works
-
-| Get an image                        | Create a shade                      |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-0.svg) | ![](assets/how-it-works/step-1.svg) |
-
-| Find a contour                      | Extend the shade                    |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-2.svg) | ![](assets/how-it-works/step-3.svg) |
-
-| Color it black                      | Trace a shade                       |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-4.svg) | ![](assets/how-it-works/step-5.svg) |
-
-| Remove filling                      | Сombine with image                  |
-|-------------------------------------|-------------------------------------|
-| ![](assets/how-it-works/step-6.svg) | ![](assets/how-it-works/step-7.svg) |
-
-<!-- ## Usage
+| **Original image**            | **color: `red`<br>margin: `0`**       | **color: `blue`<br>margin: `10`**       |
+|-------------------------------|---------------------------------|----------------------------------|
+| ![](docs/assets/examples/phil.png) | ![](docs/assets/examples/phil_red_0.svg) | ![](docs/assets/examples/phil_blue_10.svg) |
 
-...
+[How it works](docs/how-it-works.md)
 
-## Development
+## Usage
 
-To run your local copy of Contourer for development follow these steps
+Download version for your OS from releases.
 
-### Install
+Run app with path to image as an argument.
 
 ```sh
-
+./contourer-linux path/to/image.png
 ```
 
-```sh
-$ npm i
-```
+Vectorized copy of image with contour will be created near the source file. It will have the same name and `.svg` extension.
 
-### Run Contourer
+### Customization
 
-To process image with Contourer pass path to this image
+Set up contour color with `color` (default: `pink`) arg.
 
 ```sh
-$ npm start <path-to-file>
+./contourer-linux path/to/image.png --color=blue
 ```
 
-### Pack binaries
-
-Create a single binary file to use Contourer on production by the following script.
+You can set `margin` (default: `0`).
 
 ```sh
-$ npm run pack
+./contourer-linux path/to/image.png --margin=10
 ```
 
-Binaries for Linux, macOS and Windows will be created in `build` directory. -->
+## Improvements
+
+Fork me and feel free to ask questions, report bugs and open pull requests. Check out [developer's guide](docs/how-it-works.md).
 
 ## License
 

docs/development.md

@@ -0,0 +1,36 @@
+# Development
+
+To run your local copy of Contourer for development follow these steps
+
+## Install
+
+Clone repository
+
+```sh
+$ git clone https://github.com/stickerum/contourer
+$ cd contourer
+```
+
+Install Node.js dependencies
+
+```sh
+$ npm i
+```
+
+## Run Contourer
+
+To process image with Contourer pass path to this image
+
+```sh
+$ npm start <path-to-file>
+```
+
+## Pack binaries
+
+Create binary files to use Contourer on production by the following script.
+
+```sh
+$ npm run pack
+```
+
+Binaries for Linux, macOS and Windows will be created in `build` directory.

docs/how-it-works.md

@@ -0,0 +1,49 @@
+# How it works
+
+Step by step explanation of Contourer's work.
+
+## Get a source image                       
+
+![](assets/how-it-works/step-0.svg)
+
+## Create a shade
+
+Paint black each non transparent pixel                
+
+![](assets/how-it-works/step-1.svg)
+
+## Find a contour
+
+For each black pixel we check his 8 adjacent pixels. If one of them is transparent then target pixel is on the contour of image.
+
+![](assets/how-it-works/step-2.svg)
+
+## Extend the shade
+
+Each contour's pixel should be «enlarged» to the margin size. We do this to create contour that places with a distance to image.
+
+![](assets/how-it-works/step-3.svg)
+
+## Color it black
+
+Actually we don't draw this red contour. This step is for better understanding the process.
+
+![](assets/how-it-works/step-4.svg)
+
+## Trace a shade
+
+Now we have a shade that should be traced. At the end of this step Potrace will return a vectorized copy of this shape. We use modified version of [node-potrace](https://github.com/stickerum/node-potrace) so we able to set up color for shape's stroke.
+
+![](assets/how-it-works/step-5.svg)
+
+## Remove filling                  
+
+Returned vectorized shape doesn't have any filling. It also was done for understanding.
+
+![](assets/how-it-works/step-6.svg)
+
+## Сombine with an original image
+
+The last step is combine svg contour and image to one file. To do this we encode source image to base64 and add it to svg code.
+
+![](assets/how-it-works/step-7.svg)