Flash 8: Webcam Snowstorm

I’ve been playing a lot with Flash 8’s bitmap features in conjunction with webcams, and will be releasing a few of the resultant experiments over the next week or so. The first of them is pretty simple, though it took some tweaking to get right.

This experiment simulates a snowfall with 400 snowflakes on screen, each with random size, rotation, speed and blur (using BlurFilter). Each of them is independently affected by wind (as partially controlled by your cursor’s x position). That Flash can run it all fluidly is impressive in itself, but of course there’s more. It’s also monitoring the webcam input, detecting edges, and making the snowflakes settle gently on any horizontal surface they encounter – pretty cool.


I’m achieving this with a combination of convolution, horizontal blurring, color adjustments, thresholding and pixel sampling. It’s relatively processor intensive with 400 flakes, but it runs at the full 30 fps on my G5.

You can see the experiment below. If you don’t have a webcam, you can still see the snowfall, and I’ve appended a picture of it in action below. If you do, try playing around with it – one of the neatest things I think is to let some snow pile up on your head or shoulders and then brush it off with your hand… virtual dandruff! Note that it obviously works best with adequate lighting, and good contrast (ie. your white shirt against a white wall won’t gather any snow).

Requires Flash Player 8. If the snow isn’t sticking to edges, you probably have an older player.

Also check out Gallery Incomplet (incomplet.org) for other Flash experiments. [Note: moved to incomplet.gskinner.com]

Here’s a sample image for those of you without webcams:

Another image, I just liked the way the snow piled up on the graphics on this shirt:

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

84 Comments

  1. Wow, that is very, very cool. I’ve just had a load of people grow snow eyebrows and ‘taches!

  2. It’s not fair – I want to play with the new flash too 🙁

    I wnow I probably could with mtasc and stuff but it’s not the same.

    Anyway, some really good work here, just the sort of stuff I was planning to do with processing but I might hold on now.

  3. HI. are you using using cache bitmap to achieve the speed with bitmaps? Most of the docs talk about vector and cache bitmap but the speed increase also works with png’s..etc is that true?

  4. ghopper – while it’s visually similar, it’s totally different functionally, though I’ve been working on some similar concepts… I’ll have to take a closer look at what he’s been doing to see if it gives me any inspiration.

    ian – the snowflakes are radial gradients, which are cached as bitmaps because of the blur filter that is applied to them. I’m not sure if caching a PNG in an MC would increase performance, I would guess not, but it’s possible that it would increase it very slightly due more to scoping than anything else.

  5. That’s awesome grant. I like how when I move the CAM the snow flakes “fall off”. I got snowed on finally, too bad it doesn’t snow in LA… 🙂

  6. Flash 8: Webcam Snowstorm

    Flash 8: Webcam Snowstorm: “I’ve been playing a lot with Flash 8’s bitmap features in conjunction with webcams. This experiment simulates a snowfall with 400 snowflakes on screen, each with random size, rotation, speed and blur. That Flash can run it all

  7. That rocks! Nice work!

  8. It’s Great!!!

    Awesome!

  9. Got webcam?

    Got webcam? If you do, and have the beta Maelstrom Player, then Grant Skinner has something which would blow the minds of anyone slaving in other web technologies… yeah, it’s all a bit of a snow job, but still…. ;-)…

  10. man that’s really cool

    Cheers

  11. Hi

    Yeaaah that is really innovative… Is the source public available ?

    Best

  12. its amzing+irrestible.its an unimaginable stuff by sumone who is really vry vry gr88888888888888888 CREATOR in my eyes!

    hope i get to sit besides one of thm-ONE DAY!!!

  13. Looks great! I had to put on an extra sweater to stand the imaginary cold!

  14. this is totally cool, is the source available somewhere??

  15. in one word: Wow!

    Very inspiring. Seems you have already a lot of experience with all those new flash features.

    Do you think it’s posible to create Eye-Toy games? in other words, do you think the flash actionscript interpreter is quick enough for more complex eye-toy pixel calculation?

    Keep up the good work – Marco

  16. Grant, very good work man.

    Always impressed with the type of stuff you come up with keep it up!

  17. That looks great, cant wait til next week for Spark, the ideas will be flying around my head (just have to find the ways of getting them on screen then!)

  18. hmm i have an isight/mac but can’t get my camera to work in the browser – what’s the trick?

    Looks awesome!

    MacBoy

  19. yep, I also have a mac and have been trying to find out how to make my EyeToy work as a webcam, but I can’t find anything! Can you help me?

    Thanks!

    Bekky

  20. just right-click on the flash, choose settings, then go to the camera tab (bottom) and choose the correct cam.. hope it helps..

    xa4

  21. would this work with any instant messengers ?

  22. This looks awesome, you are realy good! Would love to have that on my site… http://www.onmywebcam.com wow what i nice thing… Love it!!!

  23. I’m a bit confused. I get the concept and I do think it’s great, but all I see is the snow itself and no webcam picture (Yes, I have a webcam!). I have Flash 8 installed and I’ve tried in both Firefox and Internet Explorer (On a sidenote, the snow looks sharper in IE than FF)and my webcam isn’t displaying. I’ve also tried reselecting my webcam from the settings options.

    Any thoughts?

  24. Very nice effect…

  25. doesn’t work with video feed from within max os/x, safari…. seems to work fine on other browsers though.

  26. It was tested fully in Safari. Be sure you have the right video source selected:

    – right click on the Flash movie

    – choose Settings…

    – click the webcam icon

    – choose the appropriate video source (ex. an iSight is IIDC Firewire Video)

  27. Is there any way to blend this with a current flash animation, i would love this to work with my site??

    Like to have the snowflakes fall on the letters in the animation? Has anyone tried it?

  28. oh!!! it’s a REAL FUN 🙂

  29. ike to have the snowflakes fall on the letters in the animation? Has anyone tried it?

  30. is there anyway for interactions with webcam and buttons in flash?

  31. This is just GREAT !

  32. man, just a few months ago i tried flash and my webcam and everything worked fine. then i plugged my webcam in recently and tried to use it with flash but it’s no longer displaying video and the currentFPS reported is 0.

    my webcam works on msn and with a little video capture program i wrote in python, so i don’t understand why flash is not working. anyone have any ideas?

  33. Wow, that is awesome. I am working on a experimental Flash 8+webcam project and was wondering if you have time to check it out (www.alivebroadcast.com). Alive Broadcast is a web based service that allows you to save webcam images directly to the server, and then share them anywhere on the web. Thanks

  34. Hi

    thank you its very useful for me 🙂

  35. Nice… Very nice effect…

  36. Saw the fire one, and I think the fire one look better! The snow effect is cool too but personal preferences!

  37. There goes my productivity for the next hour… this is just too fun 🙂

    (worked flawlessly with my Macbook pro)

  38. can this be used on msn when my grad kids are looking at me would be cool they will think its snowing here on me

  39. It’s realy COOL!!!!!

  40. djdjjjdpdsd comme sa

  41. I am working on a project that will be going over to prague this summer (http://www.pq.cz/07/stred_basicinfo2.html) and your winter snow example is exactly the type of effect that we would like to create. Currently we are using Flash 8 along with a maxMSP/jitter to produce this real-time performace…would you be able to provide the source code, or file itself?

    Thanks

  42. Awesome !

  43. Hi there I am looking for the actionscript for ghostly mirror see http://www.setpixel.com/content/?ID=ghostlymirror. Can anyone help??

    Thanks

  44. Hi there, working on a final year uni project – wonder if you could help us with accessing the code for this type of project/motion tracking?

    Nice work, thanks.

  45. hey i love this its so cool would you be able to email me the scorce code for this it would be much appreceated thx

    sry for my spelling

  46. Cool!!! Ilike FLA file

  47. Hi it’s really cool! Damn good try!

  48. Micael Svensson September 3, 2007 at 4:12pm

    Hi… i need help.. how can i do a flash project that take streaming from mine cam and shows it for others?

    comtakt me by my mail if you know any answer or have links who can help……

    my email:

    Apolio_Diablo@hotmail.com

  49. was wondering if you are able to provide the source code? =) well, is amazing. =)

  50. c’est de top se jeux

  51. ya pas mieus lui qui di que sait nule il se tronpe

  52. I am gobsmacked! THIS is really impressive. Snow all over me, and I’m in front of a blazing fire!

  53. Great work, very nice effect.

    Very impressive.

    – Cheers for sharing it with us.

  54. GREAT !!!!!!! I felt from my chiar !!! 😉 VERY VERY Impressive !!!!!!!!!!!!!

  55. is the source or the fla available??

  56. I WOULD LIKE A COPY OF THIS FOR A BACK DROP IN A WEDDING?? ANYWAY I CAN GET OE IN DVD FORM?

  57. I WOULD LIKE A COPY OF THIS FOR A BACK DROP IN A WEDDING?? ANYWAY I CAN GET OE IN DVD FORM?

  58. c’est nul je prefair celui avec les flames

  59. Is there a way of setting the camera quality, I’ve tried doing this and although my quickcam sphere/orbit will do a higher resolution, is it correct to say that you can’t see the higher quality locally unless you’re connecting to a bona-fide flash communication server?

  60. do you have more simulations like that??

  61. Very cool, I have a question? do you know how to set the camera feed higher

  62. Can you show me the source code?

  63. Hi, this is cool

    Can you by any chance help me?

    All I want is to make my cam detect motion.

    and if it does make it play a movie clip

    I got the source of motion detection but don’t know how to program it to play a movie clip and pause when motion isn’t detected.

  64. it’s very nice concept, once you control the detection of the camera you can do too many things with it…

    for whom it didnt work with them, check your camera settings with the flash 8, it didnt work on my Mac laptop but it works on my HP laptop

    regards,

    Moustafa

  65. So cool,could you give me the source code, I want to learn it how to build up.

  66. trop mdr

  67. can you please let me know its source code?

  68. c’est malades on peux tout faire dans la maison avec de la neige !!!!!!!!!!!!!! LOL

  69. waw like magic

Leave a Reply

Your email address will not be published. Required fields are marked *