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.
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.
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.
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.
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.
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. :-)
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
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.
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!
93 comments
[ 5.0 ms ] story [ 171 ms ] threadBut 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).
But I guess if you hadn't used kid pix you might not know that.
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.
yeah, I don't remember the stamps repeating as quickly on the original but otherwise this seems pretty right on.
repo here: https://github.com/vikrum/kidpix
I love rollup, uglify-js, etc. for this kind of thing: just concatenate all the modules into one JS file and ship it as-is.
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.
https://kiddopaint.com
https://github.com/vikrum/kiddopaint vs https://github.com/vikrum/kidpix
I hope everyone is having as much fun with it as I had in making it!
https://archive.org/details/KID_PIX_DOS
They also host downloadable later versions of KidPix but AFAIK those are not playable in the browser.
I was the best at it, because I learned the tooling to make the most rainbow. I'm sad to say I don't remember my workflow.
On iOS.
Next do Spider-man Cartoon Maker ;)
These days, I'd be wary of putting "kid pix" into google search to relive my memories.
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.
Really though, similar story here: my dad brought back an LC III and Color StyleWriter 2400, and before long I was drawing rocket ships and poo.
I realised that my pictures looked better in LogoWriter than drawn freehand in Kid Pix. And now I ended up writing software!
Depends on the monitor; I think ones existed with anywhere from 1-8 bits.
Here's some other retrospective from recent:
The creative legacy of Kid Pix https://news.ycombinator.com/item?id=27563615
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.
source: https://github.com/vikrum/kidpix