Awesome :) Very funny. I actually just spent 10 minutes and saved 10 drawings. Tnx

This is really brilliant, love it! Shared the love for drawing tool on Twitter: http://twitter.com/BenjaminReid/statuses/10164369487

Very nice ;)
Looks like I know how to draw stylish stuff :P
(grid it's not working on mac/safari.4.0.4)

am

Very Impressive. It has inspired me to add brush styles to one of my projects.

Awesome app :) :)
I spend much more 10 minutes to play with it :D

Just a little thing : The "Web" brush is so dark in comparaison to the brush used in scribbler :(
Can we have the previous brush again ? :)

esta vez te pasaste, esta genial!!!

pera

muy bueno!...
citado en mi blog...

http://www.elkraneo.com/2010/03/08/harmony-webapp-elaborate-drawing-tool-by-mrdoob-creativeapplications-net/

Awesome awesome job man!! I wish there was a way to output a higher resolution for print(possibly vector). Is this a possibility in the future? Great job again!

it`s very nice.....pump it up for iphone and ipad...
I would buy it...I would be happy....

rico

Fantastic !! This sensation to be a real painter (i'm a developer ^^)
You have to create an undo function !!

I love it!

This could actually be a great new add-on to photoshop and other drawing applications. Brilliant job.

Awesome.

Are you thinking on create an advanced drawing app with it? It would be great to have an Undo/Redo actions, and layers.

Really an amazing work you've got there.
I can not believe how much fun it is to play with this on my iPhone. Don't know if it's viable but you might consider making an app out of this.

wooohooo! VERY nice.

The only thing I was missing to make it a really usefull sketch app was an eraser - or white paint.

something like
this.context.strokeStyle = "rgba(" + redvalue + ", " + greenvalue + ", " + bluevalue + ", 0.05)";
would do the trick ofcourse, then just add a palette to set the RGB values and you have it in full color.

very nice work, can't stop playing with it :-)

Thanks for all the feedback guys :)

I'm not really trying to do a pro application out of this. The idea is to keep it simple and fun. Adding undo/redo would make the code way more complex that it's now and it would be harder to create more styles.

Neither I was thinking of doing an app for iPhone/iPad. It already works on Mobile Safari (Android/iPhone).

But yeah, adding colour picker is on the list. Need to find the simplest way for implementing it. Stay tuned!

Neat stuff sir, did a quick sketch with my trackpad: http://bit.ly/aETOLl — can't wait to try it out with the tablet !

Very cool implementation using the processing engine... I love the very stylized look and cool behaviors. Nice, simple, effective. Awesome. Thanks!

Processing engine? Where?

Wow, this is fun!
Great for concepting, as it does a lot of the work for you!

You kill!

I thought I'd share something I whipped up with my mouse, very quickly thanks to your algos...

http://www.joseph-sims.com/images/ScarySwordGuy.png

Good stuff, thanks for creating it. You should definitely look at getting multitouch enabled so it can be used on the iPad.

Beautiful and inspiring procedural tool.

I'm unclear on "saving" on the iPhone. Any thoughts / advice?

Otherwise, very well done. I really enjoy it.

You can always press power button + home button at the same time. That'll take a screenshot of the iphone screen.

AWESOME!!!!!!!!!!!!!
http://www.flickr.com/photos/31024656@N05/4420460785/

just curious any way to get in vector :D

arkzai

Absolutely amazing.

Jdack

this is so totally awesome. i've been playing with it for hours!!!

This is way cool! Thanks for sharing! =)

Michelle

Wow, very impressive. I'd actually love to use that sketchy brush as a brush in Photoshop... Do you think Photoshop can even do that?

Ah who am I kidding, Photoshop can do anything...

Do you happen to have it as a Photoshop brush?

Please never take this down. Please. Please.

Dustin

Thanks for making this, mrdoob! This tool has unleashed my untapped creativity and has enabled me to produce works of art such as this: http://bit.ly/ctYhYp

I love it!

Karan Vasudeva

Just Love it! Congrats!!!

Can you tell me how can be possible to resize the canvas to 4000 x 4000 for example, where i can still draw on that entire new size canvas?!

;)

FCavaco

One more thing, is it possible, instead of png as result, get a .svg file?

Thanks a lot! ;)

FCavaco

Amazing work, bravo. :]

I loved it!! Im not even the artistic type of person :). This is sooo totally cool. Thanks a ton!

ShobaRao

Brilliant. Can you make a brush that does just the plain lines and doesn't fill in the gaps as well. This is the first drawing "app" I've ever used that feels like natural media. The fact its in a web browser is astounding.

Congratulations.
Awesome.
Imagine when we can use this. Applicability infinity.
Thanks.

Cool tool, looking forwards to see more!
So fun: http://twitpic.com/17pnbt/full

alternatyves

Amazing idea, are you going to release it as downloadable content?

Nuc'em

really nice!!

leomiraji

haha love it

http://twitpic.com/17q28d/full

alternaatyves

alternatyves

Very impressed with how the brush interacts with points along the polyline the user has drawn. Neat trick that produces some very cool effects.

Is that something you came up with, or are there other tools doing something similar?

Robert K

I've created a webapp version for the iPhone/iPod touch with offline capability, full-screen and pan/zoom.

See http://blog.42at.com/harmony-webappd for download and additional features.

Great work Ricardo.

Really nice, but having a Wacom makes it even cooler!

Nice work

One more thing, is it possible, instead of png as result, get a .svg file?

Thanks a lot! ;)

FCavaco

awesome. i just created my twitter background with it: http://proz.co.nz

Cool, kept me hooked for hours! :D

Excellent. If you could have squares filled with random colours or even random images I'd love it even more.

IsRobot

Oh for a desktop drawing program that implemented your 'Sketchy' mode! I can draw figures of 8, stick people and other rounded shapes with my mouse that look great - unlike using PHotoshop's brush tool for example. That's a wonderful algorithm for smoothing them out!

If anyone knows of software that has this implemented do leave me a message...

Peter

holy shit man. this is awesome. Can you create a "garden drawing" algorithm?

this is ridiculous...

lllxlxlxlxlll

this is sublime to play with !

Cody

Awesome application.

Some things that I think could make it better would be if you added:
- an eraser tool
- different colors
- undo button

Okamera

Super awesome! I love this. There's something magical about this.

Incredible work!

Beautiful. Thank you for sharing this.
;~}

Maitresse99

You mad scientist you...You make me happy with your friggin lines.

Tj

This is fantastic! Thank you <3

Ivana

did a few more sketches :-)

http://twitpic.com/17rbi5/full

http://twitpic.com/17rc0b

Here is my sketch:

http://yfrog.com/evtilp

Color harmony.

http://www.flickr.com/photos/axeldiego/4423305948/
I added a bit of color to my Harmony.

Wow, after 29 years I have just created my first drawing which is not a crap! Love you.

Wow... whats the charge for this ? Derivatives? If I paint a picasso ro basquiat do I have to split it with you?

fabulous work

A bit more of color.

http://www.xyzt.is/post/439569246/some-more-color-harmony

And if anyone likes to try it out:
http://dl.dropbox.com/u/4843313/ColorHarmony.zip

It's a big mess, but get the job done.
The only brushes accepting color are; Shade, Sketch, Fur and Longfur. It's easy to add the rest I just didn't see any use in that.

Enjoy.
Thanks Mr. Doob for awesome tool. Big Kudos. :D

Wow... whats the charge for this ? Derivatives? If I paint a picasso ro basquiat do I have to split it with you?

fabulous work

Check this out :) Fantastic drawings by Polish artists in Harmony :) http://blip.pl/tags/harmony
Just add "undo" function and it will be perfect and simple tool. Thx.

Oh wow, that's a lot of feedback... I'll make sure the app stays online. Will now get down on doing some improvements to it.

Thanks everyone!

this app rocks. extraordinary awesome!

Keep up the good work!

Here's one pic i did:
http://oscarb.se/index.php?art=html5.jpg

This would be better with an Eraser tool :) Other than that, amazing work.

Tristan

Works great! One thing I would sugjest is full screen on the iPhone (when launched from home screen). It should only be a few lines of java script, and shouldn't break anything. I don't remember if that was part of jQtouch or not.

This is great! Instant drawing skills, hehe.

I love it, but the darkness toggle is essential: I need it back!

anonymous

I love it, but the darkness toggle is essential: I need it back!

anonymous

I would pay good money for a version of this that could output in a higher res format for printing, up to 300dpi if possible.

Could anyone make this happen? Contact me please.

I love this so much. like a lot of people here, my first thought was adding color, so I hacked in boxes for RGB values. Ugly but it works. It's nothing new though, as a lot of you have added the same

However, when I was hacking away, I made a stupid programming error that accidentally invented a beautiful new brush....

in fur, if you replace the second color with a non-existant function, for example:

this.context.strokeStyle = thecakeisalie();

you get this pattern like the grid, except from whatever point the mouse initially clicks on!

Thanks again for a fantastic tool, its the best paint app I've ever used. No really!

roryok

You _really_ should make an app out of this, I'd love to use it offline. And I'm sure I'm not the only one.

Henri

What about an eraser? This really produces nice results and I've been looking for a good sketch tool - thanks! I haven't hacked any of the code yet but this looks very promising.

anonymous

WOW. Amazed by the coding.

with a color hack, you can use sketch or fur as an eraser just by setting the color to white.

roryok

Better saving on the iPhone:
One option is pressing the Home and Lock button at the same time, but then you get the borders from Safari.

If you press the SAVE button on the website you get the .png file in a new window. Then if you press and hold that image you get the option of saving the image. Then it will appear without the Safari border in your Camera Roll.

Awesome app by the way. :)

Maggi

Wow! Great.... really super!

5 minutes of work... http://skitch.com/stjernstrom/n3pxs/harmony-procedural-drawing-tool

Mathias S

The site won't open up in chrome...at least for me :( it says that I should move to chrome :) like this:

http://dl.dropbox.com/u/133421/chrome_or_not.jpg

DuDe

I see you have many extensions. Maybe you're using the Internet Explorer emulator extension?

May I use your code on my website?
I couldn't find any licensing infos

Lincoln

Lol...just looked into the code...and there is the license...

Thanks for releasing such a great thing under MIT license!

Lincoln

I love it!

Priscilla Huang

Here's one I drew today, which I call 'Squid Interface'

http://yfrog.com/eu5z7p

roryok

and hi-res saves (ie 300-600 dpi?). any way to up-res stuff gracefully?

ps this is brilliant. and i love that it's in html5

I LOVE IT!!!

Amazingly fun stuff but yeah, undo/redo is required for it to be a little less frustrating. I'd like to draw something really complex with it!

Trollicane

Hi-Res please!

This is amazing!

Markus

Needs an undo button! D:

Since I'd already made the eraser and so many people are asking for it.
http://dl.dropbox.com/u/4843313/harmony_eraser_color.zip
Here you go. This is still just my experiments with this code, so it's a big mess and some unused things there that you'd probably not use. But as before it gets the job done.

I added also the option to clear the canvas to whatever color is selected, because it's fun to paint on other than white. like this.
https://www.dropbox.com/photoshow/download-3.png

Axel Diego

we're diggin this! so much so it inspired an inter-office drawing contest... HTML5 and great for mobile - thanks!
http://www.flickr.com/photos/loweroche/sets/72157623476612389/

My link went wrong.
To see the colored background check:
http://dl.dropbox.com/u/4843313/download-3.png

It should work.

Cheers.

Axel Diego

Just amazing! Only lacks of the undofunction and above all: save in higher rez...

Kobi

nice! the first brush that actually does not try to simulate too much a real world thingy (though it might seem as washed charcoal) and yet produces a rich texture! First in years I like penning around with, after years of crap oil paint impersonators. Only 2 things missing (apart from stuff mentioned before):
1- the contrary brush (can be an eraser, but I like the idea you can't undo somehow. makes it less digital. So better a white brush then, or some alpha-ish mix of the two)
2- since its browser-based (not paper), it should be more interactive too! I mean: something like live tweaked parameters, by receiving some kind of dynamic input Kinda weird idea perhaps... Anyways, cool stuff!

sytsew

This should come with a warning for addictiveness. ;^) It's great fun and the results can be very attractive with hardly any time needed to learn it.

Marian

@Axel Diego: Thanks for all the hacks! I'm more concerned about keeping the interface minimal and the experience fun than the technical part :) Plus having issues with the server. Hopefully tomorrow I will have a new version!

We need a gallery we can upload our masterpieces to!! :D

Cristie

I'm totally obsessed with this drawing tool.

Here's a Flickr set of stuff I done with it: http://www.flickr.com/photos/nathanbowers/sets/72157623471092593/

1) please never take it down
2) please make it some kind of downloadable paid app for Mac and iPhone.

As for feature suggestions:

1) I'd like to be able to save to an alpha channelled PNG instead of a white background PNG. That way I can take the artwork into other graphics programs and paint underneath the lines with layers.

2) High resolution output. This is such a tremendous tool for generating art, I'd love to be about to print something really big from it.
Maybe generate vector art from it instead of PNG bitmap? Or be able to export any size PNG?

Thank you.
I like it just the way it is.

Maybe more brushes would be nice.

this is really awesome! thank you for making it available for free use.

desiree

Very nice, but could use an eraser don't you think?

Marwell

thanks. amazing app !
is there any chance to make an offline usable version ?

Yo this is the best obline sketch i ever found thanks for the download
SuperHero Legs:
http://bayimg.com/image/ealliaacc.jpg

Deyons

Awesome stuff mr Doob!

I've hacked some keyboard stuff. If you press 1 through 4 while in sketchy, it will set the influence level...so- as how the lines interact with each other.

It works in firefox 3.6, I didn't test it in anything else.

Just paste

http://pastie.org/866299

into index.html and your set.

I'm not a full time dev nor do I play one on tv- so, be gently commenting on the code. :)

Here's a link to the archived scripts...so just unarchive into a folder and run.

http://kotrotsos.com/wp-content/uploads/2010/03/harmony-inf.zip

это охуенно!!! просто охенно!!!

Дима Гапт

For the people wanting some kind of vector output support- just wait until our browser-vendors implement the canvas.toDataURL("image/svg+xml") method correctly and add that to the save() function.

Then you can export to SVG!!. For now- it just does not seem to work at all...

I've taken Alexs color version and made some small changes.... I've added a second color picker for background. Eraser and clear now use the background color by default. I've also added the foreground color to all brushes, and added in the 'flower' brush I accidentally created.

heres my version!
http://dl.dropbox.com/u/568631/Harmony_2color.zip

roryok

amazing just amazing
if you can make the soft like this i will by in the second
avesome work !!!!!!!

alexei Dernov

@roryok: Great stuff! I'll try to merge all the tweaks everyone is doing. Just so you know why I'm not doing it right away. The tool is getting hammered. The reason it's just 1 file it's because it saves in server connections. Adding your tweaks will basically bun the server and make the tool unavailable... (your version's color picker needs 35 files :S)

Anyway, we'll see what I get done today :)

This is amazing! I can't stop using it. I tried it on my Hero Android phone and it does work, though you have to move your finger really slowly for it to gather up enough darkness, since the Hero's not that fast.

Also Save on Android appears to take you to a blank URL of "data:;" instead of the image

ALSO for people who were asking for an offline version/app - if you create an HTML5 offline manifest I'm pretty sure you'll be able to visit the site without a network connection:
http://www.w3.org/TR/offline-webapps/#offline

Maybe someone else can have a go at this if mr.doob is busy on other things :) Maybe me! Who knows.

Nick

Thanks for the tip Nick. I don't have much experience with Javascript, so the more tips like these I get the better :D Usually takes more time to do research than actual implementation, you saved me there 2 hours! Thanks!

a rubber/delete function would be great!!!

Martin

What kind of traffic are we talking about here Ricardo?

What kind of traffic are we talking about here Ricardo?

Sorry bout the double posts- seems like Ricardo's server 'is' getting hammered with traffic- so I got an error, and reloaded- but my message came through twice now.

About 150k pageviews per day...

I've fixed an offline issue with the webapp I mentioned earlier. Try it here: http://blog.42at.com/harmony-webappd

fantastic. can't quit

Cheryl Rose

hi,
This is a great app.
I'm wondering if there's a way to use this app locally on my desktop. I tried to save the page, but when I open it, it didn't seem to work.

Thank you.
John

John

Fantastic tools! Big thank you!

Hola! Muy bonito. El code mi parece muy simple ya. Has pensado de traer lo a Quartz Composer? Puede ser lindo. Hay una versión mas formatada para ver si puede transformarlo a un QC patch?

Saludos
P

Never mind my posting. Found the color version with a slightly easier formated code. Start to understand that it has to be completely different ;]

Thanks guys! Very cool stuff.

One more thing, is it possible, instead of png as result, get a .svg file?

Thanks a lot! ;)

FCavaco

If you are reading this, it means that you're using my new server. Welcome!

It has been quite a challenge to move everything over. This server should be able to handle the load much easily.

Now that all the sysadmin tasks seem to be over I should be able to go back and develop this thing again. Sorry about this. The success of the app was totally unexpected.

Brilliant!

Typical modern innovation, I am amazed and no wonder everybody is!:)

Congratulations for this awesome work ! I wrote a post on my blog, I hope a lot of people will use Harmony.
Keep up the good work !

Well, i lOvE your app.
It's easy, nice, smooth, and evything you need.
accept an upload button. I would love to create some more images, starting from a photo i've made. And one more thing, could you also add colors?

arne

Very good job !!!

This is totally wicked !

@mr.doob yes, the color stuff is a bit awkward in needing so may files. I'm sure it could be cut down though.. JQuery can be run from the google cache, and you could probably put the color picker code all in one file, and replace the fancy graphics with html and ascii

Anyway, thanks again for a great tool!

PS: re the flower brush - I'm sure theres a better way to do it but I couldnt figure out how, its just the 'fur' brush with a reference to a non-existant function!

roryok

Yay! Another fantastic way to spend time not doing what I should be. Thanks for this, I've done two in as many minutes.

this makes the most gorgeous fluid marks - I love it

mr.doob awesome stuff !!! I love it! I'm impatiently waiting for a Hi resolution output option and it will be perfect.

12kredek

This is a fantastic tool, I'd definitely by a full application based on this. It is so easy to control and makes such beautiful marks - the fur is incredible.

Not really a fan of fur, but digital fur is awesome!
just wondering, as it attaches itself to local lines, would it be possible to input an image and draw over as a separate file?
cheers.

g

It's fun :) !

Lilidoll

neat-O!

daphna

That is SO great. THANX a lot for it! Actually it would be really great to create a snowflake-brush as well.
:-)

Lotte

There is a Fanpage at Facebook - if you like to join and post your paintings...

http://www.facebook.com/pages/Mr-Doobs-Harmony/369109345937

Elke

Wow, Harmony rules man!
Thank you for sharing it.

Alee

Wow! This is awesome! Addictive too! I can't stop drawing lol.
Being able to have a white added to the colour wheel and an eraser/undo of some kind would be useful though. I keep having to start over when I mess up.

I love making drawings using this tool however, for some reason I am unable to save my drawing, the save function doesnt seem to work. (It did on previous occasions). did something change? thanks

jean

For some reason my drawings won't save anymore, like the png page wont come up at all no matter how many times i click -save- Help??

Lisa

Awesome, nothing more to say... Pretty cool to watch a grunge background starting from few lines drawned with ur applet :)

crow

Thanks for the author!!!

It's sooo nice, i love it!

but pls insert an UNDO FUNCTION :(

Aagje

cool

bob

Sooo cool!!
All i would add to this is an eraser or the colour white, otherwise the coolest thing i've seen on the tinterweb in weeks

Does anyone know how to make the canvas larger?

Cloxboy

@jean @Lisa: Ops! Sorry about that. SAVE button should be working again. Somehow messed up when implementing the color selector ( http://twitpic.com/18fczu ).

@mr.doob:I like the new color feature. Although, on mac the ctrl button is not the handiest one to have the function.
Ctrl click = right click. The contextual menu always pops up, before being able to click with in the color ring and select color.
Still it works.

Axel Diego

This tool is incredible!
It's better than everything else for pure sketching,thanks you very much.
Only 2 things are boring.
The first is fixed resolution,I can understand that it uses the res of the browser,a way to expand that could be cool to do real drawing!
The second(related on the first) is that the distance(the threshold)when lines start to blend is too low,on a 1680 *1050 res drawing a face for a full body gives too much black blended lines(if this distance could be a parameter controllable it could be really cool !)
Btw,it's wonderfull,thanks you very much

@Axel: Changed that to <Shift> instead... Damn Macs... :P

Pure awesomeness. Seriously, you did something meta-awesome. It lets you create awesome things

comboy

Just make a Photoshop plug-in and maybe you can earn some money from it :)

Thank you for sharing this wonderful application!! This is addictive... Congratulations!!!
Greetings from Belgium.
PS:
* is it possible to add an eraser?
* the save-button doesn't seem to work
* it would be great if we could embed

This is awesome!
A very good way to squeeze that creative juice!

Keylammo

How do you change the colors..using chrome browser.

Jeff

Great! I drew what I wante and it seems I am an artist! :D

@Jeff: At the moment... hold <Shift>.

Genius!
Congratulations, mr.doob. It's a pleasure to see art and science collide. The way marks build up is gorgeous. If you figured out how to make this a photoshop plugin, I'd gladly pay for it. I'm sure I'm not the only one.

nordy

http://i42.tinypic.com/4j9ahf.png

love this tool so much

fli754

This is great... and completely addictive.

wow thats one awesome drawing tool!!!
..i have a huge time playing with the effects...would be really great if this was available as a offline drawing tool aswell.
great work i really like the outcome of the pics u can doodle here!!!

Nixon

I love it! Great! Bravo

ste

When I saw the name Harmony this is what came to my mind:

http://www.youtube.com/watch?v=zzbvqW_dOwY

check out our joint addiction to the Great mr doob

http://www.facebook.com/group.php?gid=359587211764&ref=mf

This one was spectacular to say the least.

http://www.huza.pl/harmod.png

Simply amazing! I think you can do the same on Flash, no? Could I set the pencil strengh to 0.5 like you did on html5? I'm gonna looking foward. cheers!

This is fantastic! Thank you so much for creating this.

I gave ya shout-out on my blog CricketToes:

http://www.crickettoes.com/blog/2010/03/drawing-in-harmony.html

Thanks again!

dude, this stuff is is like xxx flops short of awesome. I think procedural drawing is awesome, and your implementation is quite good.
but, it's slow, if you know what I mean. It's way better than The Scribbler, though, but are you sure you cannot turn it into binary plugin for some popular drawing program?

A nice touch would be to have more fine-grained control over the brush width (influence area), eraser (re-linker or simply whit brush) and proper handling of pressure for tablets. So far, it's just a toy, but people would be glad to have something like that for actual, serious drawing.

anonymous

AMAZING STUFF. I have mentioned you on my blog and uploaded three doodles I've drawn today instead of coding websites like I should've have.. ;) But I was - and still am - in awe! :)

http://miadoodle.wordpress.com/2010/03/15/experiments-with-harmony/

(Please, check it out)

this is the best! Thank you so much for making this!

cool cool cool.

I'm on a mac the shift key isnt bringing up a color picker or changing the color

chad

Your programming skills are truly amazing - you combine the art of code and design to perfection.

Just something I made while browsing through your code:

http://www.report.no/test/harmony/dog.jpg

Thanks Mr. Dood!

(looking forward to an undo-function :)

Kolby

Hi! Your brain is godlike!

Your page says "look at my code.."

Where do I click to look at the code?

<.<'



~Kiyote!

When I saw the name Harmony this is what came to my mind:

http://www.youtube.com/watch?v=zzbvqW_dOwY

I love this program!
It's extremely addicting. If you created an online collaboration paintchat program with it, you could get rich!

I think this program can help any artist boost their creativity :)

Roh.

I was bored a little:
http://butcher.hu/public/temp/joker.png

Woho! I wish I did such nice drawings when I got bored too :D

cant access... using internet explorer 8

Mensaje: Object doesn't support this property or method

what can i do???

mmordonez

Use another browser. Internet Explorer doesn't support <canvas>.

Stunning, just - Stunning. Thanks so very muchly. This is on the order of "Wordle" which is a favorite of mine. Thanks for all your work.
Marcintosh

I love harmony! it's a wonderful tool. however, one little feature i'd like to see is a prompt that asks you if you are sure you want to clear after clicking the clear button. I keep accidentally clicking it while drawing and I lose all of my progress! :(

anonymous

WoW! This is the best tool for sketching!

shemoixedet tqvechema : ))

Very nice design program, it handles extremely well and intuitively. Initially I thought it was like Alchemy, but after 20 sketches later I realized just how much more control I had over the marks I was making. Thanks so much for this I will contribute something very soon. Do you have any plans to sell this program?

cool...now we can too easy to drawing in a comp... n so i will try it

No need for an eraser tool I think. It's easy enough to erase mistakes with the SQUARE pencil and a lot of white :)

Artkore

креативнО!

moko

AMAZING !!! BIGGER CANVAS SIZE OR RESOLUTION PLEASE ! :)))

poznerokokokoo

Very Clever.

Weatherlawyer

Awesome. I'm a self trained (wannabe) artist and I think this is definitely the best application I've seen.
Sketch brush is awesome; it seems to read my mind. A desktop application or a plugin for an existing one would be unvaluable.

FabioGhibli

awsum

anonymous

Great stuff. I created some new brush strokes and put them on my blog (http://rhyolight.posterous.com/new-brushes-for-harmony-canvas-app).

You can play with the new brushes here: http://storage.dangertree.net/harmonyStrokes/harmony.html

They are called 'stringy' and 'curvy'.

Hi. There's this new app on the apple iPhone app store, 'AbtMagicsand', which is a reproduction of Harmony. I see no reference to your work, however.

http://appshopper.com/entertainment/abtmagicsand

Check screenshot 2.

PS if that work is unauthorized, do try to make the original web app more iPhone-friendly. (canvas sizing issues, full screen support by hiding all elements)

yeah, that magic sand app is totally a straight copy of harmony. you probably would have some say in getting it removed from the store.

I'm getting some weird glitches every so often where the canvas is seemingly reduced in size. often about the full width of my browser window, but only 25% the length. Also, my iPod touch had great support when harmony was first introduced, but I can rarely get it to work anymore.

honoh

To be honest I'm flattered that someone took the effort to copy my work :) Thanks for letting me know!

I'm aware that the current version doesn't work properly on
Mobile Webkit, my local version should fix that, I'll try to update tonight. I was on hotel internet connections these days and it was hard to try on my devices :S

Here is a similar app for iphone:
http://itunes.apple.com/us/app/livesketch/id362831454?mt=8
Only one brush, but there is an eraser and the drawing works fast.

And here are some promocodes:

MYMMEJXTEJ4M
7XL37KFPP3JM
EM7FTE4XR4RH
TRKJL74ATPEA
YXMRAJHMRR4W
EFE3XTKAW3RN
LK9KYAWNJNKW
9E9AMLFKTENR
KRHKRPYMEN7H
A9A3YNNNX7NF

Yan

I recall that you said an undo feature was impractical, but I wonder if you could add a square brush that fills in with the background color (and doesn't try to interact with lines already in place) as an eraser?

Marian

could there be an undo feature. thanks.

By the way it is Awesome... makes me sound really cool when i show it too people.

Thanks alot

anas

love your tool

Awesome app, really love it! The only thing is that my real work suffer alot. But that I can live it. :D

Chubz

I found your harmony by chance and gave a link
to seniors at the Netherlands, some love it.
Missing 'erase' but in on of the links above (a *.zip)
seams to have included it ...
Nice in any case.

PKHG

This is a pretty genius tool!!!
Would it be possible to implement an undo for at least 3 steps? It would be perfect for its purpose then!
I love the first two brushes most!

Great work for now, thinking of a donation :)
Thanks for your work, keep on doing dude!!

This is VERY cool, I've spread the word of it :)

I love that javascript and html5 etc are allowing great drawing tools like this and Alchemy, they really spice things up!

I've seen this JS application and fell in love.

I translated it and modified it a little bit, especially the square, the circles etc...

see here:
http://quhno.internetstrahlen.de/graphics/canvas/harmony-mod.html

omg this tool kick ass!!! iam exalted!!! is it possible to load an own background image in??! that would be fantastic..

do i need to download some kind of program for this to work? because it is not working on my laptop, it says error: object does not support this object or method.

anonymous

Really great stuff you're doing here, takes me bake almost to my days hand coding on the C64, lots of creativity!!! Keep up the great work.

Nice job! I liked your application so much I made a blog post about it, with the silly little picture I made with it. Keep it up!

Hi Richardo and fans of Harmony!

We have ported this incredible drawing app to the iPad!
Big shoutout to everyone here and can't wait to see what images are created with it!

We are about to release 1.1 with many new features. Would love to hear from iPad drawing fans on what features they would like for 1.2

You can choose backgrounds and save your artwork to your photo library too to email to friends or post to an online gallery.

You can find it in iTunes here: http://itunes.apple.com/us/app/really-big-pictures-hd/id364900656?mt=8

And here is the website here: http://www.reallybigpictures.com

Ricardo you rock, thanks for being the man who started this all. We are standing on your shoulders with our iPad app. We hope to do you proud with our future updates!

For the 1st 5 people on this site who have an iPad here are some promo codes. They only work once and are good for the first 5 people who use them.

3TKPW7KLL9RT
FR44HFLAFWFJ
Y76PJ3KWLTXP
NT93WJ6MP7MA
TKYW3HERFANW

Again if you use please email me your work or post in a soon to be open gallery on our website. Thanks!!

Great app!!!
Can the drawings be saved at a higher resolution for printing? or in a svg vector format for scaling up?

I would love to be able to use this app in some of my illustration work.

anonymous

Hey Everyone ,
I used this Tool for like two days , and i liked it so much ,

I added the Ability of putting a background image as target if you are going to draw from a reference .
"of course the *save* button will only show you the resutls without the image file you put as a background ,
ok here is the link :

http://users4.nofeehost.com/i2neeco/draw/Harmony_I2nee.asp

just saw this on stumbleupon, it is so much fun. thanks for the really big promo code, i am already hyping this to everyone i know that has an ipad!

Ricardo,
This Harmony ROCK ! Very good app !
Is there a way to draw offline ?

Kwarn

See http://home.gurroa.cz
Added features: Undo and Replay.
Every move is saved and the Undo button redraw everythink you drawn except the last drawing. Most brushes use random drawing so the result is never the same.
My goal is to store drawing in text file and redraw it later on demand.

The link isn't working for me... =(

No need for an eraser tool I think. It's easy enough to erase mistakes with the SQUARE pencil and a lot of white :)

Artkore

Great work ! is there any chance to adapt it so that it may work with internet explorer and excanvas for instance ?

As permission of Mr. doob . You can find a free version of Harmony for iPad at - http://bananacoding.com/MiniTones.aspx

enjoy and all feedback is welcome.

I'm planning to exchange saved file to able to load in Harmony.

Thanks,
-Jirapong

Dude, this is such an awesome sketch program. Found it just in time to sketch out one of my nightmares :)

Excellent... So fun and Simple... But you should manage to add an undo function... no YOU HAVE TO !

Lastiko

Thank you very much!

Allan

Yet another clone?

http://itunes.apple.com/us/app/harmonious/id363375481?mt=8

Quote:
" It's easy enough to erase mistakes with the SQUARE pencil and a lot of white :)"

Not when you are painting with a different background color ;)

QuHno

Wow.
I can't believe how cool this is and that it all exists in the "cloud". The interaction is great on an iPad and really does provide a creative tool that has unlimited paper. Pointing all my creative friends to it so they can put it to good use. I appreciate your steady flow of tweaks. Great stuff!

Hammer6

thanks so much for this ricardo! let me know if i can help with anything!
warmest wishes, maki

I'm really enjoying Harmony, but I noticed what might be a bug, and I'm not sure if this is the right place to report it. If I draw something, and then make my window smaller before clearing the screen, it doesn't clear the part that is no longer visible because of the window being smaller. So if I then draw a picture in the smaller window and save it, there will be part of the old picture on the side of it still. I've only tried this in Firefox, so I don't know if it's browser-specific or not.

Thanks for making this! It's been a lot of fun to play around with.

Love this app, it truly is great. I would have to bank a few of the suggestions that others have made ::

1. Undo
2. Plugin for PS/AI
3. Higher Resolution / Export to SVG

really 2 isn't 100% needed because if you could export to SVG you could do some post-edit work. I am illustrating a book for class next week and I have been looking all over at AI brushes, but I am thinking of using this tool assuming I can get the resolutions I want (if there were an export to SVG or another scalable export / high res-png) that would make up my mind for sure. Love playing around with it though!

hey mr.doob big fan of all your work specially your old days of flash -

question: im pretty shure you would be the one to know - could this be done in flash ?

Yeah, it's indeed doable :)

Hi! I'm quite impressed about your work. For me its just the tool I was looking for, excellent.

I have downloaded the source code from the git repository and the only problem/difficulty I have found its related to cookies.
In the online version, the actual drawing session is saved, no matter if you refresh the browser, or (probably) if it crash, the work is safe. The problem is that offline version doesn't work that way, cookies get never saved. Could you help to understand whats wring? And could be any solution?

Anyway! Thank you very much and well done, the program is simply AWESOME/AMAZING.

NaSeK

Not sure... Which browser are you using?

I use Firefox 3.6 on a linux platform (Sabayon). I haven't tried on any other browser yet, but I'm going to.

NaSeK

Ok. Just got my new Bamboo tablet and cannot seem to get pressure to work on Harmony.

Whatzup???

Amazing! I'd like to second the vote for an eraser. Also an "undo" that removes the last element added would be wonderful. (Expensive in a Canvas environment, I know).

Keep up the wonderful work.

works beautifully - have tried the colours but prefer the black & white - love the simplicity of it

so far I posted a few harmony experiments here:

http://twitpic.com/photos/alternatyves

Thanks

Man this is insane
I simply love it

Ivan Ayarza

Check out the App Store - Qvik Sketch. Seems like a direct copy of Harmony. Didn't see any ref to you so thought I'd post here. Harmony rocks!

hammer6

I should do a list of adaptations at some point :D

Found a port of your app on the Android market, called Sketcher. Got me hooked immediately, using it on my HTC Legend, and man, is it instant magic! Will make a exhibition of it in Salzburg, Austria. Many many many thanks for giving me back long-lost inspiration and creative void. Will credit you for this wonderful tool. Simply amazing.

Hi all.

I have a good news and a bad news for you.

The good news is that I've created a version of Harmony that supports an eraser stroke, undo/redo, variable canvas size, the use of background image(s) and wacom tablets. (I hope you don't mind that, Mr. Doob.)

The bad news is that not all the features are available at once in all browsers.

Well, the situation is not that bad, actually.

Known issues:
- you can't really draw in Firefox when zooming out. Firefox's JavaScript engine is not fastest one, to be politically correct.
- Firefox [3.6] won't store/reload the drawing when running the program locally. (This is a simple FF bug.)
- you can't drop images onto the canvas in order to put them in the background in Chrome when using Harmony over http. (This is due to Chrome's security policy.) You have to download the "offline" :) version and open index.html locally -- and voilà, drag and drop works.
- only one file is accepted per drop. (you can live with it, I think.)
- you can't use really huge canvases unless you have a huge monitor. I mean, the program lets you create a canvas of any size, but you can't zoom out enough in order to use it properly in case it's too big. (if it's ok for you not to see the whole drawing area at once, then this shouldn't mean a problem for you.)
- the program tries to load the wacom tablet plugin. As not everyone owns such a thing, this will result in a "missing plugin" error message in most cases. (sorry, folks.)
- use the undo/redo function carefully (it's turned off by default). It works fine, but can easily turn your computer into a memory-feeding monster. In order to implement "undo", every stroke (you push the mouse button down - you draw some weird lines - you release the mouse button) creates a new canvas layer. This requires a lot of memory, especially when using a huge canvas. At times, use the "flatten image" button, too.
- the program hasn't been tested with Safari, Opera and all the others browsers. Use Chrome, and use Harmony from your local machine (file:///...). Not because I'm the greatest fan of it on Earth, but because its JavaScript engine is quite speedy, and using it locally enables you to drag and drop images into the background of your drawing.

Thanks for the program, Mr. Doob.

That's all, I think. Enjoy:
http://harmony.uphero.com

Or download the zipped file:
http://harmony.uphero.com/harmony.zip

Daniel Simonkay

Amazing program! Wow.

AC

just gorgeous!

peach

Daniel, your version doesn't save anything :(

Juan

Oh, how embarrassing. :-/
I fixed the code; it seems to be working now.

Daniel Simonkay

Daniel
Still not saving on your site, havent checked the local version yet. I'm using chrome dev channel

Works great on iPad

var

I'm confused by the comment "cookie... work is saved". What cookie?

I would like (us, collectively) to pursue the prospect of saving Harmony 'state settings' by stuffing blocks/chunks into the PNG header of the images which are output by the app's Save function. No, I'm not suggesting data representing a full (stroke-by-stroke) recording, just a snapshot of the app's state/variables. (Later, this may include window positions if draggable windows are are added to the UI). According to the spec for the PNG filetype (same is true for JPEG, FWIW) flags for each header chunk can indicate that its content is ESSENTIAL, BUT NON-CRITICAL. This means that if an image containing (our) custom header chunks is edited in another program, the other program will preserve the header info if/when the image is REsaved. When loading (importing) a previously saved image, Harmony could change the state (brush selected, stroke width, opacity, etc) to match the settings indicated in the image header data. Because use of toDataUrl() doesn't provide an opportunity to inject additional header chunks, we would need to code a custom 'save' function: read imageData into a var, concatenate the chunks and data, base64 encode the var... then urlEncode the result and stream it to a new window (as toDataUrl natively does).

Daniel Simonkay, your comment states that your version adds Wacom support... but MrDoob's GitHub version already supported Wacom, as of April. Have you added something new/additional in terms of tablet support, or in your separate devlopment, did you accidently duplicate the effort?

stewie

Daniel, I wish your zipfile contained contact info. Because it doesn't, I'm posting feedback here.

I really appreciate your addition of sliders to expose the brush control parameters. However, I'm experiencing some bugginess.

Nothing happens when I attempt to change "stroke color". How/what is "stroke color" anyhow (vs brush color and background color)?

Attempting to change the background color, by clicking on the labeled colorbox (mini canvas element) throws an error. Console indicates colorselector.js line 289. (Later, the next time I click "create new drawing", the chosen bgcolor is applied, FINALLY.)

Your 'Save Drawing' command isn't working for me (neither online, nor local copy).

Eraser. min size is 30px? Ouch. Yuck. Although you may have chosen a square brush shape for the eraser for the sake of programming simplicity (using clearRect() to do the job)... I implore you to rethink this & consider changing it to a circular brush.

Enabling the user to CHOOSE canvas size is a wonderful feature addition! init() should still size the canvas based on screen.width though; otherwise, users faces the chore of resizing each each session prior to drawing.

Grayed-out sliders. I've been thinking, wrestling with how best to present the per-brush controls... and I'll suggest you should rethink your approach. Instead of graying-out A,B,D or whatever is appropriate, I think each brush needs its own menu (swapped into the DOM container). Otherwise, we're faced with showing (and graying out) every possible parameter each time. What if a brush exhibitiing 'springiness' (or some other unique parameter is added)? What if 'auto color-cycling as you draw' is added for select brushes? Your current construct of displaying all params, then graying them out, will become unwieldy.

Users begged for undo... and you delivered! Yeah, additional memory overhead, but whatchadgonnado? Maybe document the unavoidable overhead, maybe popup an alert if layers*canvas.width*canvas.height exceeds some threshhold? For the sake of sanity, probably ought to only save a set of 12 undo layers. Possibly expose a control which enables user to change this limit, but pop explanatory caution text via confirm() before applying the new value.

You've seen the mugtug.com drawing app, right? As we add features to Harmony, I think MULTIPLE draggable menus will be desirable, or even outright necessary in terms of usability. In any event, I'm saying that your draggable menu should collapse to a MUCH smaller size. Keeping a narrow menu/docking bar at the top of the window is probably a good idea as well -- users don't favor dragging and tripping over floating menus.

dragging background images.. and security restriction. Okay, so think outside the box. Why does the background image need to be rendered as a canvas layer? (I'm saying, IT DOENS'T). Step back a sec -- lose the "drag to load a bgimage" (which isn't supported across all brower engines/versions anyhow). Provide a load button. onclick, raise a js prompt() asking user for target path (can be a URL or file:///) ...and assign that image as the css background for a div underlying the canvas. I've done this; I'd send you a copy of the code if I had your contact info.

With a resizable canvas, the bgimage handling probably merits its own collapsible menu (and/or sufficient helptext). User wants to center the image onscreen, or wants it scaled up/down to fit the canvas? If scaled, use best fit (maintain proportions), or not?

stewie

Daniel, additional arguments in favor of separate, swappable menus (swapped visible into parent container, as needed) for each tool:

a fixed scale for the sliders (same scale across all tools) doesn't work well.

user would be better served if some of the controls were textboxes instead of sliders.

(Not a high priority, but) the last-used settings could be retained, per tool: Line width, color, opacity

Later, in the context of available localStorage (or the use of json, if a fork of the app becomes a 'cloud' app) yes, the user will probably expect the app to retain the last-used paramaters for each brush. Additionally, users would welcome the ability to save (as a named, custom brush) their custom-tweaked setting into the brush picklist.

stewie (again)

does not work on my pc

ie 8 win 7 thanks

rusty

Rusty, it not worky because IE8 doesn't support the HTML5 canvas element.

fred

Pretty cool Katya!

You are definitely an artist! As many times I tried to draw something interesting I just could not even make it look like thing I think of... Of course people asked too: What's that? O.o
Anyway, good luck! And hello from Russia :)

Daniel.your version will not work on the Iphone.
javascript error on line 101 in brush files.
'this.context.beginPath'[undefined] is not a function.
could you take a look.please and thanks

LK

any chance of:
a) a standalone prog (i.e. not web-based)
b) pressure-sensitive graphics tablet support?

GP

Hi everyone, like most of you I'm a big fan of mrdoob...he's a real genius and Harmony is such an amazing software!

If possibile, I would like to invite you joining a funny contest based on this fabulous application.
Il you go on http://www.gaiariva.it/disegnaconme you can create a drawing on my music, by choosing first a song of mine (first botton) and then starting to draw (second botton). you can use 4 colours, black, white, red and grey, in all their nuances. you can send your 3 best drawings to disegnaconme@sun-music.it .... the best drawing will be a part of my coming-soon new album's artwork :)
each work will be published here: http://www.gaiariva.it/disegnaconme/gallery

I wanna thank again mrdoob for his great work!

love,
gaia

I'm the first who flattred this!??! O_o?
the new Muro from deviantart (http://muro.deviantart.com) seems to have a lot of stuff borrowed from you! But as this is some kind of commercial project they have it more configurable. But they don't even have a hotkey colorpicker!..

Are you pissed off or honored by this kind of ... "citation"?! ;] or do you not see it that way at all?

I'm challenged ;)

Is there any chance of having a better colour picking system. So you can get specific colours without them being mixed with the next in the colour wheel, Also a eraser would be a nice addition.

Colour choice, rubbe

i lost about 3-4 hou... y 3

20:08
Harmony -- i start to find some programs for cash ((

17:22 -- test ur source
png (1366×638)

picture like the letter L in the abstract style / color
twitter - ckopomox

plz help find pic(

Abc123

'

"

;

--

../../../../../../../../../../boot.ini.htm

../../../../../../../../../../etc/passwd.htm

javascript:alert(wslite)

<wslite>

Ans: WebsecurifyLite

'

"

;

--

../../../../../../../../../../boot.ini.htm

../../../../../../../../../../etc/passwd.htm

javascript:alert(wslite)

<wslite>

Ans: WebsecurifyLite