Inspiration
It all started several years ago, with a simple solution to solve the following challenge: "Convert an image to a drawing using one line". That was the beginning of a long journey in the world of fractals, L-systems, and programming languages, a journey that has not ended until this day.
The inspiration comes from Hilbert space-filling curve, which does the impossible thing and maps a 1-D line onto a 2-D surface. This is a key element in the solution.
What it does
The app uses the famous Hilbert space-filling curve to run over the image pixels. The main feature of this curve is in the locality feature - it can trace the whole image pixel by pixel without any jumps, as would happen if one would just go over line by line, resulting in line breaks.
Along its run, the algorithm the current pixel with the previous one. If they are similar in their value, nothing happens and the app continues to the next pixel.
When the current pixel differs from the previous one in more than some threshold, it means that there is some edge and a line is connected from the last place an edge was found.
As a result, smooth areas will not contain many lines, and areas that are noisy and contain many edges will have many segments.
How we built it
The code was developed using:
- plain old vanilla Javascript, with
Uint32Arrayfor performance - Math (Thank you Prof. Hilbert!)
Challenges we ran into
Since the app needs to read the pixels of the image, we tried to write it from scratch, and we stumbled upon some obstacles that were hard to debug, wasting about half a day of development. Importing an image and accessing its pixels are causing a security concern since an adversary can inject malicious code through this vector. Eventually, we used a sample in the website that transforms image, and we built upon that.
Accomplishments that we're proud of
The app runs over the image pixels only once, making it very performant.
As it takes about 30 milliseconds to process each frame, it can run smoothly on a live video stream from camera!
What we learned
- It is time saving to start development from examples, instead of inventing the wheel and bumping into common pitfalls
- The separation of algorithm from the example images makes it is very easy to test the algorithm on different images.
What's next for One Line Drawing
- generate a video that shows the line being drawn
- drawing smoother lines, and removing sharp artifacts
- using a variable line width, or brush effects
Log in or sign up for Devpost to join the conversation.