Desmos Art Generator

Iron man
Manga
Spiderman
Viking
Rick Astely

Inspiration

When learning about SVG file formats for an Android development class, mobile apps commonly use this format, I came to realize that SVG files held a unique property. Unlike other file formats, SVG files use mathematical equations to store an image instead. These equations would then be graphed by a computer. As someone who also liked playing around with mathematical equations on desmos, a graphing tool, I wanted to make use of this unique file format to display images on desmos using equations.

What it does

This program converts an image into a set of graphable equations. These are then graphed on demos using its API. This program takes advantage of a file format called SVG (Scalable Vector Graphics). Unlike other methods of encoding images, like PNG and JPEG, SVG files encode the image using mathematical equations. For this reason, SVG files are very compact and often used in 2D website design.

How we built it

The app was built using Python and desmos. Documentation for SVG files was consulted. In addition, Wikipedia and my math textbook were used to understand the math behind the bezier curves.

Challenges we ran into

One of the main challenges I ran into was understanding the math and the formatting of an SVG file. The varying formats used made it quite difficult to make the project work for all SVG file formats. In addition, the conversion of the bezier curves posed a challenge due to the mathematical complexity of converting bezier points to parametric equations. I overcame the SVG file formatting problems by using regular expressions instead of XML parsing libraries to extract the paths. The mathematical aspect was made simpler by revisiting an old calculus textbook.

Accomplishments that we're proud of

I am personally proud of the fact that I didn't give up on problems I encountered. I had several first attempts where the graphs looked like this: https://www.desmos.com/calculator/pnxiljwbbb. I had almost no idea how to fix things and had to resort to manually computing some of the curves in order to test the program.

What we learned

Through this I gained a deeper understanding of calculus, finding some real-life applications of it instead of simply learning from a textbook. In addition to this, I also managed to explore new libraries in Python and improve my programming skills.

What's next for Desmos Art Generator

In the future, I can learn to incorporate more complex curves like quartic and arc bezier curves. Attempts can also be made to animate the curves. Also, attempts can be made to represent entire videos as mathematical equations. This would mean videos can be played in a graphing utility like desmos.