top | item 16630748

Online flag waver

98 points| billpg | 8 years ago |krikienoid.github.io | reply

38 comments

order
[+] billpg|8 years ago|reply
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.
[+] Etheryte|8 years ago|reply
Just out of curiosity — what is it that you do that requires creating (I assume) a large set of new flags?
[+] rrauenza|8 years ago|reply
Nice! And timely for this xkcd -- I tried to use this as the image, but hit cross site limitations:

https://xkcd.com/1969/

[+] helb|8 years ago|reply
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|8 years ago|reply
Newer Intel chips seem to render it fine in Chrome on Linux. i7-8550U laptop here running Ubuntu 16.04.
[+] mattcoles|8 years ago|reply
Anyone had any luck with Firefox on any system?
[+] slimshady94|8 years ago|reply
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.
[+] DonHopkins|8 years ago|reply
Every tweet with a country's hashtag provides a tiny little gust of wind to their flag.
[+] Terr_|8 years ago|reply
I thought it would be about social media patriotic astroturfing.
[+] verelo|8 years ago|reply
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!
[+] DonHopkins|8 years ago|reply
From the code:

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...

http://freespace.virgin.net/hugo.elias/models/m_cloth.htm

http://en.wikipedia.org/wiki/Cloth_modeling

http://cg.alexandra.dk/tag/spring-mass-system/

Real-time Cloth Animation:

http://www.darwin3d.com/gamedev/articles/col0599.pdf

[+] tabs_masterrace|8 years ago|reply
Only getting a white flag using this:

https://thepiratebay.org/static/img/tpb.jpg

[+] askvictor|8 years ago|reply
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' from origin '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' is therefore not allowed access.

[+] progval|8 years ago|reply
It even works perfectly with transparent PNGs!
[+] jeggerly|8 years ago|reply
They need to add a giphy option