My winter break project — Silk

http://weavesilk.com

by yurivish • 16 years ago

687 88 16 years ago

weavesilk.com

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!

jcr2• 16 years 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?

yurivish11• 16 years 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• 16 years 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• 16 years ago

This is the only picture I could find:

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.

jcr2• 16 years ago

The various test images, including the rootweave, can be found in Xorg/XFree CVS:

http://webcvs.freedesktop.org/xorg/data/bitmaps/

In the past I've read analysis/explanation regarding the various test images, why they were created and how they should be used, but that was a very long time ago. You'll probably need to do a bit of digging to find such information.

Pure beauty is commendable as well as commonly desirable. Pure function is also commendable but far less commonly desirable. A blend of both is often superior to either.

I think would be unwise to cater function solely towards people doing debugging since it would severely limit the market, but making something both gorgeous and useful will have a stronger appeal than just gorgeous.

callahad• 16 years ago

It's probably this: http://upload.wikimedia.org/wikipedia/commons/3/3d/Twm_en.pn...

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

adatta02• 16 years ago

That looks pretty amazing.

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

yurivish11• 16 years 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• 16 years 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• 16 years ago

That's amazing! Fantastic gift idea. It really needs publicity.

boredguy8• 16 years 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.

StavrosK2• 16 years ago

This is the first time I've seen a product and couldn't find a price anywhere on the site.

kaiwetzel• 16 years ago

Could work well printed by mykea - http://www.thisismykea.com/ too. Is it easy to generate a larger resolution from a recording for printing?

I love generative art and this looks very polished - the sparkles are a nice touch!

As someone else mentioned, the flags are easy to miss on a wide screen, maybe vertically align them with the content column?

erreon• 16 years 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• 16 years ago

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

bgraves• 16 years 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!

yurivish11• 16 years ago

I will probably set up a blog and write up some posts on the experience of making it sometime soon. :-)

meric• 16 years 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/screenshot20110111at...

Joshim5• 16 years ago

I second this comment. I'd really be interested in learning how you made something like this.

CountHackulus• 16 years ago

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

inovica• 16 years ago

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

vaksel• 16 years ago

as far as suggestions it really needs the undo button.

Also the new button really needs to be more prominent

yurivish11• 16 years 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• 16 years ago

Undo is really the only thing I think it's missing too. Absolutely love the site… beautiful work, guys!

barredo• 16 years ago

Lovely.

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

tlack• 16 years ago

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

aeontech• 16 years ago

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

Alex3917• 16 years 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• 16 years 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_c2• 16 years 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.

yurivish11• 16 years 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.

andresmh• 16 years 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

albertsun• 16 years 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.

yurivish11• 16 years 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• 16 years ago

Several nice bits of design inspiration on this site.

jessevondoom• 16 years 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...

prawn• 16 years ago

Reminded me of this:

http://www.escapemotions.com/experiments/flame/index.html#to...

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

Encosia3• 16 years 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• 16 years 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/ Its performance is somewhere around 33x faster than the vml-based excanvas. (Yes, 3300% better.)

Encosia3• 16 years 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.

muloka• 16 years ago

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

DamonOehlman• 16 years 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/

yurivish11• 16 years 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.

getsat• 16 years 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• 16 years ago

Me gusta!

mcgraw• 16 years ago

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

grncdr• 16 years ago

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

astrofinch• 16 years 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_• 16 years 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.

yurivish11• 16 years 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• 16 years 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• 16 years ago

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

bkudria• 16 years ago

Same here.

ZeroMinx• 16 years ago

It sometimes work for me when hitting ctrl-shift rather than just shift

RyanMcGreal• 16 years ago

I particularly like the additive mixing. Fantastic implementation.

chubs• 16 years ago

Please make a screensaver out of this!

d0mine• 16 years ago

Silk + electricsheep-like selection = screensaver

http://electricsheep.org/

istvanp• 16 years 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/)

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

mceachen2• 16 years ago

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

jarin• 16 years ago

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

http://cl.ly/022x3k2M1G3Y0G233e0Y

javadi82• 16 years ago

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

If not, would you please consider implementing it?

mnutt• 16 years 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

spektom• 16 years ago

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

sidwyn• 16 years ago

All I can say is wow.

bystac• 16 years ago

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

mustpax• 16 years 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.

sunbash• 16 years 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.

muxxa• 16 years 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• 16 years ago

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

yurivish11• 16 years 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• 16 years ago

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

pizzaburger• 16 years ago

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

mceachen2• 16 years 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• 16 years ago

Looks terrific!

marceldegraaf• 16 years 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.

yurivish11• 16 years ago

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

My winter break project — Silk

Related Stories