Concept
The idea “Rain Catcher” tackles this challenge head-on by introducing a web application for a sustainable solution Testing platform. These aren’t your average rain shelters; they’re sophisticated rainwater harvesting systems designed to capture and store this valuable resource. Rain Catcher might help cities to transform a potential burden – rainwater – into a valuable asset, promoting a more balanced and resilient urban water management system. Additionally, these innovative structures have the potential to become a unique design element, adding a touch of elegance and functionality to the urban landscape.
Process
The process behind Rain Catcher involved using Grasshopper, a visual programming language, to define a step-by-step guide for designing these urban umbrellas. This guide was then transferred to Rhino Compute, a cloud-based platform for running complex calculations. To ensure the design prototype would function seamlessly online, we utilized the Hops for testing. Through Grasshopper, we defined inputs and outputs for creating three unique Rain Catcher designs.
Here’s a breakdown of the key points:
- Grasshopper: Used to create a visual guide for designing Rain Catchers.
- Rhino Compute: Platform for running the design calculations in the cloud.
- Hops: Plugin for testing the online functionality of the design prototype.
- Inputs & Outputs: Defined in Grasshopper to create variations of Rain Catchers.
Interaction with UI
The Rain Catcher web app offers a user-friendly interface for designing and customizing your urban umbrella. Here’s what you can expect:
- Upload: Simply upload a closed, curved 3dm file representing the base design of your Rain Catcher.
- Design Controls:
- Sliders: Adjust the height and size of your Rain Catcher to fit your desired specifications.
- Randomizer: Toggle a randomizer option to have the system automatically position your Rain Catcher within a designated area.
- Rotation: Use a slider to control the degree of rotation for your Rain Catcher.
- Design Selection: Choose from a dropdown menu offering different Rain Catcher design options.
- Add More: Feeling creative? Click a button to add additional Rain Catchers to your design.
- Compute Button: Once you’ve finalized your design, click the “Compute” button to initiate the script in the backend. This will process your selections and generate the final Rain Catcher model(s).
This section clearly explains the UI elements and functionalities, making it easy for users to understand how to interact with the Rain Catcher web app and create their desired urban umbrella design.
Tools
To build Rain Catcher, we dipped our toes into various cool techie tools during our cloud-based data management course. Here’s the breakdown:
- For the Web App Look (Front-End):
- HTML & CSS: Imagine these as the building blocks and paint for the Rain Catcher web thingy.
- JavaScript & Vue.js: These guys made the Rain Catcher web app more interactive, like adding cool features and stuff. Think of them as the special effects department!
- Three.js: This is the secret sauce that lets you see the Rain Catchers in 3D within the web app, all fancy and whatnot.
- Behind the Scenes (Back-End):
- Rhino Compute: This cloud-based superhero crunched all the numbers to make the Rain Catcher designs come to life.
- Keeping Track of Everything:
- Git & GitHub/GitHub Desktop: These are like filing cabinets for code, keeping everything organized and allowing us to work together smoothly.
Conclusion: Rain Catcher – Making Rain Your City’s BFF
Rain Catcher isn’t just another fancy design idea – it’s a game-changer for thirsty cities! This web app lets you design awesome umbrella-like structures that snag rainwater, turning a potential headache (floods!) into a valuable resource. Imagine your city with these cool Rain Catchers, not just looking good but collecting free water for later use. Rain Catcher is just the first step – with more development, it could be the future of how cities deal with rain, one happy downpour at a time!
