Strokes is a program that takes in an image and creates an animation of the image being painited on a blank canvas. The created image is painted one stroke at a time, as a real person might do.


In my freshmen year, when taking 15-112: Fudamentals of Programming, we were given the freedom to choose what to do for a final project. Hence, this project started out as an idea to attempt to create a program that could show you how to paint any picture, inspired by the painting that I had been doing for Booth that year. The general idea is to take in an image and then create an animation where the picture is painted in front of you. The project is thus split into 3 core modules: One handles the initial menu screen instruction, parameter specification and loading screen, while the other launches from it once the necessary information has been fed in to the program. This other module handles the code for the creation of the painting and the animation side of things. other files are imported modules. Below is a video explaning more about the program.



Below are some of the example outputs with the original images on the right for comparison:


In the main module that the user launches, the menu screen is the first thing the user sees. This is simply a title screen with 3 options: Paint, Instructions, and Quit. Quit quits the game while Instructions brings the user to an Instruction screen that explains how to navigate the program. Once done, the user can return to the main menu and then click Paint, which brings them to the parameter specification screen. This developed along the way as I realized in the creation of the painting, the algorithm took in several variable paramters that could be specified at the start. Hence, this opened the option for allowing the use to choose their own specifications for the different variables. This allows the user to vary the input parameters and directly affect the final painting/product, allowing a degree of flexibiliy and customizability for the user, especially since the final results could be saved, essentially letting the user play around to achieve different styles. Going acbk to the parameter screen, it displays a list of the 6 different variables with the current entry beside it. It starts already with pre-entered variables. At the top is the most important one which is the Image file to load. the user clicks on file, which bring them to the file browser. It enters the Term project folder, and only displays png files. Besides that, they can click any of the other 5 variables and enter their desired parameters. the description on the side appears giving reccomended valsues for different painting styles. Once done, the user simply clicks create painting and the loading screen appears.

The loading screen runs until the program finishes the calculations. This could take up to a few minutes if many small brushes are specified. Once done, the canvas loads and the user can see a blank canvas with the original image at the side, along with the current color and the brush Size. The animation starts and the user can see the painting being painted. If desired, the speed of the animation can be slowed down so that individual strokes can be seen. Also, the option to skip to the end is available. Once the painting is done, a save image button appears by the side which allows the person to click and save the image into the file.


Strokes takes in a photo image and brush sizes(perhaps gives the user a selection to choose from) and then produces an animation of the image being painted on a blank canvas, stroke by stroke. For each brush size, the program first creates a blurred reference image using a gaussian blur and then compares the current canvas to the blurred reference image. The brush size determines a grid spacing and for each point on the canvas in that grid, the color varience from the reference image of the canvas is calculated. If it exceeds a certain threshold, a brushstroke is added, at a point calculated by searching around the gridpoint for the point with the greatest error.(determined by the Euclidean distance in RGB space). For the brush strokes, I start with simply placing circles of the brush radius centered on the point, and then place a long curved brush stroke. The strokes are placed normal to the image gradient, hence the strokes are essentially contours lines of points with similar color.

The algorithm was implemented as described from the following source: