FlagWaver

A web app for simulating a waving flag.

krikienoid.github.io/flagwaver

Description

FlagWaver is a web app that lets you upload your own image and turn it into a flag. It is a visualization tool that simulates a waving flag in 3D. You can change the hoist direction, wind, background, and more.

See the wiki for details.

Development

This project uses a Gulp powered build system to manage tasks such as transpilation and minification. Code files from the src directory are compiled and output to the dist directory.

Dev tools - Gulp, Rollup, Babel, Terser, Sass, Autoprefixer, clean-css

Frontend - Preact, React Redux, Redux, Spectre.css, three.js

Build

• Run npm install to install dependencies after pulling down the repository for the first time.
• Run npm run start to build the project and run the website locally. The finished site will be created in a folder called dist and will be viewable in the browser at http://localhost:8000.
• Run npm run start-test to build the project to the dist directory with production ready assets.

Resources

• Advanced Character Physics by Thomas Jakobsen Character
• Cloth modeling - Wikipedia
• Real-time Cloth Animation

Credits

Written by krikienoid. Based on previous work by flagtest.nz and Joshua Koo.

License

Code

Code released under the MIT License.

Assets

All art assets included in this project are distributed under their respective licenses.

• Material Design icons - Apache License 2.0
• Montserrat - SIL Open Font License 1.1
• Sky over Washington Monument.jpg - This work has been released into the public domain by its author, Andypham3000 at English Wikipedia. This applies worldwide.
• Blue Clouds Sky - Pixabay License. Free for commercial use. No attribution required.
• Moon Sky Clouds - Pixabay License. Free for commercial use. No attribution required.