Integrate Flagwaver in private website

[alf4all]

What a fantastic web app. I have played around with cloth modeling in Povray for a long time ego, so I understand the complexity. But...is there somewhere a instruction with an example how to integrate flagwaver in my private website? What files do I have to put on the webpage, is there a init file to select options and a link to the flag image?
Thanks and regards...
Wijnand

[krikienoid]

Hi! That's a broad question that could be hard to explain in a single comment. It depends on what you mean by integration.

You could create an iframe to embed the whole FlagWaver app onto a web page as-is. The flag image source, background image source, and some other options can be passed in via URL parameters.

If you are wanting something more custom and are comfortable working with JavaScript, you could create your own canvas element and initialize your own instance. Everything related to physics and 3d rendering is contained within this app object, and objects like flags and wind effects are registered to this app object. Here is the one that is used for FlagWaver: https://github.com/krikienoid/flagwaver/blob/master/src/assets/js/app/globals/initApp.js

[alf4all]

I am not so comfortable with JavaScript that I can reprogram your App. Attached a part of my homepage (Povray) with the Dutch flag as animated gif. Two big reasons to try to change the gif for your app:

1. It.s far more realistic
2. I like to change the flag from the Dutch one to the project logo.
   I like the iframe option, but how to do it in my scene?
   I hope you can help me, thanks and regards...
   scene.zip

[krikienoid]

Here is some sample code that would create an iframe of FlagWaver. The part of the URL that looks like this src=https%3A%2F%2Fi.imgur.com%2Fni7178E.png is what tells FlagWaver to load the image from this url: https://i.imgur.com/ni7178E.png.

<iframe src="https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi.imgur.com%2Fni7178E.png" width="600" height="400"></iframe>