A web app for simulating a waving flag.
krikienoid.github.io/flagwaver
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.
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
- 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 calleddist
and will be viewable in the browser athttp://localhost:8000
. - Run
npm run start-test
to build the project to thedist
directory with production ready assets.
- Advanced Character Physics by Thomas Jakobsen Character
- Cloth modeling - Wikipedia
- Real-time Cloth Animation
Written by krikienoid. Based on previous work by flagtest.nz and Joshua Koo.
Code released under the MIT License.
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.