Show HN: Kiddo Paint

by vikrum • 11 years ago

162 49 11 years ago

vikrum8• 11 years ago

Hey HN — so, after finding a 15-30min block at the end of each day over the span of about a a month, this little side project is about done. I had a blast working on this with my kids acting as PMs :) I haven't tested it on non-OSX, and I imagine that the unicode/emoji support will be broken. I considered just including the OTF for those, but that's on order of ~40MB. Ideas welcome!

_pius• 11 years ago

This is awesome, nice work!

jlawton• 11 years ago

Don't let Bloomberg Magazine find this - they'll use it for all their covers!

Seriously though, this is a ton of fun!

ZenPsycho• 11 years ago

re: emoji you could try picking and choosing the svg's you need out of here:

https://commons.wikimedia.org/wiki/Emoji

gzipped by the server, they should come out pretty tiny compared to an OTF full of PNGs

deadbeef404• 11 years ago

The memories of KidPix have come flooding back! The is awesome! FYI: After a few minutes of using this, it seems to work quite well in Chrome on Ubuntu.

matt2000• 11 years ago

Very fun, thanks for making this and open sourcing as well. Maybe as our kids get older they can start checking out the source.

slig• 11 years ago

I loved it. Have you ever thought about adding a "replay" button? It'd clear the canvas and show, step by step, what the kid draw.

I've been building one similar, but for grown ups and I'm learning lots of cool stuff from your code. For instance, I just learned about `createPattern`. Thanks for sharing!

giancarlostoro• 11 years ago

That reminds me of that one program where you would pick a scene and make Spider Man do different things, I forgot the name of it. It was a lovely chunk of my childhood, and my adulthood if I ever find the disk... Found a link while googling it:

https://www.youtube.com/watch?v=2THuctqMXis

Of course featuring audio might be a slight bit more than this project is designed for, but it is still neat haha!

ohitsdom• 11 years ago

The explosion noise when clicking on the bomb is a nice touch :)

jasonjayr• 11 years ago

The original KidPix had that idea, an old drawing application that could desperately use a refresh to modern interfaces .....

vikrum8• 11 years ago

I actually got KidPix 1.0 running in a virtual machine— a handful of the "brushes" are as-faithful-as-I-could-make-them ports from KidPix! (including the skeleton and layout for Kiddo Paint) :) Fun fact: KidPix 1.0 was released into the public domain by the author; it was only subsequent versions that were commercial.

lucio• 11 years ago

very nice! I'll try it with my kid

ismail• 11 years ago

Nice. Will test it out. As a parent of a 3 year old & 15 month I find it amazing how quickly the pickup on things. I also belive we are witnessing the "app generation" growing up. We limit ipad time etc. But my daughter does not ask for TV. .. she asks for youtube/netflix.

jMyles• 11 years ago

On Ubuntu and Firefox, I can't seem to change the color.

joonoro• 11 years ago

This is great! I can definitely see one of the reasons why it works so well for kids: there aren't any weird menu buttons that you might accidentally press and get lost in. You just draw and push the buttons to see what difference they make.

vikrum8• 11 years ago

It's funny you mention that — the author of Kid Pix wrote about the motivation around his app and he specifically calls that out as well:

"I didn't want to use pull-down menus for this because, among other reasons, Ben had trouble with them. " [http://red-green-blue.com/kid-pix-the-early-years/]

I tried to stick to and follow as many of the directives he has listed with Kiddo Paint.

joegreen• 11 years ago

Windows + Firefox => looks like cars don't work - some icons are not visible and all of them are just creating rectangles in the picture http://snag.gy/4fm3H.jpg

vikrum8• 11 years ago

Thanks for the report & screenshot! What, in general, happens with other emoji on Windows? Namely, the Apple color emoji—is there an analogue that Windows users fall back to?

triangleman• 11 years ago

I'm a... Commander Salamander... with a thousand toes and and a pickle in my nose... AND... I float in the ocean!

edit: Draw me

azinman2• 11 years ago

Good job! I liked Kid Pix as a kid myself...big part of my childhood.

The other day I was thinking back to my school days when Apple's ImageWriter II's were everywhere, and people used Print Shop (I think?) to make banners all the time. Because of how the printing technology worked -- writing to a continuous stream of paper -- banners were easy to do. We had banners in many of our class rooms, birthday parties, etc. My guess is banners are just not done anymore, and it also seems like many of these kinds of creative tools aren't common place? Do kids even have printers? Anyone with kids care to chime in?

vikrum8• 11 years ago

I have many fond memories of Print Shop! I remember that program would also print "greeting cards" that you'd fold in quarters. The banners were a pre-birthday task that'd never get overlooked :)

It's interesting that an entire category of features fell by the wayside as a byprodct of the elimination of form-feed/perforated paper.

neovive• 11 years ago

I fondly remember Print Shop printing cards and banners on the Epson LX-80 dot matrix on the Apple IIe monochrome (green and black screen). Piecing a banner together these days from a series of 8x10 sheets is just not the same. :)

stevejohnson2• 11 years ago

I love the spirit of this, and I've been waiting for someone to make it for years, if I didn't get to it first!

If anyone wants to make a similar web app, I maintain an open source library whose sole purpose is putting JavaScript drawing programs on web pages with custom tools.

http://literallycanvas.com/

Here's a simple web app I made with it that saves to local storage and uploads to Dropbox and Imgur: http://drawplz.com

(The text tool is slightly broken right now; the selection box drag corners are invisible.)

ramaro• 11 years ago

Also relevant: a large, collaborative live painting: http://webcanvas.com/

tekromancr• 11 years ago

Oh, cool! I actually played with literally canvas a little while ago when I built this: http://tekromancr.github.io/drawchat/

I eventually decided to go with drawingboard, though I don't remember exactly why. But I was absolutely thinking about using literally canvas to build a kidpix-style webapp!

stevejohnson2• 11 years ago

I'd guess there was some kind of missing API. I've done a lot of work on the API over the past six months, so you might find it to be a lot better these days.

mmccaff2• 11 years ago

Well done! My train-obsessed 3 year old would approve of the stamp toolbar defaulting to a train.

A button to download the canvas as a png or jpg would be nice for saving and sharing special creations.

vikrum8• 11 years ago

Same with my kids! See also the draggable train tracks! :D

not at all obvious: keyboard, 's' to save/download :)

mmccaff2• 11 years ago

Ah, nice! :) The Github did mention that there was a handful of hidden features.

maaarghk• 11 years ago

I love it! Great work man. Feel like a kid again :)

chrisguilbeau• 11 years ago

Wow, so are we on the same wavelength or something? I made this a few weeks ago on JS fiddle with the idea of recreating kidpix. Even used unicode chars with a face for the undo!

https://jsfiddle.net/97vLt5dj/24/

zck• 11 years ago

Great -- the very first button I press (the frowning cat) cleared out my entire painting. And I have no idea how to get it back.

Clicking on every button shows that clicking the cat again brings it back. What does this cat actually do? Labels would be useful.

vikrum8• 11 years ago

Sorry! D:

That's the "oops" cat: 1 operation undo/redo.

machinelearning• 11 years ago

The bomb feature could very easily turn creative play time into a traumatizing event for a child. I second the labelling of the buttons. With that being said, amazing product!

bjackman• 11 years ago

Nice! Couple of things:

- Firefox on Ubuntu yields "TypeError: t.srcElement is undefined" when I try to change the colour.

- I don't have any fonts for some of the icons in the buttons (e.g. the arrow). Seeing as you're presumably already loading the textures for drawing onto the canvas, you might as well just use an image for the buttons too.

Hope this helps.

vikrum8• 11 years ago

Thanks for the report; I have screenshots from others and will take a look at fixes shortly. Cheers!

ninjakeyboard• 11 years ago

This is damn fun.

sumo2• 11 years ago

We had the same idea but wanted to go much much further. You should really try it out, its called Collusion. https://col.lu/ You have to sign up but it keeps your drawings like google docs and is real-time collaborative without the other people signing up.

Works on everything too, tablets, laptops, supports ms surface etc and is free for public drawings.

The explore page on our website also shows you what others have drawn so also check that out. https://collusionapp.com/explore

ocdtrekkie2• 11 years ago

I don't know if I'd say it's really the same. There's tons of drawing apps, but this is much more of a nostalgic thing, and it's for kids.

Also, it's open source, which is a huge draw. (I'm going to be porting it to a web platform... probably tonight, I'm excited.)

sumo2• 11 years ago

Depends what you mean by kids, but actually we did a lot of work with schools and the kids love it.

ocdtrekkie2• 11 years ago

I love the heck out of this.

kbenson• 11 years ago

It's worth mentioning TuxPaint[1], which has been around for over a decade. That said, well done! There's no reason we shouldn't have plenty of choices for free and open source childrens software.

1: http://www.tuxpaint.org/

pbhjpbhj• 11 years ago

I've never heard of KidPix before but KiddoPaint seems like a web based less colourful TuxPaint - always loved the sound effects, the kids liked them too.

sanoli• 11 years ago

Sorry for asking here, but does anybody know of a web page where you get to see someone's drawing and then you write a caption for it, then someone else will have the caption open on their monitor and they get to draw it, and on and on? It was fun! Then I lost the URL...

Camillo• 11 years ago

The pencil sputters individual squares when you click and drag the mouse. It should draw a continuous line instead.

rglover• 11 years ago

Fantastic. So many hours spent in MS Paint and friends when I was younger. Firing up your demo site made me feel like a kid again.

Great idea :)

leviathan• 11 years ago

Nice. This would actually make for a nice iPad app.

chdir• 11 years ago

15-30min block at the end of each day over the span of about a month

Admire your speed ! It's a fun app with lots of nifty features.

mambodog• 11 years ago

If you'd like a flashback of the original Kid Pix: https://jamesfriend.com.au/pce-js/

Show HN: Kiddo Paint

Related Stories