"Magic" color pics for kids done with canvas + jquery | Hacker News Reader

"Magic" color pics for kids done with canvas + jquery

barbafan.de

39 pointsmagichacker20 comments

ok, basically it takes an image, converts it to a canvas, saves that canvas data, detects the edges of the image in the canvas, outlines the edges in black-and-white, saves that black-and-white canvas data, too, adds an event handler that onmousemove (iPad: ontouchmove) substitutes a circular region of the "outlined edges canvas data" with the "original image" canvas data - puuhh - that's all. hope you like it.

Neat! You've got a bug with painting along the horizontal edges -- the brush wraps around to the other side, Pac-Man style.

I thought it was a cool feature, a la snake games

hey, it's a "magic" pic. ok, u r right, it's a bug, will fix.

What do you mean, for kids? I just spent 15 minutes colouring these in and hitting refresh...

There are more than one?! I'm going back.

I have a modest proposal that might also work.

Four canvases:

1. BW (inited from Color) 2. Color (color source image) 3. Paint (inited transparent) 4. Temp (inited transparent)

Each mouse move:

1. Draw an opaque white line on Paint to the new position 2. Copy Paint to Temp 3. Set the globalCompositeOperation to "source-in" 4. Draw Color to Temp 5. Set the globalCompositeOperation to "source-over" 6. Draw Temp to BW

I haven't tried it, but I think it should work (or something like it with the flaws corrected :) ). One advantage is that you can use the path line drawing primitives on the canvas instead of rolling your own.

You could also optimize a bit by only drawing the portions of the canvases that have been changed, but it really should be plenty fast as-is.

hi, thx for inputs. first i will look into > portions of the canvases that have been changed to make it faster for FF

I did some messing around with it... source-over doesn't seem to work right with Firefox for me. Used source-atop instead.

http://beej.us/x/scratcher/

(In that demo, the B&W image is pre-made--I don't do your cool in-canvas edge detection, but the drawing stuff should still apply.)

Seems really laggy to me, Fx3.6.12/mac

Great idea though. How do you do the edge detection? Sounds like a neat feature.

Laggy here too. Same FF build, on ubuntu. Fast in chromium. Sidenote, does anyone know of a good JS profiler?

Edge detection is easy, especially on images with small numbers of colors in large swaths.

I've found firebug's profiler to be quite useful:

http://michaelsync.net/2007/09/10/firebug-tutorial-logging-p...

hi, u r right - not really performant in FF, developed/tested it on chrome, safari and iPad safari (which my kids love, it's mostly coded for them) so far .. will look into FF and make some performance enhancements.

i commented out a console.log(touch.pageX); and now the performance in FF seems to be much more smoother? can it be? it did not even get executed? strange.

It's now fast for a few seconds, then gets slow shortly after the footer loads.

after a long hard fight i made it faster (overall but especially in FF) .... the CanvasPixelArray Object (which is not an Array in Webkit ....) is a real bastard.

hi, i started of here http://developer.apple.com/safaridemos/CanvasPixelManipulati... (look into the sourecode) but tuned the internal edge detection parameters to work better with children book covers. said that, i came across a lot of ... potential within these algorithms to make them way cooler. will probably work on them during another rainy weekend.

Is any basic piece of interactivity done in canvas/html5/something-not-flash worthy of an upvote?!? Do we have to go through seeing every bit of graphics code anyone ever ran on an Apple II get ported to HTML5?

amen - and it's slower than a apple II

It starts to lag up really badly if you go over the top edge.

Reply on news.ycombinator.com