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!
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.
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!
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:
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.
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.
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.
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
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?
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?
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.
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. :)
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.
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!
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.
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!
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!
- 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.
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.
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.
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.
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...
49 comments
[ 3.6 ms ] story [ 120 ms ] threadSeriously though, this is a ton of fun!
https://commons.wikimedia.org/wiki/Emoji
gzipped by the server, they should come out pretty tiny compared to an OTF full of PNGs
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!
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!
"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.
edit: Draw me
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?
It's interesting that an entire category of features fell by the wayside as a byprodct of the elimination of form-feed/perforated paper.
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.)
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!
A button to download the canvas as a png or jpg would be nice for saving and sharing special creations.
not at all obvious: keyboard, 's' to save/download :)
https://jsfiddle.net/97vLt5dj/24/
Clicking on every button shows that clicking the cat again brings it back. What does this cat actually do? Labels would be useful.
That's the "oops" cat: 1 operation undo/redo.
- 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.
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
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.)
1: http://www.tuxpaint.org/
Great idea :)
Admire your speed ! It's a fun app with lots of nifty features.