Scape
Creating a generative landscape art web application, from ideation to implementation
Intro
Overview
Rebuild earth’s landscapes
Scape was created in 24 hours for Hack@Brown’s 2022 Hackathon. I worked in a team of three with another UI designer and a software developer. Our final project was Scape, a generative art web application where you could create your own landscapes.
I was responsible for the original ideation, UI design, animation, and contributed to the implementation in React. Our project won the Best 1st Time Hack award.
Opportunity
24 Hours to design a web-application
Our team was challenged with the task to create a web application in 24 hours that fit this year’s Hack@Brown's Greenhouse theme, which focused on sustainability.
Ideation
Project design
Generative canvas application
Our team wanted to combine the Greenhouse theme with our combined love of art to create a web app where every individual could create something unique. We wanted to combine generative and random aspects to give each landscape a sense of independent growth.
Animation
Storytelling our project
To engage users to create their own landscape, I framed users as being responsible for creating new land and life after the world has been left barren.
I chose to use simple illustrations to mimic the style of art users would be able to create, and made a storyboard.
Features
Sand
Colorful sand dunes
- Physics simulations for accurate sand falling, piling, and sifting
- Random color generator for unique landscapes every time
Plants & Water
A growing landscape
- Plants start as seeds and grow only on sand
- Grow to varied heights with random branching
- Water causes the plants to grow even further, so that the landscape was always in progress.
- The water would also behave as real water would, to give a sense of fluidity and make the landscape feel more alive.
Eraser
Shifting foundations
- Drains the sand where you hold it to preserve physics simulations
- Unpredictable rippling effects that simulates real landscapes
Final Designs
Canvas
A new landscape every time
Animation
From barren land to growing soil
Recap
Reflections
Design in small doses
This project was my first Hackathon and team project. It was really challenging to create this project in only 24 hours, but it was an incredibly rewarding experience. I created a working web-application with my team, and we all learned new skills, such as using React and HTML.
