Inspiration

We wanted to explore more into the field of creative coding and computer-generated art without the use of artificial intelligence. We saw how many different mathematical spirals and shapes can create abstract art and we were inspired to use these diverse shapes to artistically display something that we commonly interact with every day, the weather.

What it does

Our web app creates a unique artistic display, full of spirals and colors, representing the current weather at any location at any time, ranging from sunny to snowy from Tokyo to Panama City.

How we built it

We built our web app using Javascript and HTML. Using Javascript, we generated a specific design for each weather pattern. Using the Fibonacci spiral for sunny days, the Archimedean spiral as a base for snowy days, and many other geometric shapes for the diverse weather patterns, we created animated art to display our weather in a new, unique way. We integrated WeatherAPI and used HTML to create a web application to display our computationally generated art inspired by the current real-time weather.

Challenges we ran into

Every one of our team members was essentially new to using Javascript and new to creative coding to start off with, and our biggest challenge was primarily getting started with how to create mathematical shapes and spirals using Javascript in the first place. To overcome our challenges as beginners to creative coding and Javascript, we found many resources, from online forums to YouTube tutorials, to give us the building blocks we needed to further explore our tools to create the specific patterns and animations we desired.

Accomplishments that we're proud of

We're mainly proud of how we branched mathematics and code to generate weather-like designs to accent the weather in different areas. With the progression of AI-driven art, we wanted to make it a priority to develop something artistic and entertaining without the usage of AI, much of which is plagiarism-driven in terms of art. Our team is most proud to have accomplished this whilst still adding a degree of randomization and uniqueness for art generated based on the weather. One last accomplishment we are extremely proud of is our animation of these designs, as well as the time-based color choices throughout the background. Implementing a background that changes according to the time in the location was a difficult endeavor, to say the least, and going into this project, animation was something we had not imagined we would be able to accomplish.

What we learned

We learned that JavaScript varies greatly according to pivotal functions such as the draw() function, which led to us being able to animate our art but also made it more difficult to integrate all of the different weathers in one program together. This project also taught us the inner workings of JavaScript, as many of us went into this hackathon with amateur knowledge of JavaScript at best, and came out creating beautiful, abstract, WeathArt. Moreover, we also got to indulge ourselves in the world of mathematics as we pursued this project, looking into different mathematical components such as the Koch snowflake or the Fibbonacci spiral and reimagining what they may translate to in terms of art, something none of us had ever done before.

What's next for WeathArt

In terms of the future of WeathArt, we would love to make the designs a bit more randomized, as currently whilst there's animation and slight randomization, much of the weather-based art is consistent, which can take away from the entertainment factor of our current design. For this project, we hope to also refine the designs we have created as our knowledge of code-based art improves, given that this was our first time exploring this medium of art.

Built With

Share this project:

Updates