6 ms·

Online flag waver

98 points by billpg 9y ago

billpg 9y ago
I use this to test flags. A flag may look fine when flat and still, but it has to work and be recognizable under windy conditions too.
- rrauenza 9y ago
  Nice! And timely for this xkcd -- I tried to use this as the image, but hit cross site limitations: https://xkcd.com/1969/ https://xkcd.com/1969/
  - nighthawk454 9y ago
    Good idea. It works if you upload the image to Imgur first: https://i.imgur.com/ASPoRFI.png https://i.imgur.com/ASPoRFI.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi.imgur.com%2FASPoRFI.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi...
- Etheryte 9y ago
  Just out of curiosity — what is it that you do that requires creating (I assume) a large set of new flags?
  - cmg 9y ago
    In my case, I work for a design studio that often creates branded flags (along with awnings, signage, stickers, etc) for restaurants and other storefronts. This is going to be great for our designers to test out what their flags will look like under semi-realistic wind conditions!
    - harrisjt 9y ago
      What types of patterns don't work on realistic flags?
      - cmg 9y ago
        Stuff that's heavily reliant on text, mostly. So we'll try to use logo marks that are identifiable as the brand instead of using the full place's name.
        zeveb 9y ago
        Sounds like adapting rules for mediæval heraldry might be useful for y'all. Shields & livery, after all, were meant to be clearly visible from a distance, in poor conditions, while the viewers were in psychological distress. Likewise, flags which use bold swathes of colour & logos are more likely to be recognisable than wordy texts.
        ggg9990 9y ago
        Also some words are confusing when flapping around and some are not, depending on how many other words can be formed with the letters that are not visible. Perhaps some algorithm could be made to ascertain the flagworthiness of a string.
    - DonHopkins 9y ago
      Cool! Do you also design wacky waving inflatable arm flailing tube men? I'd love to see what kind of a virtual wind tunnel stress testing tool somebody could come up with for those! https://www.youtube.com/watch?v=a3-JNf-5Yqw https://www.youtube.com/watch?v=a3-JNf-5Yqw
verelo 9y ago
Sharing these is very hard as the URL takes the b64 content and most places i've tried to send this don't take URL's this long (i cannot even shorten it with bitly or our internal url shortener). It'd be nice if it took the URL to make this happen!
- blattimwind 9y ago
  If you hand it an URL, the URL remains an URL. E.g. https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ffb%2FFlag_of_Germany_%2528state%2529.svg%2F1000px-Flag_of_Germany_%2528state%2529.svg.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fu...
  - verelo 9y ago
    Thanks and interesting, i passed it a URL but it gave me a b64 version. I am wondering if something changed. I certainly didn't provide it b64 previously.
screaminghawk 9y ago
This would have been a great reference during New Zealand's failed flag referendum. Long live laser kiwi!
- spectre 9y ago
  https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi.imgur.com%2FBB25stO.jpg https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi...
helb 9y ago
If you don't see the flagpole, your WebGL implementation might be broken. I had to launch Chrome on a dedicated GPU (using optirun/bumblebee), it didn't work on the Intel one. A lot of stuff is logged into console, the relevant part is probably "extension `GL_ARB_gpu_shader5' unsupported in fragment shader". I guess my laptop is just too old. Thinkpad T420, i5-2540M (didn't work) & Quadro NVS 4200M (works), Linux.
- examancer 9y ago
  Newer Intel chips seem to render it fine in Chrome on Linux. i7-8550U laptop here running Ubuntu 16.04.
- mattcoles 9y ago
  Anyone had any luck with Firefox on any system?
  - helb 9y ago
    Not with the stable version, but Firefox nightly (61.0a1) seems to work very well (with optirun to run it with NVidia card, see parent comment). Better than Chrome actually.
  - Karunamon 9y ago
    Works fine on 59.0 here. Modern-ish integrated Intel GFX.
  - emidln 9y ago
    It seems to work fine with my Fedora 27 system (Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0) using a GeForce GTX 1080 Ti/PCIe/SSE2 running proprietary linux drivers (v390.25).
  - rudedogg 9y ago
    Good on Firefox 59.0.1, macOS 10.13.3
  - tazard 9y ago
    Firefox Focus on Android works fine
slimshady94 9y ago
The title immediately made me think that this would be a competitive multi-player webgame that invoked the patriotism of users to keep their country's flag flying.
- Terr_ 9y ago
  I thought it would be about social media patriotic astroturfing.
- DonHopkins 9y ago
  Every tweet with a country's hashtag provides a tiny little gust of wind to their flag.
TomMckenny 9y ago
nope, still no improvement for: http://www.idahostatesman.com/news/state/idaho/article72030522.html http://www.idahostatesman.com/news/state/idaho/article720305...
- kolpa 9y ago
  You have to share the attempt: https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fwww.idahostatesman.com%2Fnews%2Fstate%2Fidaho%2F1qvgjx%2Fpicture72030512%2Falternates%2FLANDSCAPE_1140%2Fpocatello%2520flag https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fww...
- protopete 9y ago
  The new one is better: https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fbloximages.chicago2.vip.townnews.com%2Fidahostatejournal.com%2Fcontent%2Ftncms%2Fassets%2Fv3%2Feditorial%2F4%2F82%2F482cb704-a0ea-5103-a808-32ec21868911%2F59b04edcaa10f.image.jpg https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fb...
tabs_masterrace 9y ago
Only getting a white flag using this: https://thepiratebay.org/static/img/tpb.jpg https://thepiratebay.org/static/img/tpb.jpg
- askvictor 9y ago
  perhaps their hosting service (or your ISP, depending on where the image gets pulled to) blocks connections or DNS lookups to TBP? Update: looking at the JS console, it looks like CORS policy is preventing this: Access to Image at 'https://thepiratebay.org/static/img/tpb.jpg' https://thepiratebay.org/static/img/tpb.jpg' from origin 'https://krikienoid.github.io' https://krikienoid.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://krikienoid.github.io' https://krikienoid.github.io' is therefore not allowed access.
jeggerly 9y ago
They need to add a giphy option
progval 9y ago
It even works perfectly with transparent PNGs!
berbec 9y ago
Very nice. Is there an option to remove the text and forms once you load a file/url? My test: https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fimages.fanpop.com%2Fimages%2Fimage_uploads%2FRepublicans-For-Voldemort-debate-678442_504_157.jpg https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fim...
- mcknz 9y ago
  https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fother98-agitpopcommunica.netdna-ssl.com%2Fwp-content%2Fuploads%2Fsites%2F3%2F2017%2F09%2Fb7a563b59a00d847f8025209cba0721d.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fo...
DonHopkins 9y ago
From the code: https://krikienoid.github.io/flagwaver/js/flagwaver.js https://krikienoid.github.io/flagwaver/js/flagwaver.js Aug 3 2012 Since I started working for a new startup not too long ago, I commute between home and work for over 2 hours a day. Although this means less time on three.js, I try getting a little coding on the train. This set of experiments started from a simple hook's law doodle, to spring simulation, string simulation, and I realized I once again stepped onto physics and particle simulation, this time, more specifically soft body physics. Based on the "Advanced Character Physics" article, this experiment attempts to use a "massless" cloth simulation model. It's somewhat similiar but simplier to most cloth simulations I found. This was coded out fairly quickly, so expect more to come meanwhile feel free to experiment yourself and share Cheers, Graphics Noob (aka @Blurspline, zz85) Suggested Readings: Advanced Character Physics by Thomas Jakobsen Character: http://web.archive.org/web/20070610223835/http:/www.teknikus.dk/tj/gdc2001.htm http://web.archive.org/web/20070610223835/http:/www.teknikus... http://freespace.virgin.net/hugo.elias/models/m_cloth.htm http://freespace.virgin.net/hugo.elias/models/m_cloth.htm http://en.wikipedia.org/wiki/Cloth_modeling http://en.wikipedia.org/wiki/Cloth_modeling http://cg.alexandra.dk/tag/spring-mass-system/ http://cg.alexandra.dk/tag/spring-mass-system/ Real-time Cloth Animation: http://www.darwin3d.com/gamedev/articles/col0599.pdf http://www.darwin3d.com/gamedev/articles/col0599.pdf

98 points by billpg 9y ago

I use this to test flags. A flag may look fine when flat and still, but it has to work and be recognizable under windy conditions too.

rrauenza 9y ago
Nice! And timely for this xkcd -- I tried to use this as the image, but hit cross site limitations: https://xkcd.com/1969/ https://xkcd.com/1969/
- nighthawk454 9y ago
  Good idea. It works if you upload the image to Imgur first: https://i.imgur.com/ASPoRFI.png https://i.imgur.com/ASPoRFI.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi.imgur.com%2FASPoRFI.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi...
Etheryte 9y ago
Just out of curiosity — what is it that you do that requires creating (I assume) a large set of new flags?
- cmg 9y ago
  In my case, I work for a design studio that often creates branded flags (along with awnings, signage, stickers, etc) for restaurants and other storefronts. This is going to be great for our designers to test out what their flags will look like under semi-realistic wind conditions!
  - harrisjt 9y ago
    What types of patterns don't work on realistic flags?
    - cmg 9y ago
      Stuff that's heavily reliant on text, mostly. So we'll try to use logo marks that are identifiable as the brand instead of using the full place's name.
      - zeveb 9y ago
        Sounds like adapting rules for mediæval heraldry might be useful for y'all. Shields & livery, after all, were meant to be clearly visible from a distance, in poor conditions, while the viewers were in psychological distress. Likewise, flags which use bold swathes of colour & logos are more likely to be recognisable than wordy texts.
      - ggg9990 9y ago
        Also some words are confusing when flapping around and some are not, depending on how many other words can be formed with the letters that are not visible. Perhaps some algorithm could be made to ascertain the flagworthiness of a string.
  - DonHopkins 9y ago
    Cool! Do you also design wacky waving inflatable arm flailing tube men? I'd love to see what kind of a virtual wind tunnel stress testing tool somebody could come up with for those! https://www.youtube.com/watch?v=a3-JNf-5Yqw https://www.youtube.com/watch?v=a3-JNf-5Yqw

verelo 9y ago

Sharing these is very hard as the URL takes the b64 content and most places i've tried to send this don't take URL's this long (i cannot even shorten it with bitly or our internal url shortener). It'd be nice if it took the URL to make this happen!

blattimwind 9y ago
If you hand it an URL, the URL remains an URL. E.g. https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ffb%2FFlag_of_Germany_%2528state%2529.svg%2F1000px-Flag_of_Germany_%2528state%2529.svg.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fu...
- verelo 9y ago
  Thanks and interesting, i passed it a URL but it gave me a b64 version. I am wondering if something changed. I certainly didn't provide it b64 previously.

screaminghawk 9y ago

This would have been a great reference during New Zealand's failed flag referendum. Long live laser kiwi!

spectre 9y ago
https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi.imgur.com%2FBB25stO.jpg https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fi...

helb 9y ago

If you don't see the flagpole, your WebGL implementation might be broken. I had to launch Chrome on a dedicated GPU (using optirun/bumblebee), it didn't work on the Intel one. A lot of stuff is logged into console, the relevant part is probably "extension `GL_ARB_gpu_shader5' unsupported in fragment shader". I guess my laptop is just too old. Thinkpad T420, i5-2540M (didn't work) & Quadro NVS 4200M (works), Linux.

examancer 9y ago
Newer Intel chips seem to render it fine in Chrome on Linux. i7-8550U laptop here running Ubuntu 16.04.
mattcoles 9y ago
Anyone had any luck with Firefox on any system?
- helb 9y ago
  Not with the stable version, but Firefox nightly (61.0a1) seems to work very well (with optirun to run it with NVidia card, see parent comment). Better than Chrome actually.
- Karunamon 9y ago
  Works fine on 59.0 here. Modern-ish integrated Intel GFX.
- emidln 9y ago
  It seems to work fine with my Fedora 27 system (Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0) using a GeForce GTX 1080 Ti/PCIe/SSE2 running proprietary linux drivers (v390.25).
- rudedogg 9y ago
  Good on Firefox 59.0.1, macOS 10.13.3
- tazard 9y ago
  Firefox Focus on Android works fine

slimshady94 9y ago

The title immediately made me think that this would be a competitive multi-player webgame that invoked the patriotism of users to keep their country's flag flying.

Terr_ 9y ago
I thought it would be about social media patriotic astroturfing.
DonHopkins 9y ago
Every tweet with a country's hashtag provides a tiny little gust of wind to their flag.

TomMckenny 9y ago

nope, still no improvement for: http://www.idahostatesman.com/news/state/idaho/article72030522.html http://www.idahostatesman.com/news/state/idaho/article720305...

kolpa 9y ago
You have to share the attempt: https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fwww.idahostatesman.com%2Fnews%2Fstate%2Fidaho%2F1qvgjx%2Fpicture72030512%2Falternates%2FLANDSCAPE_1140%2Fpocatello%2520flag https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fww...
protopete 9y ago
The new one is better: https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fbloximages.chicago2.vip.townnews.com%2Fidahostatejournal.com%2Fcontent%2Ftncms%2Fassets%2Fv3%2Feditorial%2F4%2F82%2F482cb704-a0ea-5103-a808-32ec21868911%2F59b04edcaa10f.image.jpg https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fb...

tabs_masterrace 9y ago

Only getting a white flag using this: https://thepiratebay.org/static/img/tpb.jpg https://thepiratebay.org/static/img/tpb.jpg

askvictor 9y ago
perhaps their hosting service (or your ISP, depending on where the image gets pulled to) blocks connections or DNS lookups to TBP? Update: looking at the JS console, it looks like CORS policy is preventing this: Access to Image at 'https://thepiratebay.org/static/img/tpb.jpg' https://thepiratebay.org/static/img/tpb.jpg' from origin 'https://krikienoid.github.io' https://krikienoid.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://krikienoid.github.io' https://krikienoid.github.io' is therefore not allowed access.

jeggerly 9y ago

They need to add a giphy option

progval 9y ago

It even works perfectly with transparent PNGs!

berbec 9y ago

Very nice. Is there an option to remove the text and forms once you load a file/url? My test: https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fimages.fanpop.com%2Fimages%2Fimage_uploads%2FRepublicans-For-Voldemort-debate-678442_504_157.jpg https://krikienoid.github.io/flagwaver/#?src=http%3A%2F%2Fim...

mcknz 9y ago
https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fother98-agitpopcommunica.netdna-ssl.com%2Fwp-content%2Fuploads%2Fsites%2F3%2F2017%2F09%2Fb7a563b59a00d847f8025209cba0721d.png https://krikienoid.github.io/flagwaver/#?src=https%3A%2F%2Fo...

DonHopkins 9y ago

From the code: https://krikienoid.github.io/flagwaver/js/flagwaver.js https://krikienoid.github.io/flagwaver/js/flagwaver.js Aug 3 2012 Since I started working for a new startup not too long ago, I commute between home and work for over 2 hours a day. Although this means less time on three.js, I try getting a little coding on the train. This set of experiments started from a simple hook's law doodle, to spring simulation, string simulation, and I realized I once again stepped onto physics and particle simulation, this time, more specifically soft body physics. Based on the "Advanced Character Physics" article, this experiment attempts to use a "massless" cloth simulation model. It's somewhat similiar but simplier to most cloth simulations I found. This was coded out fairly quickly, so expect more to come meanwhile feel free to experiment yourself and share Cheers, Graphics Noob (aka @Blurspline, zz85) Suggested Readings: Advanced Character Physics by Thomas Jakobsen Character: http://web.archive.org/web/20070610223835/http:/www.teknikus.dk/tj/gdc2001.htm http://web.archive.org/web/20070610223835/http:/www.teknikus... http://freespace.virgin.net/hugo.elias/models/m_cloth.htm http://freespace.virgin.net/hugo.elias/models/m_cloth.htm http://en.wikipedia.org/wiki/Cloth_modeling http://en.wikipedia.org/wiki/Cloth_modeling http://cg.alexandra.dk/tag/spring-mass-system/ http://cg.alexandra.dk/tag/spring-mass-system/ Real-time Cloth Animation: http://www.darwin3d.com/gamedev/articles/col0599.pdf http://www.darwin3d.com/gamedev/articles/col0599.pdf