AlgoArt

Imagine using points and lines to replicate Van Gogh’s Starry Night. Here on at AlgoArt, you will see a fusion of aesthetics and data technology via the magic of algorithm.

Comment

Inspiration

Many associates software engineers, CS students, web developers with caffeine, late night grinding, and thick glasses. Maybe that is partially true, especially at this point of Hackathon. However, the world of modern technology is integrating more and more humanity aesthetic and beauty. As a group of students who both are the future of modern tech and lovers of classic art, we use our spirit of innovation to bring any form of artwork and images into points and lines using algorithm.

What it does

We demonstrate the steps of using famous Traveling Salesman Problem optimization to generate a continuous line drawing from a given image. It first samples points from the image in a way that darker regions have more packed points. Then it solves the Traveling Salesman Problem using those points as cities. The resulting tour is a continuous closed path that, when drawn, resembles the initial picture. Notice that we visualized the algorithm while making the TSP art.

How we built it

The project implemented three main algorithm: rejection sampling, a weighted variant of Lloyd's Algorithm, and TSP. Half of the team built the backend using JavaScript in Observable Notebook, an awesome interactive tool for data visualization. The other half of the team used html, CSS, and JavaScript in SubLime and Visual Studio Code to build the frontend.

Challenges we ran into

We have zero or just very basic web development skill set. The biggest challenge is probably having to learn the languages, essential techniques, and implement them in such a short time. We basically used our limited prior understanding of programming logic combining it with online tools and tutorials. Another challenge was the team collaboration in virtual environment. As we cannot meeting in person, we had to use Zoom, GitHub, and our timely communication via online platform to collaborate.

Accomplishments that we're proud of

We are proud of making so much progress in such a short time. Two of our team members are sophomores who only started Data Structure class and yet are officially introduced to the web development world upon the completion of this program. We are especially proud of our two upperclassmen who took on the role of mentor explaining the tools, language syntax, and patiently answering questions of our younger students while themselves are learning entirely new techniques of building the frontend.

What we learned

We learned a lot about the underlying algorithm. As we went online to search the information of the algorithm we used, we are fascinated about the power of mathematics in creating simulation of visuals. On a more practical level, we learned JavaScript, HTML, and greatly improved our debugging skill. We also learned how to stand on the giants to use our variant of existing logic to create side features such as slide bars, color change, and customizing number of pixels we use.

What's next for AlgoArt

Our further goal is to discover more algorithm and build a collection of tools to generate different forms of art. We may collaborate with online gallery database to build a virtual exhibition of digital art. Furthermore, we would like to collaborate with the other Hacks project (such as the winner "Art Match", a 3-D online gallery) to realize our visual.

Built With

Share this project:

Updates