As a team, we knew we wanted to create something visual and artistic since we are all passionate about art. After looking at existing art applications, we noted that there were many applications where you draw entirely from scratch, or just fill in colors. We wanted to create an interactive and generative art application so that anyone, regardless of artistic ability could create something special. Combining our software engineer’s interest in particles and this year’s Greenhouse theme, we decided to create a generative landscape application where users could craft their own world while making things grow, a reminder that small actions such as planting a single plant can make a difference. We also wanted it to feel more like a game than a simple sandbox tool, so we created an animated story to preface our application.

Note: Demo is laggy due to laptop issues

What it does

Our website allows users to generate a unique landscape. We have a variety of features. These include randomly colored sand that falls from your cursor to build up the terrain, planting seeds that grow with a click, water to fill lakes and make your plants flourish, walls to divert the flow of sand or water, and an eraser tool. The user has the power to create whatever landscape they want, and start again at any time.

How we built it

Our web app was designed in Figma and coded in JavaScript with React integrating all the moving parts. We used physics simulations to create the illusion of falling sand and moving water as well as generative algorithms to make our plants grow.

Challenges we ran into

While our software engineer had experience making generative art, they had used programs that had done the processing for them, so one challenge was figuring out how to get the sand to fall with the proper frame rate. We also struggled with how the pixels could be manipulated to generate good graphics. Another challenge we faced was balancing good design for efficient and easy coding. Integrating our design was especially difficult because we all had to learn so much about HTML, JavaScript and CSS while creating our project.

Accomplishments that we're proud of

This is our first Hackathon, and we learned so much doing this project. We are proud that we made something in the intersection of art and computer science, something we are all incredibly passionate about. Creating the generative algorithms for the plants, and doing all the work to make our final polished product was very difficult but definitely worth it.

What we learned

Through our experiences, we learned so much about the integration of algorithms with the visual displays. We expanded our skills in a variety of languages including HTML, JavaScript, CSS and React and all went out of our comfort zones in this project.

What's next for Scape

In the near future, we want to add a few more features that we didn’t have time for. We want to add undo and redo functionality, a color picker to choose the aesthetic of the sand, a toggle to hide and show the toolbar, as well as create a platform where users can save their pieces and even share them with others. We also want to add different backgrounds, as well as more generative aspects including trees, clouds, and more to improve the artistic experience for users and allow for even more creative freedom.

Share this project: