Creating a generative landscape art web application, from ideation to implementation
Overview
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.
Date:
Jan ‘22
Role:
UI Designer
Tools:
Figma, Procreate, React
The Opportunity
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.
Design Process
Ideation
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 decided to take advantage of our software developer’s skill with creating generative algorithms to make a web app that allowed users to make their own landscapes.
We began our brainstorming by thinking about whether the web app should be a blank canvas art application, under a time constraint, or be more like a game. With the 24 hour time constraint, we decided to make it a blank canvas.
We decided to focus on implementing a sand feature, plant feature, and water feature. Additional features included walls which redirect the path of the sand and water, as well as an eraser to later modify the landscape.
We chose the style of the art to be pixel by pixel so that our landscape would be unique to each particle of sand placed. This also allowed the sand and water to obey physics in order to best mimic real life.
Toolbar Design
Moving on from ideation, while our software developer began to work on coding the web app, the other UI designer and I worked to design the toolbar.
I considered many positions and shapes for the toolbar and the features that needed to be added.
Because our landscapes would be created by dropping things from above onto the ground, I decided it was best to keep the bottom and sides empty to not distract from the art.
I wanted to make the experience to focus much more on the output than the process of creating the landscape, so after comparing designs and discussing with the other UI designer, we decided to use a rounded rectangle at the top of the screen as the tool bar.
Early Toolbar Design
Early Toolbar Design
This was un-intrusive, convenient, emphasized the canvas, and made the most sense since users changing tools could immediately start dropping sand or water with minimal mouse movement.
Sand
We designed the sand to behave how sand falling in real life would so our web app would feel as if you were truly creating your own landscape.
In order to include the generative aspect, we decided against being able to choose the color of the sand. Instead, the sand could be colored by a random color selector. This ensured that every landscape created would truly be unique to the creator. I was responsible for designing the random color generator icon.
Plants & Water
In designing the plants, we debated whether the plant would be more of a tree, bush, or flower plant.
The plants would also grow only on the sand, and to add the generative aspect, plants would grow to random heights, with leaves that would randomly branch off.
Importantly, the plants would start as a “seed” before growing in order to preserve the sense that the user’s landscape was thriving before their eyes.
Water would also cause the plants to grow even further, so that the landscape was always in progress. The water would also behave as real water would, to again give a sense of fluidity and make the landscape feel more alive.
Eraser
We initially wanted to include an undo and redo function, but because the sand and water behaved as they did in reality, how could we undo water splashing onto a plant, or a pile of sand collapsing under its weight to be redistributed?
To solve this, we instead decided to implement an eraser. This eraser when used on the sand would not erase the sand pixel by pixel, but instead act almost as if the sand was being drained away in that spot such that the surrounding sand would still behave as real sand.
Designing the Animation
In this project, I was specifically responsible for creating an animation that would be the opening page, and premise for our web application Scape.
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 gave users a sense of a goal in order to create more incentive and purpose when using the blank canvas in Scape.
I chose to use simple illustrations to mimic the style of art users would be able to create, and made a storyboard.
I used Procreate to turn these sketches into the final animation that our web app would open with.
Final Product
This is the final design with the finished toolbar design and icons.
I created the sample landscape seen on the screen using Scape.
More Examples of Scape Landscapes
Scape Complete Demo
Make your own landscape in the most recent version of Scape
Next Steps
○ Design better icons and a toolbar to fit a larger range of tools is needed since fire, lightning, snow, and clouds have been added.
○ Add different modes for the landscape generation: a blank canvas, time-limited, or a game with set goals.
○ Create a platform in which users can post and share their landscapes to better enjoy and to inspire variability and creativity among users and their landscapes.
Reflections
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.
