Kid Pix as a JavaScript App(kidpix.app)
kidpix.app
Kid Pix as a JavaScript App
https://kidpix.app/
93 comments
Oh man this brings back 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.
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.
You had colour! Back in my day... ;-)
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!
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!
BTW I love this code: https://kidpix.app/js/app.js
repo here: https://github.com/vikrum/kidpix
repo here: https://github.com/vikrum/kidpix
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!
I miss writing JS like this. I was complaining to my manager earlier how I get frustrated by react sometimes.
What? You mean 100MB of libraries is somehow a bad thing?
What do these 2 lines do?
canvas.width = canvas.width;
canvas.height = canvas.height;
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.
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.
Yup. That's a well organized project right there. Very easy to find the exact code doing whatever it is you want.
[deleted]
Has anyone had any luck using this classic style of JS namespacing in a way where their editor understands it when populating code completion?
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.
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.
Wow, it is good code. So simple that the author is either very new, or very experienced. (I would guess the latter).
There's a beautiful mini documentary with Craig Hickman, the creator of Kid Pix, here:
https://www.youtube.com/watch?v=csalhuSixQU
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:
https://news.ycombinator.com/item?id=23546706
https://www.youtube.com/watch?v=csalhuSixQU
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:
https://news.ycombinator.com/item?id=23546706
The Oh No sound that plays with undo has lived rent free in my head for 20years now.
This is exactly the first thing I went for. I cannot believe how immensely gratifying it is to hear that sound once again.
That sound gave me some heavy nostalgia.
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.
The voice of Joseph Joestar going "Oh No!" etc. when JJBA became extremely popular totally reminded me of kidpix.
For me it was the "Oops" but same.
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).
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).
gotta hit the eraser and use the dynamite!
But I guess if you hadn't used kid pix you might not know that.
But I guess if you hadn't used kid pix you might not know that.
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 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.
Was there any other use for Kid Pix? I thought that was all there was to do back when I was in elementary school.
oh no!
yeah, I don't remember the stamps repeating as quickly on the original but otherwise this seems pretty right on.
yeah, I don't remember the stamps repeating as quickly on the original but otherwise this seems pretty right on.
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.
unfortunately I can't seem to freeze the dynamite.
yeah I seem to remember being able to make it stay on the screen if you start another action.
Wow. I sometimes think about this program from elementary school. It is amazing to use it again.
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.
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.
Anyone think they can explain this in the source code?
function ziggurat() { return ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3) / 3; }
https://github.com/vikrum/kidpix/blob/9385acf5b3f57cdc8c5b3f...
function ziggurat() { return ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3) / 3; }
https://github.com/vikrum/kidpix/blob/9385acf5b3f57cdc8c5b3f...
Looks like a way to purposefully create a biased (center-weighted) random number generator out of multiple calls.
Mathematically is the sum of six Math.random() any different than (Math.random() * 6)?
Yeah, it will biased towards the center of the range rather than uniformly distributed
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.
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.
Ohh okay. I see it now.
This is like how two D6 dice roll differently than a D12?
This is like how two D6 dice roll differently than a D12?
[deleted]
Is it weird that I feel like I've never heard of this app? I mean, I was around late 80s/90s but I dunno....what platform/years are the core of this?
Here's some other retrospective from recent:
The creative legacy of Kid Pix https://news.ycombinator.com/item?id=27563615
Here's some other retrospective from recent:
The creative legacy of Kid Pix https://news.ycombinator.com/item?id=27563615
ohhh, was it mainly a Mac thing? PC-focus over here. Still think I would have heard of it
It was on the Windows desktops in my schools.
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.
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.
"Where is the dynamite" was the first thought I had.
I wonder if hiding it under the eraser secondary menu was an intentional way to get kids to talk with each other and share the "secret."
For those unfamiliar (like me) "Kid Pix Roundup" by Cathode Ray Dude: https://www.youtube.com/watch?v=NK6-ZSaBzjc
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!
Back in middle school we had this version in the MacLab. I think the firecracker delete tool was the most popular feature.
Relive the magic of KP Studio, Studio Deluxe and Deluxe 3 with this Kid Pix Roundup video https://youtu.be/NK6-ZSaBzjc
I used to enjoy this application as a kid.
These days, I'd be wary of putting "kid pix" into google search to relive my memories.
These days, I'd be wary of putting "kid pix" into google search to relive my memories.
I had never heard of this application and I thought it must have been some "instagram for kids" type thing
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.
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.
> I think it's missing the option to increase the stamp sizes though?
Holding Shift doubles the stamp size. I think this is accurate to the original implementation.
> What I really liked about Kid Pix was the ability to make animations through the slideshow mode.
That must have been in a later version. I don't remember that existing.
Holding Shift doubles the stamp size. I think this is accurate to the original implementation.
> What I really liked about Kid Pix was the ability to make animations through the slideshow mode.
That must have been in a later version. I don't remember that existing.
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.
On iOS.
On iOS.
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.
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.
Wow! Many many many memories from the past. The bad part is I only used on Black/White Display in the past and now is in colors
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?
> I have no idea how black and white monitors worked though, I would guess they'd have less than 8 bits of brightness info?
Depends on the monitor; I think ones existed with anywhere from 1-8 bits.
Depends on the monitor; I think ones existed with anywhere from 1-8 bits.
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.
Related/unrelated discussion about another kids drawing experience, but this time on a console system: Mario Paint
https://news.ycombinator.com/item?id=28065357
further discussion less than a day ago: https://news.ycombinator.com/item?id=28069588
Trying to figure out why the hn post screen didn’t flag this for me, I’m usually pretty religious about amplifying existing posts and not reposting.
This made me smile. I loved this as a kid.
Next do Spider-man Cartoon Maker ;)
Next do Spider-man Cartoon Maker ;)
This brings back great memories. This program is how I learned how to use a computer back in elementary school, on our colorful iMacs. Love it
A similar project:
https://kiddopaint.com
https://kiddopaint.com
There's also KidPix 1.0 for DOS available (and playable online through an emulator) at the Internet Archive:
https://archive.org/details/KID_PIX_DOS
They also host downloadable later versions of KidPix but AFAIK those are not playable in the browser.
https://archive.org/details/KID_PIX_DOS
They also host downloadable later versions of KidPix but AFAIK those are not playable in the browser.
Looks like an earlier version of this by the same author.
https://github.com/vikrum/kiddopaint vs https://github.com/vikrum/kidpix
https://github.com/vikrum/kiddopaint vs https://github.com/vikrum/kidpix
Good catch! Yep, I forked my old paint app. It didn't have any animations, sound handling, etc.
I hope everyone is having as much fun with it as I had in making it!
I hope everyone is having as much fun with it as I had in making it!
I'm guessing the new name is a trademark lawsuit waiting to happen. From what I read on Wikipedia, it doesn't look like Kid Pix is abandonware.
Source code also is all about KiddoPaint: https://kidpix.app/js/app.js
Wow! I remember Kid Pix! The Wacky Brush implementation is excellent!!
This is awesome walk down memory lane thanks for sharing
love this ! so much fun with kid pix ! thanks a LOT !!
what is the legality of this website? I don't see anything indicating that it's an official port.
>JS Kid Pix / Kid Pix 1.0 was released in to the public domain and this is an HTML/JS reimplementation.
source: https://github.com/vikrum/kidpix
source: https://github.com/vikrum/kidpix
Thank you so much!
[deleted]
Rx
2nd t
[deleted]
"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)."