

My winter break project — Silk - yurivish
http://weavesilk.com
It's a little generative art trinket. Just draw and watch. Hold shift while moving your mouse to control the wind. :-)<p>Let me know what you think!
======
adatta02
That looks pretty amazing.

Check out Fracture - <http://www.fractureme.com/> \- I bet they would look
unreal printed with their tech.

~~~
boredguy8
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
This is the first time I've seen a product and couldn't find a price anywhere
on the site.

~~~
beilabs
<http://www.fractureme.com/about/prices>

~~~
StavrosK
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
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
I will probably set up a blog and write up some posts on the experience of
making it sometime soon. :-)

~~~
meric
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/screenshot20110111at...](http://img709.imageshack.us/img709/1645/screenshot20110111at247.png)

~~~
growt
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
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. :-)

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

~~~
callahad
It's probably this:
[http://upload.wikimedia.org/wikipedia/commons/3/3d/Twm_en.pn...](http://upload.wikimedia.org/wikipedia/commons/3/3d/Twm_en.png)

The "probably" up there makes me sad; I miss my Linux desktops.

~~~
biot
This one makes my display shimmer a little: <http://peach.blender.org/wp-
content/uploads/sun_session.png>

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

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

------
Alex3917
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
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
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
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
Very impressive :) Thank you!

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

~~~
yurivish
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

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

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

------
Encosia

      $(function() {
        if ($.browser.msie) // Sorry, I tried. && $.browser.version < 9)
          $('body').addClass('ie')
      })
    

What was the deal breaker in IE9, out of curiosity?

~~~
paulirish
I would imagine excanvas would struggle with this... however..

If Yury hasn't already, definitely give it a shot with FlashCanvas:
<http://flashcanvas.net/> Its performance is somewhere around 33x faster than
the vml-based excanvas. (Yes, 3300% better.)

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

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

------
prawn
Reminded me of this:

[http://www.escapemotions.com/experiments/flame/index.html#to...](http://www.escapemotions.com/experiments/flame/index.html#top)

------
DamonOehlman
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/>

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

------
jarin
That is beautiful! I made a piece that I call "God's Commode"

<http://cl.ly/022x3k2M1G3Y0G233e0Y>

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

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

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

------
getsat
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! :)

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

------
istvanp
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/>)

It would be nice to have an infinite amount of Silk wallpapers that you
created yourself or by others :)

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

------
chubs
Please make a screensaver out of this!

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

------
code_duck
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
I can't seem to get the shift+mouse to control the wind to work using Chromium
on Linux.

~~~
bkudria
Same here.

~~~
ZeroMinx
It _sometimes_ work for me when hitting ctrl-shift rather than just shift

~~~
mdda
Ctrl-Shift consistently works for me iff I press and hold Shift before Ctrl.

(Fedora 14, FF 3.6.13)

------
TeMPOraL
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 :).

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

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

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

------
muxxa
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?

------
mceachen
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!

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

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

------
barredo
Lovely.

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

------
d0mine
Silk + electricsheep-like selection = screensaver

<http://electricsheep.org/>

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

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

------
javadi82
Is there a way I could save the "silks" that I create?

If not, would you please consider implementing it?

~~~
mnutt
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>

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

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

------
RyanMcGreal
I particularly like the additive mixing. Fantastic implementation.

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

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

------
vaksel
as far as suggestions it really needs the undo button.

Also the new button really needs to be more prominent

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

------
sidwyn
All I can say is wow.

------
yellowSchoolBus
Looks terrific!

------
niico
Me gusta!

