Ankit Kumar Dwivedi worked on Vectorization feature for Synfig as part of Google Summer of Code 2019. He wrote some notes about his experience and we are happy to share them with you.

Hi! My name is Ankit Kumar Dwivedi. It was my 3rd year of Computer Science and Engineering program at Amity School of Engineering and Technology, GGSIPU (Delhi, India) when I started working on this project.

My first encounter with Synfig happened when I participated in Njack Winter of Code 2018. In that period I learned about basic usage of Synfig through video course and helped to create test files for rendering engine which require exploring different options. Synfig is the first open source organization I started contributing to and it was an awesome experience. GSoC (Google Summer of Code) was one of my biggest dreams, so when I found that Synfig became approved organization of GSoC 2019 program I decided to apply immediately. The project I selected is called “Vectorization of Bitmaps”.

What does “Vectorization” means?

There are two main ways to represent images – raster and vector graphics. Most image formats, such as JPG, GIF, BMP, and PNG, are raster graphics, also called bitmap graphics, meaning they store the image as a grid of pixels. However, raster graphics have some weak points. Most prominently, if a raster image is scaled, it becomes blurry and pixelated.

Vector graphics are the solution to this problem, as all its elements are described by mathematical formulas, so vector images can be scaled to any size without quality loss.

Vectorization means transforming raster image into vector graphics. This is not as simple as it sounds. There are a variety of algorithms to perform this, each producing different results since the vectorized image is just an approximation of the original image. In my project I used vectorization algorithm from other open-source animation software called OpenToonz.

This algorithm have following steps:

  1. Polygonization — Extracts a polygonal, minimal yet faithful representation of image contours.
  2. Skeletonization — The process of skeletonization reduces all objects in an image to lines, without changing the essential structure of the image.
  3. Convert to strokes — Convert the sequence into strokes.

Implementation process

I started my project a bit earlier(mid-may). To be honest I was freaking out as I was busy in my exams for the past three weeks before GSoC and had lost the context. But gradually I was back on my pace. Due to my previous contributions at the time of Njack Winter of Code I already had a great bonding with my mentor Konstantin Dmitriev. In the first few weeks I worked on GUI and created the input dialog for the process. During the process I also experimented with Glade (GUI builder for Gtk). For the first month I made weekly posts about my progress, later I created milestones for every step to keep track of what’s remaining to be done.

The GUI part was actually easy the real problem was how to check if my algorithm is working fine? I need to find some way to do that.

So after discussion with my mentor who also maintains a different version of OpenToonz (called Morevna Edition) he asked me to build OpenToonz and do necessary changes in its code order to make checking possible in intermediate steps. After that I compared my output and OpenToonz’s output after same steps to ensure I am going good.

Then comes the second problem the output points given by algorithm were meant for Bezier Curve but Synfig’s Outline uses Hermite so I wrote some conversion to convert Bezier Curve to Hermite.

Till my second evaluation things were going smooth however as soon as the result for second evaluation was declared Igot stuck! I encountered a major issue related to the result. Imagine applying some algorithm to your input data and the result is correct in the first run but when you apply the same algorithm second time you get a different result.

1st run (expected) vs 2nd run (distorted)

I noticed there are two possible results for vectorization on the same image, out of which one is perfect and of the same shape the other is distorted and contain more outline layers than the correct result.

I had some discussions with my mentor Konstantin Dmitriev and he suggested I should focus on other issues and leave it for some time. But I insisted and kept working on that. After all what will be the use of a feature if it’s producing wrong result?

After few sleepless nights and rewriting skeletonizer portion of code (which was actually causing this weird behavior) the issue was resolved.

Then I added variable outline width and fixed the placement issue which was causing the result to appear shifted from original image.

Placement issue

After a few other GUI related fixes the feature was good to go!

Result

Now user can right-click on Image Layer and select “Convert to Vectors…” command.

Convert-to-vector command in menu

Clicking on it opens a vectorizer settings dialog where you can set parameters:

  • Threshold – sets the value of the darkest pixels to be taken into account to detect lines to be converted to vector
  • Acurracy – sets how much the vector stroke will follow the shape of the original drawing lines. High values create more precise strokes but makes them more complex.
  • Despeckling – ignores during the conversion small areas generated by the image noise; the higher the value, the larger the areas ignored.
  • Max thickness – sets the maximum vector stroke thickness; if this value is low very thick lines will be converted in two centerline strokes defining the line outline; if this value is high, they will be converted in a single centerline stroke.
Vectorization settings dialog with input parameters
Output example 1
Output example 2

Here is a demonstration video:

Conclusion

As people used to say “there is always scope for improvement” which obviously applies to my project however I have achieved the minimal goal.

Major learning — First thing I learned was using git, second lesson for me was you can do what you want but things take time. And most important thing I learned was maintaining a huge code-base and asking relevant questions.

GSoC is not a competition — Students specially in India consider GSoC as a contest, Google Summer of Code is a program to motivate budding developers like us to engage in open source contribution. The main idea behind GSoC was that students will connect with the community during the summers and stay with them even after the GSoC program ends.

Anyone can do it — If a person like me who knew nothing about open source and GSoC in 2018 got into GSoC then anyone can.

This Post Has 5 Comments

  1. HelloHiHola

    I’m very excited to try this feature for animations! How do I access it? I’m using Synfig Studio 1.2.2 – is it a special add-on installation?

  2. Logan Archer

    Wow. Just… wow! Thats some amazing work you’ve done. Until now converting a raster image to a vector has always been problematic. Converting it was the easy part, animating it was another story entirely.
    Keep up the good work. I’ll be looking forward to see what you do in the future.

  3. Bharat

    nice job brother

  4. Vital

    congratulation! Good work! 😉
    Very glad to see this thing comming 😉

Leave a Reply to Vital Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.