10 ms·

My winter break project — Silk

687 points by yurivish 16y ago

It's a little generative art trinket. Just draw and watch. Hold shift while moving your mouse to control the wind. :-) Let me know what you think!

sunbash 16y ago
Amazing. Are you going to blog about your experience building it? It'd be great to here some details. Plus it gives it a human story thats just might get some great press.
erreon 16y ago
Absolutely beautiful. I am not very "artistic" but it sure gave me the feeling like I was. Can't wait to see how the experience turns out on the mobile devices. I hope you decide to give it a go on Android devices as well.
mdolon 16y ago
Great work, it's simply stunningly beautiful. I think (and hope) your iPhone/iPad apps will do well, best of luck!
DamonOehlman 16y ago
Absolutely gorgeous. Will be interested to see how our iOS version goes. I'm not sure if it will be of any help, but I have written an interaction "helper" library that is designed to make handling mouse and touch events consistent. If it is something that is useful, then let me know if you have any questions or suggestions. http://sidelab.github.com/interact/ http://sidelab.github.com/interact/
- yurivish 16y ago
  Damon, the iOS version is being written natively for that platform in Objective-C. I've got many ideas to explore on the iPad and iPhone/iPod -- what's on the web is just a taste. But thanks for the link! I'll keep it in mind if a use for it crops up.
jcr 16y ago
I'm probably the wrong person to reply here... As someone who never uses "desktop" or "background" images, I actually do think the example images are beautiful and enjoyable. I'll admit there are probably very few idiots like me who refuse to use background image decorations, but let me explain why as well as what. The background image I use on X is called the "root weave" and although it is horribly ugly, it is exceedingly useful. The "root weave" image is designed to help you detect errors in display rendering. If there's something wrong in your display drivers, display settings, or even cable connections, the refresh makes the root weave look like it's moving and can show other very obvious signs of corruption. I got into this function-over-fashion mindset many decades ago when it was very easy to destroy a very expensive display by configuring or driving it the wrong way. Modern displays typically have safe-guards to prevent destroying equipment, but my ancient habit is still very useful for debugging. The X.org and XFree code base includes the rootweave and a few other similar images designed to help identify display problems. You might have fun incorporating the ideas behind these test images into something more beautiful to look at?
- yurivish 16y ago
  That's a pretty interesting idea; do you have links to the "root weave" image? I googled but the search didn't turn anything up. I'm not sure it's quite the direction I want to take Silk, but thanks for sharing -- I never thought about using desktop images for a pragmatic purpose such as that.
  - bradleyland 16y ago
    Root weave is a rendering definition, rather than a bitmap image, so that's probably why you're having a hard time finding it. Someone could probably grab a screenshot for you though.
  - hyperbovine 16y ago
    This is the only picture I could find: http://farm4.static.flickr.com/3590/3621951455_9632ff862f.jpg http://farm4.static.flickr.com/3590/3621951455_9632ff862f.jp... Apparently root weave was done away with in X11R7.5, who knew? (Can still be enabled with the -retro flag.) Congrats on a very slick web app, btw. Often when I see a project posted here I think to myself, "I could have done that, but am too lazy." :-) However, your idea is highly original and superbly executed. Well beyond my ken, not that that means anything.
adatta02 16y ago
That looks pretty amazing. Check out Fracture - http://www.fractureme.com/ http://www.fractureme.com/ - I bet they would look unreal printed with their tech.
- yurivish 16y ago
  Ooh, thanks for that link. I've been meaning to get one printed for quite some time. I'll definitely check them out!
- hkuo 16y ago
  Thanks for this link! I hadn't heard of them before. I just showed my wife and we're going to test out a few prints.
- malnourish 16y ago
  That's amazing! Fantastic gift idea. It really needs publicity.
- boredguy8 16y ago
  This is the first time I've seen a product where my first thought was, "They need to charge 5-10x more." Looks amazing, thanks for sharing.
  - StavrosK 16y ago
    This is the first time I've seen a product and couldn't find a price anywhere on the site.
    - beilabs 16y ago
      http://www.fractureme.com/about/prices http://www.fractureme.com/about/prices
      - StavrosK 16y ago
        Oh wow, I was wondering why there were no prices in their "prices" page. Talk about situational blindness, I was about to reply that there were no prices there when I saw them. I think they should make them stand out more, it's probably because I was ignoring the dimensions as well (inches mean nothing to me) :/
bgraves 16y ago
Stunning! Can you give us some technical details? How are you producing the images (libraries, custom scripts, etc.)? I've thought about a project like this (your execution is light-years ahead of anything I could accomplish) using Nodebox -perhaps- as an excuse to learn something new about python. Edit: I see it's in JavaScript? Excellent! Any other tools or techniques you found helpful would be interesting to read. Congrats!
- yurivish 16y ago
  I will probably set up a blog and write up some posts on the experience of making it sometime soon. :-)
  - meric 16y ago
    Clicked on the example image but it didn't replay exactly. =[ Nevertheless, the non-exact replay was just as amazing. http://img709.imageshack.us/img709/1645/screenshot20110111at247.png http://img709.imageshack.us/img709/1645/screenshot20110111at...
    - growt 16y ago
      I think it is exact, but just a part of the total image is shown in the frame (the lower left part, look for it).
      - yurivish 16y ago
        Yep. Replays are exact, which was a conscious choice on my part. I plan to explore inexact replays in the future. It's not difficult, just a bit of fooling about with the random number generator. The main issue right now is that you can't tell the difference between two similar Silks unless you have them side-by-side. Solving that problem is something I'm looking into for future versions. :-)
- Joshim5 16y ago
  I second this comment. I'd really be interested in learning how you made something like this.
CountHackulus 16y ago
The democoder in me loves this. Very well done, and an awesome effect.
inovica 16y ago
Wow, that is lovely! Can you do a blog post on what you did and what you used? Well done
vaksel 16y ago
as far as suggestions it really needs the undo button. Also the new button really needs to be more prominent
- yurivish 16y ago
  You can hit "replay" bottom left -- it'll replay your cleared silk. And yes, the UI needs some changes -- I'll be updating stuff and A/B testing it during the course of the next several weeks.
- obeattie 16y ago
  Undo is really the only thing I think it's missing too. Absolutely love the site… beautiful work, guys!
barredo 16y ago
Lovely. Note: I'll gladly pay a few euros for the iPad version
tlack 16y ago
I'd love some control over the coloration and some ideas of how my mouse drags can affect the final result.
aeontech 16y ago
Very impressive... simple-looking but so polished... Amazing job, congratulations!
deleted 16y ago
[deleted]
treeface 16y ago
I couldn't find an uncompressed version of your source on your site. Are you planning on releasing the JS source, or at least telling us a little more about the nitty-gritty of how this is done? I assume it's some sort of well-decorated Perlin noise generator, but I'm not too familiar with how those are made.
Alex3917 16y ago
It's cool to see this sort of technology in a web browser, although for the iPhone/iPad I think some of the pre-existing generative art apps are currently better: Art of Glow, SpawnHD, Little Uzu, etc. I'm sure this is still a work on progress, but just make sure you keep an eye on what's already out there.
jackowayed 16y ago
This is awesome. Making it so users can download the silks they make would be nice. Using your silk as my background is cool, but using my own is even better :)
- alex_c 16y ago
  If I could download the images with a transparent background, I would probably use them as a design element on pages I need to spruce up.
  - yurivish 16y ago
    Alex, try hitting 'e' once you've woven a Silk. The little transparent <img> that pops up to the top right is full-size. Right-click it to save, and double-click it to hide.
    - alex_c 16y ago
      Very impressive :) Thank you!
andresmh 16y ago
I love how this is all JS (no Flash!). Impressive. BTW this reminds me a bit to my friend's project http://glowdoodle.com http://glowdoodle.com
albertsun 16y ago
I love how the instructions are presented one at a time each time you start a new Silk. It's subtle and it's great as I can immediately get started and each time I do it again I have a new feature to play with.
- yurivish 16y ago
  Thanks! That was exactly the idea. It looks like I need to reposition the New link, though -- lots of people are simply refreshing and missing the hints.
- kgosser 16y ago
  Several nice bits of design inspiration on this site.
deleted 16y ago
[deleted]
jessevondoom 16y ago
You just mesmerized my four year old — she sat still longer than I've seen in ages. If beautiful interactive visualization ever gets old I think you have a future in toddler mind control...
- bugmenot 16y ago
  I am scared that your four year old will now compare the visual excitement of virtual worlds to reality.
prawn 16y ago
Reminded me of this: http://www.escapemotions.com/experiments/flame/index.html#top http://www.escapemotions.com/experiments/flame/index.html#to...
mustpax 16y ago
This is beautiful through and through but you are missing a favicon. You might already be aware of this, just thought I'd let you know.
TeMPOraL 16y ago
The replay button reminds me of the Achron game (an up-coming Meta-Time RTS). Basically, you can start drawing, then press Replay and draw some more on the replay, and then press Replay again... looks amazing :D. Nice work :).
Encosia 16y ago
$(function() { if ($.browser.msie) // Sorry, I tried. && $.browser.version < 9) $('body').addClass('ie') }) What was the deal breaker in IE9, out of curiosity?
- paulirish 16y ago
  I would imagine excanvas would struggle with this... however.. If Yury hasn't already, definitely give it a shot with FlashCanvas: http://flashcanvas.net/ http://flashcanvas.net/ Its performance is somewhere around 33x faster than the vml-based excanvas. (Yes, 3300% better.)
  - Encosia 16y ago
    I get why that would be the issue for IE <9, but the latest preview version of 9 has canvas support. Hardware accelerated, even.
    - grantj 16y ago
      My guess is IE 9 doesn't supports the 'lighter' globalCompositeOperation on the canvas which is key to making the effect work. Without it I bet the lines look pretty dull.
      - Encosia 16y ago
        As it turns out, it works pretty well with the latest IE9 Platform Preview, long as you switch IE's user-agent to one of the supported browsers. I think you're onto something though, because it does look less shiny in IE than in Chrome.
muloka 16y ago
I like the simplicity of this, this would be really fun as a Quartz Composer patch.
getsat 16y ago
Wow. Take note, people. This is how you present your product. Not with pages of lame marketing copy, show it in action! Great site! I'm using the "rainbow on black" on my secondary cinema display now. Correct resolution and everything. Thanks! :)
niico 16y ago
Me gusta!
mcgraw 16y ago
It's been said, but I can't help but write my own comment. Excellent execution on this project.
grncdr 16y ago
I'm finding the shift+mouse isn't working (using Firefox 4 beta 7 on Linux)
- astrofinch 16y ago
  I'm not seeing anything interesting from shift+mouse either. Google Chrome 8.0.552.224, Ubuntu 10.04. Edit: As mdda points out, it works if I hold shift and control simultaneously, pushing shift first.
- vault_ 16y ago
  I'm using Chrome on Linux and I have to hold both of the shift buttons for it to work. It would be utterly impossible if I wasn't using a trackpad.
- yurivish 16y ago
  I'll definitely look into this. Sorry for making you you guys press hilarious keyboard combinations! I'm astonished you even figured out double-shift. =p
code_duck 16y ago
Great work! I was just inspired to start learning to work with canvas myself today, which will be my first graphics programming since the C64. It's pretty exciting once you start thinking about the possibilities of math applied to colors.
whackedspinach 16y ago
I can't seem to get the shift+mouse to control the wind to work using Chromium on Linux.
- bkudria 16y ago
  Same here.
  - ZeroMinx 16y ago
    It sometimes work for me when hitting ctrl-shift rather than just shift
    - mdda 16y ago
      Ctrl-Shift consistently works for me iff I press and hold Shift before Ctrl. (Fedora 14, FF 3.6.13)
RyanMcGreal 16y ago
I particularly like the additive mixing. Fantastic implementation.
chubs 16y ago
Please make a screensaver out of this!
d0mine 16y ago
Silk + electricsheep-like selection = screensaver http://electricsheep.org/ http://electricsheep.org/
istvanp 16y ago
Perhaps I missed it but is there a way to export the result into an image? I've seen it done in a similar canvas project called Harmony (http://mrdoob.com/projects/harmony/ http://mrdoob.com/projects/harmony/) It would be nice to have an infinite amount of Silk wallpapers that you created yourself or by others :)
- mceachen 16y ago
  The developer mentioned that hitting "e" will render a PNG in the upper-right corner. Right-click > Save image as...
jarin 16y ago
That is beautiful! I made a piece that I call "God's Commode" http://cl.ly/022x3k2M1G3Y0G233e0Y http://cl.ly/022x3k2M1G3Y0G233e0Y
javadi82 16y ago
Is there a way I could save the "silks" that I create? If not, would you please consider implementing it?
- mnutt 16y ago
  Try opening up Webkit Inspector console and type: $("<img/>").attr('src', $("#render").get(0).toDataURL()).prependTo("body"); Or here's a bookmarklet: http://bookmarklets.heroku.com/bookmarklets/1799 http://bookmarklets.heroku.com/bookmarklets/1799
spektom 16y ago
This is so amazing! Now I realize the power of html5!
sidwyn 16y ago
All I can say is wow.
bystac 16y ago
this will be great for generating website background, can be saved to image? can final images be used in commercial products?
dfhrhfergjy 16y ago
Click on our website: === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== Gold autumn, personality Mes clothing + Shoes, Travel bag that grabs an eye coat + Chao packet Free transport === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ====
shooll 16y ago
Dear friends, do you want to have some different things? Whether you want to give your relatives and friends, take a few different exotic gifts? Whether you want to buy some cheap benefits of thing? So please, let us begin now! Click on our website (=== http://www.findsoso.com http://www.findsoso.com =====) Will bring you different surprise === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ======
muxxa 16y ago
Small bug report: releasing the mouse button outside of the viewport doesn't get recorded (mac and windows). if the mouseup event isn't being signalled, maybe an onclick event would be?
robjama 16y ago
Beautiful work! This project definitely needs some publicity...did you think about putting it up on Kickstarter (http://www.kickstarter.com/ http://www.kickstarter.com/)?
- yurivish 16y ago
  I applied to Kickstarter last night after it began getting all this publicity. Unfortunately, their FAQ states that they need 1-2 days to get back to me after the initial application. Stay tuned, though. It will be on Kickstarter soon.
efsavage 16y ago
Kudos to you not only for a great piece of work, but for calling it a "project" and not a "startup".
pizzaburger 16y ago
Wow, I've never seen anyone do this before: <script src="//usecharm.com/silk.js">
mceachen 16y ago
Sweet! You can make the canvas arbitrarily large -- on Chrome, right-click > inspect element, and change <div id="silk" style="..." to whatever dimension you want. Wonderfully done!
yellowSchoolBus 16y ago
Looks terrific!
marceldegraaf 16y ago
It would be very cool if it would be possible to export a hi-res PNG of a Silk render to be able to print it or use it on MyKEA. I would even pay for it.
yurivish 16y ago
I just posted a blog about the experience: http://news.ycombinator.com/item?id=2101422 http://news.ycombinator.com/item?id=2101422

687 points by yurivish 16y ago

It's a little generative art trinket. Just draw and watch. Hold shift while moving your mouse to control the wind. :-) Let me know what you think!

sunbash 16y ago

Amazing. Are you going to blog about your experience building it? It'd be great to here some details. Plus it gives it a human story thats just might get some great press.

erreon 16y ago

Absolutely beautiful. I am not very "artistic" but it sure gave me the feeling like I was. Can't wait to see how the experience turns out on the mobile devices. I hope you decide to give it a go on Android devices as well.

mdolon 16y ago

Great work, it's simply stunningly beautiful. I think (and hope) your iPhone/iPad apps will do well, best of luck!

DamonOehlman 16y ago

Absolutely gorgeous. Will be interested to see how our iOS version goes. I'm not sure if it will be of any help, but I have written an interaction "helper" library that is designed to make handling mouse and touch events consistent. If it is something that is useful, then let me know if you have any questions or suggestions. http://sidelab.github.com/interact/ http://sidelab.github.com/interact/

yurivish 16y ago
Damon, the iOS version is being written natively for that platform in Objective-C. I've got many ideas to explore on the iPad and iPhone/iPod -- what's on the web is just a taste. But thanks for the link! I'll keep it in mind if a use for it crops up.

jcr 16y ago

I'm probably the wrong person to reply here... As someone who never uses "desktop" or "background" images, I actually do think the example images are beautiful and enjoyable. I'll admit there are probably very few idiots like me who refuse to use background image decorations, but let me explain why as well as what. The background image I use on X is called the "root weave" and although it is horribly ugly, it is exceedingly useful. The "root weave" image is designed to help you detect errors in display rendering. If there's something wrong in your display drivers, display settings, or even cable connections, the refresh makes the root weave look like it's moving and can show other very obvious signs of corruption. I got into this function-over-fashion mindset many decades ago when it was very easy to destroy a very expensive display by configuring or driving it the wrong way. Modern displays typically have safe-guards to prevent destroying equipment, but my ancient habit is still very useful for debugging. The X.org and XFree code base includes the rootweave and a few other similar images designed to help identify display problems. You might have fun incorporating the ideas behind these test images into something more beautiful to look at?

yurivish 16y ago
That's a pretty interesting idea; do you have links to the "root weave" image? I googled but the search didn't turn anything up. I'm not sure it's quite the direction I want to take Silk, but thanks for sharing -- I never thought about using desktop images for a pragmatic purpose such as that.
- bradleyland 16y ago
  Root weave is a rendering definition, rather than a bitmap image, so that's probably why you're having a hard time finding it. Someone could probably grab a screenshot for you though.
- hyperbovine 16y ago
  This is the only picture I could find: http://farm4.static.flickr.com/3590/3621951455_9632ff862f.jpg http://farm4.static.flickr.com/3590/3621951455_9632ff862f.jp... Apparently root weave was done away with in X11R7.5, who knew? (Can still be enabled with the -retro flag.) Congrats on a very slick web app, btw. Often when I see a project posted here I think to myself, "I could have done that, but am too lazy." :-) However, your idea is highly original and superbly executed. Well beyond my ken, not that that means anything.

adatta02 16y ago

That looks pretty amazing. Check out Fracture - http://www.fractureme.com/ http://www.fractureme.com/ - I bet they would look unreal printed with their tech.

yurivish 16y ago
Ooh, thanks for that link. I've been meaning to get one printed for quite some time. I'll definitely check them out!
hkuo 16y ago
Thanks for this link! I hadn't heard of them before. I just showed my wife and we're going to test out a few prints.
malnourish 16y ago
That's amazing! Fantastic gift idea. It really needs publicity.
boredguy8 16y ago
This is the first time I've seen a product where my first thought was, "They need to charge 5-10x more." Looks amazing, thanks for sharing.
- StavrosK 16y ago
  This is the first time I've seen a product and couldn't find a price anywhere on the site.
  - beilabs 16y ago
    http://www.fractureme.com/about/prices http://www.fractureme.com/about/prices
    - StavrosK 16y ago
      Oh wow, I was wondering why there were no prices in their "prices" page. Talk about situational blindness, I was about to reply that there were no prices there when I saw them. I think they should make them stand out more, it's probably because I was ignoring the dimensions as well (inches mean nothing to me) :/

bgraves 16y ago

Stunning! Can you give us some technical details? How are you producing the images (libraries, custom scripts, etc.)? I've thought about a project like this (your execution is light-years ahead of anything I could accomplish) using Nodebox -perhaps- as an excuse to learn something new about python. Edit: I see it's in JavaScript? Excellent! Any other tools or techniques you found helpful would be interesting to read. Congrats!

yurivish 16y ago
I will probably set up a blog and write up some posts on the experience of making it sometime soon. :-)
- meric 16y ago
  Clicked on the example image but it didn't replay exactly. =[ Nevertheless, the non-exact replay was just as amazing. http://img709.imageshack.us/img709/1645/screenshot20110111at247.png http://img709.imageshack.us/img709/1645/screenshot20110111at...
  - growt 16y ago
    I think it is exact, but just a part of the total image is shown in the frame (the lower left part, look for it).
    - yurivish 16y ago
      Yep. Replays are exact, which was a conscious choice on my part. I plan to explore inexact replays in the future. It's not difficult, just a bit of fooling about with the random number generator. The main issue right now is that you can't tell the difference between two similar Silks unless you have them side-by-side. Solving that problem is something I'm looking into for future versions. :-)
Joshim5 16y ago
I second this comment. I'd really be interested in learning how you made something like this.

CountHackulus 16y ago

The democoder in me loves this. Very well done, and an awesome effect.

inovica 16y ago

Wow, that is lovely! Can you do a blog post on what you did and what you used? Well done

vaksel 16y ago

as far as suggestions it really needs the undo button. Also the new button really needs to be more prominent

yurivish 16y ago
You can hit "replay" bottom left -- it'll replay your cleared silk. And yes, the UI needs some changes -- I'll be updating stuff and A/B testing it during the course of the next several weeks.
obeattie 16y ago
Undo is really the only thing I think it's missing too. Absolutely love the site… beautiful work, guys!

barredo 16y ago

Lovely. Note: I'll gladly pay a few euros for the iPad version

tlack 16y ago

I'd love some control over the coloration and some ideas of how my mouse drags can affect the final result.

aeontech 16y ago

Very impressive... simple-looking but so polished... Amazing job, congratulations!

deleted 16y ago

[deleted]

treeface 16y ago

I couldn't find an uncompressed version of your source on your site. Are you planning on releasing the JS source, or at least telling us a little more about the nitty-gritty of how this is done? I assume it's some sort of well-decorated Perlin noise generator, but I'm not too familiar with how those are made.

Alex3917 16y ago

It's cool to see this sort of technology in a web browser, although for the iPhone/iPad I think some of the pre-existing generative art apps are currently better: Art of Glow, SpawnHD, Little Uzu, etc. I'm sure this is still a work on progress, but just make sure you keep an eye on what's already out there.

jackowayed 16y ago

This is awesome. Making it so users can download the silks they make would be nice. Using your silk as my background is cool, but using my own is even better :)

alex_c 16y ago
If I could download the images with a transparent background, I would probably use them as a design element on pages I need to spruce up.
- yurivish 16y ago
  Alex, try hitting 'e' once you've woven a Silk. The little transparent <img> that pops up to the top right is full-size. Right-click it to save, and double-click it to hide.
  - alex_c 16y ago
    Very impressive :) Thank you!

andresmh 16y ago

I love how this is all JS (no Flash!). Impressive. BTW this reminds me a bit to my friend's project http://glowdoodle.com http://glowdoodle.com

albertsun 16y ago

I love how the instructions are presented one at a time each time you start a new Silk. It's subtle and it's great as I can immediately get started and each time I do it again I have a new feature to play with.

yurivish 16y ago
Thanks! That was exactly the idea. It looks like I need to reposition the New link, though -- lots of people are simply refreshing and missing the hints.
kgosser 16y ago
Several nice bits of design inspiration on this site.

deleted 16y ago

[deleted]

jessevondoom 16y ago

You just mesmerized my four year old — she sat still longer than I've seen in ages. If beautiful interactive visualization ever gets old I think you have a future in toddler mind control...

bugmenot 16y ago
I am scared that your four year old will now compare the visual excitement of virtual worlds to reality.

prawn 16y ago

Reminded me of this: http://www.escapemotions.com/experiments/flame/index.html#top http://www.escapemotions.com/experiments/flame/index.html#to...

mustpax 16y ago

This is beautiful through and through but you are missing a favicon. You might already be aware of this, just thought I'd let you know.

TeMPOraL 16y ago

The replay button reminds me of the Achron game (an up-coming Meta-Time RTS). Basically, you can start drawing, then press Replay and draw some more on the replay, and then press Replay again... looks amazing :D. Nice work :).

Encosia 16y ago

$(function() { if ($.browser.msie) // Sorry, I tried. && $.browser.version < 9) $('body').addClass('ie') }) What was the deal breaker in IE9, out of curiosity?

paulirish 16y ago
I would imagine excanvas would struggle with this... however.. If Yury hasn't already, definitely give it a shot with FlashCanvas: http://flashcanvas.net/ http://flashcanvas.net/ Its performance is somewhere around 33x faster than the vml-based excanvas. (Yes, 3300% better.)
- Encosia 16y ago
  I get why that would be the issue for IE <9, but the latest preview version of 9 has canvas support. Hardware accelerated, even.
  - grantj 16y ago
    My guess is IE 9 doesn't supports the 'lighter' globalCompositeOperation on the canvas which is key to making the effect work. Without it I bet the lines look pretty dull.
    - Encosia 16y ago
      As it turns out, it works pretty well with the latest IE9 Platform Preview, long as you switch IE's user-agent to one of the supported browsers. I think you're onto something though, because it does look less shiny in IE than in Chrome.

muloka 16y ago

I like the simplicity of this, this would be really fun as a Quartz Composer patch.

getsat 16y ago

Wow. Take note, people. This is how you present your product. Not with pages of lame marketing copy, show it in action! Great site! I'm using the "rainbow on black" on my secondary cinema display now. Correct resolution and everything. Thanks! :)

niico 16y ago

Me gusta!

mcgraw 16y ago

It's been said, but I can't help but write my own comment. Excellent execution on this project.

grncdr 16y ago

I'm finding the shift+mouse isn't working (using Firefox 4 beta 7 on Linux)

astrofinch 16y ago
I'm not seeing anything interesting from shift+mouse either. Google Chrome 8.0.552.224, Ubuntu 10.04. Edit: As mdda points out, it works if I hold shift and control simultaneously, pushing shift first.
vault_ 16y ago
I'm using Chrome on Linux and I have to hold both of the shift buttons for it to work. It would be utterly impossible if I wasn't using a trackpad.
yurivish 16y ago
I'll definitely look into this. Sorry for making you you guys press hilarious keyboard combinations! I'm astonished you even figured out double-shift. =p

code_duck 16y ago

Great work! I was just inspired to start learning to work with canvas myself today, which will be my first graphics programming since the C64. It's pretty exciting once you start thinking about the possibilities of math applied to colors.

whackedspinach 16y ago

I can't seem to get the shift+mouse to control the wind to work using Chromium on Linux.

bkudria 16y ago
Same here.
- ZeroMinx 16y ago
  It sometimes work for me when hitting ctrl-shift rather than just shift
  - mdda 16y ago
    Ctrl-Shift consistently works for me iff I press and hold Shift before Ctrl. (Fedora 14, FF 3.6.13)

RyanMcGreal 16y ago

I particularly like the additive mixing. Fantastic implementation.

chubs 16y ago

Please make a screensaver out of this!

d0mine 16y ago

Silk + electricsheep-like selection = screensaver http://electricsheep.org/ http://electricsheep.org/

istvanp 16y ago

Perhaps I missed it but is there a way to export the result into an image? I've seen it done in a similar canvas project called Harmony (http://mrdoob.com/projects/harmony/ http://mrdoob.com/projects/harmony/) It would be nice to have an infinite amount of Silk wallpapers that you created yourself or by others :)

mceachen 16y ago
The developer mentioned that hitting "e" will render a PNG in the upper-right corner. Right-click > Save image as...

jarin 16y ago

That is beautiful! I made a piece that I call "God's Commode" http://cl.ly/022x3k2M1G3Y0G233e0Y http://cl.ly/022x3k2M1G3Y0G233e0Y

javadi82 16y ago

Is there a way I could save the "silks" that I create? If not, would you please consider implementing it?

mnutt 16y ago
Try opening up Webkit Inspector console and type: $("<img/>").attr('src', $("#render").get(0).toDataURL()).prependTo("body"); Or here's a bookmarklet: http://bookmarklets.heroku.com/bookmarklets/1799 http://bookmarklets.heroku.com/bookmarklets/1799

spektom 16y ago

This is so amazing! Now I realize the power of html5!

sidwyn 16y ago

All I can say is wow.

bystac 16y ago

this will be great for generating website background, can be saved to image? can final images be used in commercial products?

dfhrhfergjy 16y ago

Click on our website: === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== Gold autumn, personality Mes clothing + Shoes, Travel bag that grabs an eye coat + Chao packet Free transport === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ==== === http://goo.gl/l5v0b http://goo.gl/l5v0b ====

shooll 16y ago

Dear friends, do you want to have some different things? Whether you want to give your relatives and friends, take a few different exotic gifts? Whether you want to buy some cheap benefits of thing? So please, let us begin now! Click on our website (=== http://www.findsoso.com http://www.findsoso.com =====) Will bring you different surprise === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ===== === http://www.findsoso.com http://www.findsoso.com ======

muxxa 16y ago

Small bug report: releasing the mouse button outside of the viewport doesn't get recorded (mac and windows). if the mouseup event isn't being signalled, maybe an onclick event would be?

robjama 16y ago

Beautiful work! This project definitely needs some publicity...did you think about putting it up on Kickstarter (http://www.kickstarter.com/ http://www.kickstarter.com/)?

yurivish 16y ago
I applied to Kickstarter last night after it began getting all this publicity. Unfortunately, their FAQ states that they need 1-2 days to get back to me after the initial application. Stay tuned, though. It will be on Kickstarter soon.

efsavage 16y ago

Kudos to you not only for a great piece of work, but for calling it a "project" and not a "startup".

pizzaburger 16y ago

Wow, I've never seen anyone do this before: <script src="//usecharm.com/silk.js">

mceachen 16y ago

Sweet! You can make the canvas arbitrarily large -- on Chrome, right-click > inspect element, and change <div id="silk" style="..." to whatever dimension you want. Wonderfully done!

yellowSchoolBus 16y ago

Looks terrific!

marceldegraaf 16y ago

It would be very cool if it would be possible to export a hi-res PNG of a Silk render to be able to print it or use it on MyKEA. I would even pay for it.

yurivish 16y ago

I just posted a blog about the experience: http://news.ycombinator.com/item?id=2101422 http://news.ycombinator.com/item?id=2101422