[HN Gopher] Kid Pix as a JavaScript App
___________________________________________________________________
Kid Pix as a JavaScript App
Author : Evansbee
Score : 334 points
Date : 2021-08-05 13:23 UTC (9 hours ago)
(HTM) web link (kidpix.app)
(TXT) w3m dump (kidpix.app)
| IggleSniggle wrote:
| 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.
| graderjs wrote:
| BTW I love this code: https://kidpix.app/js/app.js
|
| repo here: https://github.com/vikrum/kidpix
| amatecha wrote:
| 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!
| function_seven wrote:
| What do these 2 lines do? canvas.width =
| canvas.width; canvas.height = canvas.height;
|
| Workaround for some weird DOM issue?
| danShumway wrote:
| 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._
| kilroy123 wrote:
| I miss writing JS like this. I was complaining to my manager
| earlier how I get frustrated by react sometimes.
| seph-reed wrote:
| Yup. That's a well organized project right there. Very easy to
| find the exact code doing whatever it is you want.
| [deleted]
| Waterluvian wrote:
| 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.
| ct520 wrote:
| This is awesome walk down memory lane thanks for sharing
| scottrogowski wrote:
| 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.
| peterburkimsher wrote:
| 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!
| TheSpiciestDev wrote:
| 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!
| Waterluvian wrote:
| 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...
| everfree wrote:
| Looks like a way to purposefully create a biased (center-
| weighted) random number generator out of multiple calls.
| Waterluvian wrote:
| Mathematically is the sum of six Math.random() any different
| than (Math.random() * 6)?
| jjoonathan wrote:
| 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.
| Waterluvian wrote:
| Ohh okay. I see it now.
|
| This is like how two D6 dice roll differently than a D12?
| [deleted]
| russellsprouts wrote:
| Yeah, it will biased towards the center of the range rather
| than uniformly distributed
| skocznymroczny wrote:
| 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.
| chana_masala wrote:
| I had never heard of this application and I thought it must
| have been some "instagram for kids" type thing
| arthurcolle wrote:
| oh no!
| ggoo wrote:
| oops!
| Octopodes wrote:
| what is the legality of this website? I don't see anything
| indicating that it's an official port.
| opan wrote:
| >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
| todd3834 wrote:
| 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.
| MrKristopher wrote:
| 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.
| duskwuff wrote:
| > 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.
| rasz wrote:
| For those unfamiliar (like me) "Kid Pix Roundup" by Cathode Ray
| Dude: https://www.youtube.com/watch?v=NK6-ZSaBzjc
| pietromenna wrote:
| 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
| hjek wrote:
| 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.
| [deleted]
| ChrisArchitect wrote:
| further discussion less than a day ago:
| https://news.ycombinator.com/item?id=28069588
| ChrisArchitect wrote:
| 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
| acoard wrote:
| 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.
| ChrisArchitect wrote:
| ohhh, was it mainly a Mac thing? PC-focus over here. Still
| think I would have heard of it
| 1--6zVa-E wrote:
| It was on the Windows desktops in my schools.
| ChrisArchitect wrote:
| 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
| jojo2000 wrote:
| love this ! so much fun with kid pix ! thanks a LOT !!
| gregsadetsky wrote:
| 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
| animal_spirits wrote:
| 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
| [deleted]
| jdofaz wrote:
| Back in middle school we had this version in the MacLab. I think
| the firecracker delete tool was the most popular feature.
| sacha_inchi wrote:
| Thank you so much!
| jamesgreenleaf wrote:
| This made me smile. I loved this as a kid.
|
| Next do Spider-man Cartoon Maker ;)
| neovive wrote:
| Wow! I remember Kid Pix! The Wacky Brush implementation is
| excellent!!
| WoodenChair wrote:
| A similar project:
|
| https://kiddopaint.com
| hoppyhoppy2 wrote:
| 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.
| alexives wrote:
| Looks like an earlier version of this by the same author.
|
| https://github.com/vikrum/kiddopaint vs
| https://github.com/vikrum/kidpix
| vikrum wrote:
| 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!
| mwcampbell wrote:
| 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.
| mgarciaisaia wrote:
| Source code also is all about KiddoPaint:
| https://kidpix.app/js/app.js
| TeaVMFan wrote:
| 2nd t
| trutannus wrote:
| "Where is the dynamite" was the first thought I had.
| jjoonathan wrote:
| 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."
| dexwiz wrote:
| The Oh No sound that plays with undo has lived rent free in my
| head for 20years now.
| blululu wrote:
| This is exactly the first thing I went for. I cannot believe
| how immensely gratifying it is to hear that sound once again.
| jamil7 wrote:
| That sound gave me some heavy nostalgia.
| ChrisArchitect wrote:
| Related/unrelated discussion about another kids drawing
| experience, but this time on a console system: Mario Paint
| https://news.ycombinator.com/item?id=28065357
| TeaVMFan wrote:
| Rx
| spywaregorilla wrote:
| 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.
| strict9 wrote:
| 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).
| wombat-man wrote:
| gotta hit the eraser and use the dynamite!
|
| But I guess if you hadn't used kid pix you might not know that.
| Avshalom wrote:
| unfortunately I can't seem to freeze the dynamite.
| nkingsy wrote:
| yeah I seem to remember being able to make it stay on the
| screen if you start another action.
| vikrum wrote:
| [edit] - Give it a try now; press ctrl during the
| animation to stop it.
| Avshalom wrote:
| WHEEEE!
| clarle wrote:
| 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.
| BeFlatXIII wrote:
| Was there any other use for Kid Pix? I thought that was all
| there was to do back when I was in elementary school.
| wombat-man wrote:
| oh no!
|
| yeah, I don't remember the stamps repeating as quickly on
| the original but otherwise this seems pretty right on.
| babypuncher wrote:
| 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.
| ksenzee wrote:
| 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.
| pininja wrote:
| Relive the magic of KP Studio, Studio Deluxe and Deluxe 3 with
| this Kid Pix Roundup video https://youtu.be/NK6-ZSaBzjc
| coldcode wrote:
| Many times I have wanted the Oh No! undo and the Dynamite in my
| IDE.
| hjek wrote:
| Now I wanna find out if I add those sounds to `u` and `ggdG` in
| vim.
___________________________________________________________________
(page generated 2021-08-05 23:00 UTC)