Sketchpad
December 18, 2009Michael Deal
- http://colorjack.com/
- Location:
- Portland OR, USA
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
Sketchpad is a drawing/painting application developed in pure HTML and Javascript.
Sketchpad includes a number of Drawing Tools — including: Text, Shape, Spirograph, Brush, Calligraphy, Pencil, Paint-Bucket, and Stamp.
Sketchpad also includes a few generic Drawing Utilities — including: Marquee, Crop, Eraser, and a HSL/RGBA Color-Picker.
Technology:
HTML and Javascript
Comments
This web application is truly brilliant. I am blown away. I immediately plugged in my Wacom tablet, and it works perfectly. The History, the polygonal etc marquees, the colour sliders, the choice of paint or light - all brilliant. I also highly approve of the choice of export format - PNG is best.
Reply to this commenti love it !!!!!!!!!!!!!!!!!!!!!
Reply to this commenthow do u use this website.i just cant figure out how to use this link once i get onto the sketch pad.
Reply to this commentdoes not do anything - flawed
Reply to this commentDoes not do anything - flawed
Reply to this commentI like his drawing.
Reply to this commentsuuuuuuuuuuuupeeeeeeeeeeeeeeeeeer coooooooool !!!!!!!!!!!!!!!
Reply to this commentAwesome! I made some dots on my iPad. :)
Reply to this commenthiiiiiii
Reply to this commentwould be even more awesome if it had an open feature to import another pic
Reply to this commentGreat Idea! I like the patterns. It would be better with more tools though. Besides that, it's awesome!
Reply to this comment2.000
Reply to this commentnothing new or better about any of the tools/ Paint brushes are terrible as are all of them, no one paints in solid blocks. No splatters even tho you ask how much paint to put on the brush. NO EDIT, for UNDO when something is not right. Spirograph tool is too sensitive If you do not move with lightening speed, it keeps printing on top of itself, ugly result. Where are your instructions or help menu?
Reply to this commentundo = Control + z ... easy peasy..
For the spiral thing, in the options for it, there is a speed controller. 7 should do it :)
I am also having trouble with the Text tool, it just makes some incomprehensible polygon where I assume the text ought to be! Currently I'm using the latest version of the Chrome browser. Apart from the hiccup, I like it!
Reply to this commentHey babe. Yeah I'm having problems with that too so you're not the only one.
Reply to this commentavenida cangaiba 1627
Reply to this commentIdiota
Reply to this commentquero prami este google
bom eu quero esse navrgador porque e mas rapido
Reply to this commentRetardada e analfabeta
Reply to this commentGreat! Next step - develop the virtual OS;D
Reply to this commentit's a good start, I can see how it can be more improved, like undo, or separate active window so we can see others work while doing our work simultaneously, it's fun, great work!
Reply to this commentYou can do CTRL Z to undo, also there is a history panel. Great experiment!
Reply to this commenthay
Reply to this commentWOW! Great job!
Reply to this commenti cant get it to work
Reply to this commentdamn good!
Reply to this commentgood jobs guys
Reply to this commentit is easy to download
Reply to this commenthope nice to download
Reply to this commentAMAZING! I LOVEEEEEEEE THIS!
Reply to this commentGOSTARIA DE EXPERIMENTAR
Reply to this commentBurra
Reply to this commentchega chegano chegado
Reply to this commentMoloqueiro e burro
Reply to this commentlovesblueskies Get Windows 7 It might Work .
You never know.
Reply to this commentهااااااااااااااااااااى
Reply to this commentHello. I'm trying to get some help, but my comment keeps disappearing. I don't know what I'm doing wrong. I love this experiment, but can't figure out how to get the text to be a different size than the default. No matter what I do, it's the same size (I do try to change it with the slider for size). I'm using the newest version for Chrome and Windows Vista Business.
Reply to this commentI just tried it in firefox and it worked fine.
Reply to this commentHello. I love this experiment, but I can never change the size of the font. I try the size slider, but it doesn't do anything. Can anyone help? I'm using it on the newest version of Chrome and with Windows Vista Business. Thanks!
Reply to this commenthello
Reply to this commentgtrfezdbhyuikoj,
Reply to this commentgreat wrk Michael..im a beginner here.. but luv ur prgramme...!!!
Reply to this commentin a world of it's own - awesome stuff - I think I 'm in the future here
Reply to this commentWhat versions of HTML and CSS are being used here?
Reply to this commentwow...this is an amazing work Michael....!!
Reply to this commentamusant
Reply to this commentI wish it were possible to export images in high resolution. Improve that, and I'll love you.
Reply to this commentI am really impressed by this experiment. What is the license? can we download it somewhere?
Thanks a lot,
Reply to this commentابداع حقيقي يشاد اليه
Reply to this commentI LOVE IT, isn't there some place where I can download it?
Reply to this commentdecorer son blog
Reply to this commentIt doesn't work on the iPhone, does it?
Reply to this commentThats alot of comments!
Reply to this commentThank you, Michael Deal. With this app alone, you've done a great deal for the humanity already!
Reply to this commentits so COOL so many tools .. i love it
Reply to this commentThat's so cool. Great stuff.
Reply to this commentI LOOOOOOVE IT !!! ...many many thanks ! ...
Reply to this commentOH MY GOD... beautiful - just amazed I have not seen this before now!
Reply to this commentThat's . Really. Impressive!
Reply to this commentA verdade de nada ser é nem saber do nada que não o conheço,assim é 1((((ma cópia de segurança completa se existem arquivo eu não sou o cardequicista e nem o representante do almoxarifado do arquivo central de giros do encéfalo sobre a pergunta do corpo e ramo da mandibula que por sua ordem deicha o nome assima pilotar o som sem a barreira do meanto acustico de todas as perguntas que queira sitar o seu sulco central para a resposta sem lobo temporal +brasil aonde na amazonia +s legal sem sinal .
Reply to this commentBebeu água da privada e veio comentar
Reply to this commentkool
Reply to this commentthats 7250 lines of code to achieve that! Sorry, not impressed.
Reply to this commentSurely not a programmer. it takes thousands and thousands of line of code to achieve some thing like this. and above all javascript is not a huard typed langage so it realy difficult to deliver with this quality.
Reply to this commentyou make a paint program simalar to this and send me the code. if you were a programmer you would know thats the least a paint program would be.
Reply to this commentYou are not a programmer, right? That would be the minimum any other paint like program would take. Sorry, but not impressed about you
Reply to this commentWhy? Is it slow on your browser? Is it slow on your computer? What does it matter for an end user how an application is made, as long as it delivers?
Reply to this commentشي كتير رائع وبياخد العقل
Reply to this commentراااااااااااااااااااااااائع جدا
Reply to this commentvery mazing
Reply to this commentThis seems quite cool, however on the iPad, moving the finger across the art board causes the whole window to move instead of brushing across. It's probably the ipads fault, but any idea how to "fix" it?
Thanx
Reply to this commentExelente si saves usar el espirografo me resulto de muy poca alluda la erramieta. Tu progra para el diseño de paginas es de gran utilidad ,ademas de ser muy efisiente para el diseño .computacional
Reply to this commentcreo q tienes muchas faltas de ortografia
Reply to this comment10,manths
Reply to this commentxxxx
Reply to this comment+-////
Reply to this commentsk
Reply to this commentno
Reply to this commentWOW! This is absolutely AMAZING! I played on this for hours and even made a birthday image for my brother. I LOVE it and would definetly buy it if it was for sale. Keep up the good work!
Reply to this commentThis was a really great experiment. It's really fun and can entertain anyone for hours...
Reply to this commentMake an undo button and you could sell this baby!!!
Reply to this commentctrl-z
Reply to this commentWow
tk g@tinha & juninho
Reply to this commentThis runs really well on an old 400 MHz PowerBook G3 running Safari. Kudos.
Reply to this commentAwsome one should try it
Reply to this commentThis program has it's uses =)
Reply to this commentThe slick animation and transparent ui looks better than most widget layers on the desktop! kudos to you sir!
Reply to this commentMmm, I prefer Aviary ( www.aviary.com ) , which is 100000000000000000x more advanced than this...
Reply to this commentyou dip nut. the whole point is to only use HTML5, not Flash. you can't compare Aviary and Sketchpad.
Reply to this commentits awesome, slightly frustrating at times but awesome
Reply to this commenti really enjoyed this experiment.. really entertaining.:))
Reply to this commentWow... you can do this on a browser?
Reply to this commentloooooooove it
Reply to this commentThis is a really cool app. Thanks for building it and sharing it. AWESOME.
Reply to this commentWHEN I LOOKED INTO YOUR EYES I DIDNT SEE JUST YOU, I SAW MY TODAY, MY TOMORROW, AND MY FUTURE FOR THE REST OF MY LIFE.....
Reply to this commentok
Reply to this commentthis is a great, innovative experiment that Google came up with. works the same as Abobe's...but it's a lot easier and fun to use. great for would-be aspiring graphic artists.
also easilly accessible whenever you need it! great job ;-)
Reply to this commentgoogle didn't come up with this...
Reply to this commentYes. Experiment is greate. Try more, we wait...
Reply to this commentlike you scott
Reply to this commentVery sweet ! But when i see the ugly code, i think it could be done better in flash...
Reply to this commentToo confusing.
Reply to this commentMy jaw just dropped. Amazing.
Reply to this commentthis is great! the stamps are better than photoshop and picnik; i'll be using this a lot! :)
Reply to this commentwow wow wow wow wow wow wow
awsem
Reply to this commentI want the latest new from you people
Reply to this commentAmazing!!!!!!!!!
Reply to this commentWTF! WOWWWW!! THIS IS AMAZING... Read the comment below mine... He's my best friend and he brought me to this inspiring website...
Reply to this commentThanks Ahmad, hope you will find this a good substitute to Photoshop
Reply to this commentAwwww, I didn't know you considered me a friend. Thank you!
Great sketchpad, by the way. Those stamps are pretty rockin'.
Reply to this commentJackass he was referring to me... he is in my class
Amaaaazing.... truly cool
How did you absolutely brilliant creators make such a thing???
I was going to buy Photoshop for my computer. I needed to do some pretty basic edits and creations and Paint was proving useless as it always makes an extremely pixelated image. Thankfully I switched to Chrome and saw this so its been kind of a boon to me....
Thanks a lot for making this wonderful software!!!
Reply to this commentmaybe download GIMP, its like Photoshop but free. if you get bored of Sketchpad.
Reply to this commentHey Sid... Thanks!
Reply to this commentThis is just the software type I've been hoping for! Amazing, beautiful, and thoughtful job :)
Reply to this commentLOVE this paint! I can't wait to be able to.... scratch that. You can do ANYTHING!
Reply to this commentFantastic!!!
Reply to this commentGOOD JOB !!
Reply to this commentjust impressive...
Reply to this commentThis is pretty amazing. My only problem is with the Marquee and Crop commands; I can draw outlines with both of them, but I can't actually do anything else. Is there a key I need to press, or am I missing the point entirely? Chrome 4.0.249.89 beta
Reply to this commentTo run the crop command click "enter" on your keyboard. The marquee works with various shapes - so make a selection w/ the marquee, then try using the brush, or stamp tool to draw inside your selection. Cheers!
Reply to this commentWith some layer capabilities, this is in line with Photoshop's usefulness.
Reply to this commentgood
Reply to this commentGreat! Insane capability, and impressive, considering that I can run it at speed in Chrome 4 on a horribly old HP Pavilion (8674D to give you an idea). You, sir, have written amazing code. No lag or anything! I currently use Ubuntu 9.10 Karmic Koala, and so a great tool available for my platform is very nice.
One suggestion: Saving in another format would be nice, and as a download would be even better. I think as a Tif would be a nice addition, and JPEG for better distribution to other people without the know-how for the less-typical formats. Thank you.
Reply to this commentThanks Sınıf Öğretmeni
Reply to this commentThrough you, i am an artist.
Reply to this commentI could probably give you more information after seeing your images, ... beutiful, faded, washed away and awesome simultaneously
Reply to this commentIf this had layer capability it'd be perfect. :D
Reply to this commentThis is truly outstanding. Something like this could easily become a project that could become an equivalent of Photoshop, but in the cloud.
Reply to this commentamazing!
Reply to this commentI'm so thrilled, this is so awesome, and super easy to use. It's extremly user friendly. If this is ever released as an own program, I would definitely buy it!
Reply to this commentWow, this is right up there with Photoshop, and 1000x better than paint!!
Reply to this commentgreat job
Reply to this commentgreat job!
Reply to this commentamazing!!! watch out paint! haha
Reply to this commentJust amazing.. I'm standing speechless maan !!
Reply to this commentI recently made a series of 15 images with Sketchpad. I post processed them with Adobe Lightroom and then printed them on 8 1/2 x 11 glossy. Nice results, although some of the borders on the shapes printed pixelated while the rest of the composition was perfect. On screen everything had a homogeneous resolution. Is there something about the shape tools that makes them have a different resolution when printed?
I'd love to see what other folks are making with Sketchpad. Is there an online gallery space where we could post to?
Thanks again, and Happy New Year!
Reply to this commentI would love to see them! I've setup a Sketchpad gallery on Flickr where you can add your photos: http://www.flickr.com/groups/sketchpad/
I'm not sure about the shape tool, I haven't tried printing any images from Sketchpad yet. One possibility is that the shapes have sharper edges, so they are more prone to pixelization when resizing. I could probably give you more information after seeing your images.
Happy new year! 2010 (twenty-ten), we're officially in the future ;)
Reply to this commentGreat Application! works well in Firefox.
Layers should be easy enough (compared to all that other awesome stuff going on). Maybe relatively or absolutely positioned image or div elements, then add a selector (i.e. in front of which div element do you want to draw?). layers are very useful!
Reply to this commentawesome!
Reply to this commentI have been worked in a small application like this for painting over a image. But after cing this amazed. Gr8 work and really stunning.. Keep it up... Hope will inspire others ..
Reply to this commentawesome! It's beutiful!!!!!!
Reply to this commentDoesn't work in Internet 8
All you get is a menu bar on the top of the page and nothing ELSE
Reply to this commentit isn't meant to work on internet explorer. If it does then that is a bonus. The website is called CHROME experiments for a reason.
Reply to this commentWorks great in Safari :)
Also in Opera 10. It's awesome.
Firefox 3.6 too ;)
of COURSE it doesn't work in IE .. xD
By the way, awesome app, very impressive =) 5 stars.
I can say the first experience was a pleasant surprise with the ease and quality of outcome. I felt very happy in using the application I wish the developer team all the best.....
Reply to this commentTHE BEST OUT OF ALL THE EXPERIMENTS! I SAT AT IT FOR HOURS!!
Reply to this commentGreat, very powerful JS program. I have only one suggestion; the random design when it opens gets slightly irritating. Either make a clear canvas button, or a new page button.
Other than that, its great!
Reply to this commentwow adobe photoshop wont know what hit them i have a challenge try making it better that photoshop
Reply to this commentThis makes me wonder why I even need Photoshop.
Reply to this commentSketchpad has a long way to go before it could threaten Photoshop :-)
I do believe that, in the near future (2-3 years), for many people, HTML based graphics design applications will be powerful enough to replace their desktop counterparts. Most people only need a few features (crop/resize/levels/text/draw), and, as has been demonstrated is powerful enough to run all these.
Reply to this commentIgnore this, I figured it out.
Sketchpad has a long way to go before it could threaten Photoshop :-)
I do believe that, in the near future (2-3 years), for many people, HTML based graphics design applications will be powerful enough to replace their desktop counterparts. Most people only need a few features (crop/resize/levels), and, as has been demonstrated is powerful enough to run all these functions... and much more!
Reply to this commentSome ideas - Could the backgrounds of the 'colors', 'pattern', and 'gradient' windows be made transparent? Also, would it be possible to open multiple tools to keep them set up such as three brushes of different sizes with different opacities and colors, etc.? Hmmm...
Reply to this commentHaving multiple tools open at once could be a lot of fun ;-) Or even doing multiple lines at once: http://www.neuroproductions.be/experiments/multiple-line-effect/
Reply to this commentOh! Multi line tool! I dig it. Yes please ;)
What do you think about the transparent background idea for certain tools? My reasoning behind it is that an artist could select the pattern or color in the tool window, drag it over the main canvas and tweak the levels (opacity, hue, saturation, etc.) until they were happy with the interaction and then apply the effect. This would save time and history space perhaps...
Hmm... I see what you mean, it would be handy to see the style on the image, to get a better idea of color cordination, and such.
Some kind of preview mode would be handy for most all the tools. Perhaps the person could click on a "preview mode" button, then draw with whatever tool they're wanting to inspect, then when the person changes the style, the "preview mode layer" would update -- this would just be for testing styles with brushes. When you clicked out of "preview mode" the "preview mode layer" would disappear.
We'll put this on the list of possibilities for the future. Thanks for the suggestion!
Creating a layer, adding to it, then saving it would be nice, as a preview then set. With layers, you would undo adding layers, and erase within each layer. You could rearrange layers, export single layers, insert layers, and have special layer effects, such as an auto shadow based on the light direction (a lamp positioned on the outside of the canvas in a 3d, blender-like environment) of the layer(s) selected above. While that last one was a bit crazy, it would be awesome! Other layer effects would be possible, and cool to think about. If you keep going, photoshop online will have competition, no matter how self-effacing you are about it.
Your code is ActionScript/Flash. This site only features JavaScript demos.
What you are looking at is an example of the effect.
Most of what is possible in Flash is also possible in Javascript w/
Javascript w/ Canvas ...
Well, not necessarily most, but more than you might expect.
I give you kudos, sir. I love it!!
Reply to this commentThis is awesomeness! I'm left Speechless!!
Reply to this commentWow, i am super impressed. Incorporate photo editing and you've got a STRONG contender for picnik. I'm just amazed that there's absolutely no flash involved. It runs awesome on my chrome. The stamps are fantastic btw.
Reply to this commentBy far the best of the 70 experiments presented! I dig the UI, simple and slick. The history tool is nice and would be even better with a larger buffer. How could layers be incorporated? And perhaps a selective eraser... I have been thoroughly enjoying the free flow of Sketchpad. Thanks!
Reply to this commentThanks for enjoying Sketchpad! Two questions for you: 1) How large of a history buffer would you find adequate? The larger the buffer, the more RAM and/or disk-space is used. We're planning on storing the commands in vectors to save memory, currently each step is saved as a bitmap [so horrible] :p 2) What do you mean by "selective eraser"? Does that mean it would only erase certain color thresholds?
Reply to this commentOf course, a history of the entire piece would be optimal. That could get quite large tho and I see your point about over utilizing RAM/disk space. Perhaps having the ability to select the amount of disk space to dedicate to the history would address this desire somewhat.
As for the "selective eraser", being able to tell it what to erase, such as certain colors or particular line types in addition to the level of opacity could make it quite versatile.
I'm not a coder so I don't know how feasible it would be to do these things, but I sure enjoy using the tools created so far! Thanks again.
We're working on making the entire history available, and cutting down on the RAM by storing everything in vectors. Look forwards to future releases :)
I see what you mean by selective eraser -- that would come in handy. We'll put in on our list of possibilities for the future.
Putting it on the hard drive should definitely be an option, at least, for those with really fast hard drives. Also, see my above reply for an erasing idea which would be useful for setting up the history, integrated within layers. A separate history for each layer is what I'm thinking, if there are layers or layers are added.
Utterly fantastic! Please, please, please develop this into a full commercial product (if you're not already planning to).
Reply to this commentIt seems to be one already... Adobe photoshop online equivalent in my book.
Reply to this commenttruly a testament to HTML5. kudos
Reply to this commentJust wow! This is the best pure js painting app I've seen to date.. even better than photoshop in some regards
Reply to this commentcombining the best of both artistic and technologic worlds!
Reply to this commentI admire the work... Fantastic!!!!
Reply to this commentI Like this ,if its free? I like my gmail to have chrome theams too.
Reply to this commentNo worries! It is, and will continue to be free ;-)
Reply to this commentIts like an online photoshop. Awesome.
Reply to this commentthis has a huge potential ... O.O lol awesome
Reply to this commentI love this so much. please add a canvas size tool... zoom would also be good.
Reply to this commentoi
Reply to this commenti love this! it is just so easy to make something amazing, and it could certainly pass for a graphic design tool (roughly)
Reply to this commentThis is a great tool to add to anyone's visual tool kit. Well worth your effort! Thanks and keep designing.
Reply to this commentvicky
Reply to this commentA real artistic tool... serious customsation, like uploading stamps, patterns, etc. would be nice, and further development would turn it into a real Photoshop web app, it is already miles faster :)
Reply to this commentThis is amazing! I have the urge to make something... I just don't know what!
Reply to this commentone of the coolest experiments I've seen so far! Amazing! I love the Look & Feel, everything is smooth, very fast... Impressive project
Reply to this commentThis is jaw-dropping. ... I can see the future.
Reply to this commentWow ! Very amazing . . . With your UI, you can own photoshop express
Reply to this commentTruly awesome. I'm totally showing this to all my friends. Very fast, efficient, and I love it.
Reply to this commentThis is an amazing project i havent posted any of my experiments yet but i hope to soon. I have a similar project but you can only draw thin straight lines. it lags like hell because its a 1mb file to acheive the same res as yours. thanks for showin me up :) seriously thanks.
Reply to this commentGood job guys!
Reply to this commentThis is not only a job. This is the fact that Macromedia, Adobe and other "for-media-software" producers does big suck. However about 80% of web-people still think that Internet == ie+flash…
Reply to this commentI love this experiment. It's a delight to play with and I can see real potential for serious artistic usage.
Reply to this comment