I was doing research for something else and found this great anecdote about Kid Pix that I've saved.
"Other product teams do not have the time or resources to work with children as often. In the case of Kid Pix, when it was first released back in 1989, Borderbund sponsored their first Kid's Day. It was a weekend testing day for 20 children to try out Kid Pix. Developers offered their testers cookies for a break and a crafts table with paper, glue, glitter, etc.--just in case the testers got bored. According to Broderbund employees, few cookies were eaten and almost none of the crafts were used. It was determined that Kid Pix would be a hit (Druin and Solomon 1996)."
I must have been 6 years old. My dad came home with a computer that they were getting rid of at his work. He set it up that night and, having never seen a computer, I wanted to play with it. Well, for some reason, it had Kid Pix installed. I remember drawing something with a couple of green lines and a few rabbit stamps for good measure. As I recall, I then insisted that we had to print it and wouldn’t take no for an answer.
Nice, good to see some plain old JS for once (not even minified either). No heavy UI framework(s). The entire app loads in like 150kb of network transfers. Great work!
Setting `canvas.width` clears the canvas and resets all canvas state (stroke styles, transformations, etc...)
As far as I know, setting `canvas.height` is unnecessary.
Also as far as I know, using `ctx.clearRect` is faster, though it's possible the author wants to reset that other canvas state as well (which `clearRect` won't do), or it's possible there's some older browser incompatibility I don't know about that the author wants to avoid.
Edit: it looks like the author is also calling `clearRect`? Maybe there's some browser behavior I don't know about, but as far as I think this code is unnecessary. You don't need to do both things.
It's by Jeffrey Alan Scudder aka Whistlegraph aka HN's own justanothersys. His fantastic No Paint (very much in the spirit of Kid Pix) was discussed here a ~year ago:
I'm not quite as old as the average HN user so I started with I think kidpix 3 which had a wider variety of undo sounds which I can still remember perfectly despite not touching the program for about 14 years.
OK I had fun with this with my young one, but why is it so hard to start with a blank canvas? Can't figure out how to start with a blank slate.
But even more annoying is that it uses localStorage for what you've created. To completely start over, I had to run localStorage.clear(); in the console.
This is a lot of fun, but a couple of small tweaks would make it a lot better (or easier to figure out).
The nostalgia of the explosion is too much for me this morning.
I remember everyone in the computer lab always never actually drawing stuff and mostly just clicking the dynamite to get as many explosions on the screen as possible.
I recall the speed of the explosions being CPU dependent. When we got a new family computer in the late '90s I recall the explosion going from taking several seconds to happening almost instantly. 7 year old me thought this was hilarious for some reason.
Same experience as winning Windows Solitaire on a Pentium for the first time and watching the cards instantly fall to the bottom. I was considerably older than 7 at the time and I still laughed.
Not sure if it is a bug or intentional - If you dynamite, ctrl, dynamite, ctrl quickly so that both animations are still going the screen still clears.
Yep, the sum of six Math.random() will start to look a bit like a normal distribution, while Math.random()*6 will stay flat.
Even crazier: the sum of six (Math.random()>.5)?0:1 will also look a bit like a normal distribution, rather than just 0 50% of the time and 6 50% of the time.
Central Limit Theorem eats distributions of all shapes and sizes and shits gaussians. That's why you see normal distributions everywhere.
This was in the early/mid 90s or so I'd hazard to guess. I've only seen it on PCs.
It was often the most fun application in an elementary school's computer lab. As far as I know it was never officially bundled or anything, but just a popular program. I also had it on my computers at home because both my parents were in graphic design and used Corel Draw for work, and my dad was a bit of a computer geek.
I was born in 1998 and every school PC had a version of kidpix installed (v3 I think) despite it being quite old at the time. I have a vague memory of kidpix being used to teach the basics of computing like how to save a file to the file hierarchy and then how to print it.
Interesting. The go-to was MS Paint that I ever saw, because of course it was already included. My side point was also thought that I've never even heard people mention Kid Pix until now. But have heard about other legendary things like Printshop etc etc
I remember myself back in elementary school making games with this. I'd paint up a scene, stamp some art and then cover the stamp. I'd then have my friend guess as to where the stamp was in the scene and we'd undo or "oh no" the cover away... great memories!
I like it. I think it's missing the option to increase the stamp sizes though?
What I really liked about Kid Pix was the ability to make animations through the slideshow mode. You could put together up to 100 pictures in a slideshow and set the time per slide to < 1 second to create animations.
On the “star” icon-paintbrush thingie, there was one or two glyphs that just render as slightly rounded big black squares, which I’m pretty sure is a result of the glyph (font?) not loading properly for whatever reason.
Thank you so much for making this! The sound effects take me back. I've been hoping to find something like this for my daughter to experience a fun paint program like I had.
I bought KidPix for my kids when they were very little in the late 90s and they really liked it. I found it to be a rich application that was great for exploring and easy to figure out.
I was determined to give my kids good exposure to computers growing up, something I missed out on because home microcomputers weren't a thing, and then when they were, they were too expensive.
Yea, grew up on B/W Kidpix. In this JS clone, some of the effects are also less pixelated, especially the fractals / mandalas. "Broken Glass" and "Wrap Around" gives me errors as well. It's not 100% perfect clone but it's amazing and the code is beautiful, performant, concise vanilla JS.
You can add the CSS rule "filter: grayscale(100)" to the body if it helps. I have no idea how black and white monitors worked though, I would guess they'd have less than 8 bits of brightness info?
It allows to see. I just tested on chrome dev tools. What it does not to is set the filling as it worked on the original app. Anyways, really nice memories. I was a child (6 yo) when I first touched those. Thanks for the hint to play with CSS. :-)
This is awesome, but the aspect ratio/scaling is kind of weird on my Chromebook, which admittedly does have a smaller than usual screen. To have the left side toolbar fully showing so that I don't need to constantly scroll up and down when making art, I need to zoom allll the way out to only the 33% zoom level.
"Other product teams do not have the time or resources to work with children as often. In the case of Kid Pix, when it was first released back in 1989, Borderbund sponsored their first Kid's Day. It was a weekend testing day for 20 children to try out Kid Pix. Developers offered their testers cookies for a break and a crafts table with paper, glue, glitter, etc.--just in case the testers got bored. According to Broderbund employees, few cookies were eaten and almost none of the crafts were used. It was determined that Kid Pix would be a hit (Druin and Solomon 1996)."