My winter break project — Silk
weavesilk.comIt'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!
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!
That looks pretty amazing.
Check out Fracture - http://www.fractureme.com/ - I bet they would look unreal printed with their tech.
Ooh, thanks for that link. I've been meaning to get one printed for quite some time. I'll definitely check them out!
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.
That's amazing! Fantastic gift idea. It really needs publicity.
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.
This is the first time I've seen a product and couldn't find a price anywhere on the site.
http://www.fractureme.com/about/prices
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) :/
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?
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!
I will probably set up a blog and write up some posts on the experience of making it sometime soon. :-)
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...
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).
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. :-)
I second this comment. I'd really be interested in learning how you made something like this.
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?
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.
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.
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.
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.
Also, lagrom.nl has a bunch of LCD test images, one of them being a clock/phase image that serves much the same purpose.
http://www.lagom.nl/lcd-test/clock_phase.php
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.
This one makes my display shimmer a little: http://peach.blender.org/wp-content/uploads/sun_session.png
TWM - that takes me back about 20 years!
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...
Kudos to you not only for a great piece of work, but for calling it a "project" and not a "startup".
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.
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 :)
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.
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.
Very impressive :) Thank you!
I'm finding the shift+mouse isn't working (using Firefox 4 beta 7 on Linux)
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.
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.
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
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.
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.
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.
Several nice bits of design inspiration on this site.
What was the deal breaker in IE9, out of curiosity?
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.)
I get why that would be the issue for IE <9, but the latest preview version of 9 has canvas support. Hardware accelerated, even.
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.
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.
I love how this is all JS (no Flash!). Impressive. BTW this reminds me a bit to my friend's project http://glowdoodle.com
Reminded me of this:
http://www.escapemotions.com/experiments/flame/index.html#to...
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/
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.
That is beautiful! I made a piece that I call "God's Commode"
http://cl.ly/022x3k2M1G3Y0G233e0Y
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.
Great work, it's simply stunningly beautiful. I think (and hope) your iPhone/iPad apps will do well, best of luck!
It's been said, but I can't help but write my own comment. Excellent execution on this project.
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! :)
I just posted a blog about the experience: http://news.ycombinator.com/item?id=2101422
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 :)
The developer mentioned that hitting "e" will render a PNG in the upper-right corner. Right-click > Save image as...
Please make a screensaver out of this!
Wow, I've never seen anyone do this before: <script src="//usecharm.com/silk.js">
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.
I can't seem to get the shift+mouse to control the wind to work using Chromium on Linux.
Same here.
It sometimes work for me when hitting ctrl-shift rather than just shift
Ctrl-Shift consistently works for me iff I press and hold Shift before Ctrl.
(Fedora 14, FF 3.6.13)
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 :).
Beautiful work! This project definitely needs some publicity...did you think about putting it up on Kickstarter (http://www.kickstarter.com/)?
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.
The democoder in me loves this. Very well done, and an awesome effect.
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?
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!
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.
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.
Lovely.
Note: I'll gladly pay a few euros for the iPad version
Silk + electricsheep-like selection = screensaver
http://electricsheep.org/
I'd love some control over the coloration and some ideas of how my mouse drags can affect the final result.
Wow, that is lovely! Can you do a blog post on what you did and what you used? Well done
Is there a way I could save the "silks" that I create?
If not, would you please consider implementing it?
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
I like the simplicity of this, this would be really fun as a Quartz Composer patch.
Very impressive... simple-looking but so polished... Amazing job, congratulations!
I particularly like the additive mixing. Fantastic implementation.
This is so amazing! Now I realize the power of html5!
this will be great for generating website background, can be saved to image? can final images be used in commercial products?
as far as suggestions it really needs the undo button.
Also the new button really needs to be more prominent
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.
Undo is really the only thing I think it's missing too. Absolutely love the site… beautiful work, guys!
All I can say is wow.
Looks terrific!
Me gusta!