My harmonious background canvas
So I happened upon squaredesign site and was impressed by their trippy background squares that responded to mouse movement (tutorial here).
I got jealous and wanted my own interactive background. Plus @miketaylr's is mad sweet. Turns out, I'm lazy. Never fear. Mr Doob recently put out the magical canvas procedural illustration application Harmony and generously licensed it MIT.
I adapted the code for use as a background, but felt like it still missed something. It needed an easter egg. Oh yes. Taking inspiration from the Harmony Harmony meme (example), I decided an Erasure music video was in order.
Leveraging code from the $1 Unistroke Recognizer (which is righteous), it takes snapshots between drawing pauses and looks to see if you drew a star. If it thinks you did.. then:
The code for the bg integration is on github: /paulirish/harmony. If you want to do the same thing, using the code here is probably most helpful. I can't help you out with this unfortunately.
The code for doob's harmony app is on github, too: /mrdoob/harmony
Take it for a spin if you like. Experiment with some of the other brushes. Thanks again to powerhouse Mr Doob for sharing such beautiful work.
(I'll probably be removing the drawing canvas in a week or so. It's a bit of a resource hog!)
If you're looking to get the easter egg, pause before and after, and draw the star pretty quick. The detection isn't that perfect. :)
That's so damn awesome…love it!
fun easter egg!
It also looks like you have to draw the star the same way you did ( from the bottom left corner. I learned to draw the star from the top that it doesn't seem to work that way.
@Daniel Petrie
oops, I lie.. Apparently my start wasn't good enough the first few times I drew it my way lol
i am quite honored and humbled. :)
LOVE the interactive background effect. Super cool!
I really need to stop coming to your site, Paul. It's a real productivity killer for me. Damn you!!
wow – spending 15 minutes on your site now – just to "paint" around.. :D
great!
what a journey. i didn't miss a stop. some flickering mischief, harold's huge purple crayon, smoking mr. doob and then having my hopes and dreams dashed upon the rocks endlessly in harmony, harmony with "persistence is futile" (no it's a laugh riot) only to arrive on the set of "Prancing Tiger, Closeted Dragon". What do you suppose the snowball was a metaphor for? Some things are better left to urban dictionary….
Thanks Paul for the memorable and timely writeup. You rock, DUDE!!!
bliss and blessings to you and yours.
ps. Paul, I love my "In Utero" icon. How did you know Kurt was my cousin? Happy afterbirth!
i'm sorry, that was "Prancing Tiger, Hidden Drag Queen"
:D
oh,it's so cool,love it
this rocks paul. hi!
So I have to say it's more than a little frightening to find this easteregg accidentally before finding the explanation. "AAAH WHERE IS THE ERASURE COMING FROM AAAA" etc.
That said, up to the point where I was afraid I wasn't going to be able to read your work without having erasure leap out at me, I quite enjoyed the drawing interface.
I love this, but unfortunately all kinds of errors are kicked off when using IE8. Is there a fix for IE?
@Jeff
It should quit early in IE8. The script is not compatible. I'll have to look into the errors.
Shoud've used entire Mr. Doob's demo – it's a bit smoother.
Awesome! So awesome, that I adapted it for cornify.com for drawing rainbows on the background. Next update will also include sparkles.
I added a detection to the script whether canvas is supported, since I didn't want to bog down old browsers (IE8). I basically just create a canvas element and check if "canvas.getContext" exists. Hope that helps.
Sparkles!
Your background is really awesome, always I always come here I spend at least two minutes just drawing around. I've been trying to apply it to a website or a blog but when I apply it to site or my blog it doesn't work and I can't scroll down.
Could plese make a post about te steps to apply it to website or a blog?
thanks and regards.
Hey, this is very very very nice!!
Love your blog and your work..
Im trying to expand your code.
i want to have a background image behind the canvas.
if you draw the lines, the background should appear.
so its like you will paint with transparent color.
is that possible?
regards kai
haha awesome background, and i accidentally activated the youtube video, why would you embed THIS video, now i want to play robot unicorn attack… hahah
@Kai
I can't help you more but you'll probably be interested in this demo: http://dl.dropbox.com/u/39519/web8demo/draw.html
This was awsome man…
Thanks a lot ^^
Thank you!
Thats what i was looking for!!!!!!!
Kai
@Paul Irish
how would you put this on a blogger blog.
The background should appear.
so its like you will paint with transparent color!!!
@Paul Irish That preforms REALLY badly on my computer.