7 ms·

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

39 points by magichacker 16y ago

magichacker 16y ago
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.
- callahad 16y ago
  Neat! You've got a bug with painting along the horizontal edges -- the brush wraps around to the other side, Pac-Man style.
  - magichacker 16y ago
    hey, it's a "magic" pic. ok, u r right, it's a bug, will fix.
  - ericz 16y ago
    I thought it was a cool feature, a la snake games
user24 16y ago
Seems really laggy to me, Fx3.6.12/mac Great idea though. How do you do the edge detection? Sounds like a neat feature.
- leif 16y ago
  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.
  - showerst 16y ago
    I've found firebug's profiler to be quite useful: http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii http://michaelsync.net/2007/09/10/firebug-tutorial-logging-p...
  - magichacker 16y ago
    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.
    - deleted 16y ago
      [deleted]
    - magichacker 16y ago
      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.
      - leif 16y ago
        It's now fast for a few seconds, then gets slow shortly after the footer loads.
        magichacker 16y ago
        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.
- magichacker 16y ago
  hi, i started of here http://developer.apple.com/safaridemos/CanvasPixelManipulation/ 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.
beej71 16y ago
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.
- magichacker 16y ago
  hi, thx for inputs. first i will look into > portions of the canvases that have been changed to make it faster for FF
  - beej71 16y ago
    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/ 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.)
betageek 16y ago
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?
- davethewave 16y ago
  amen - and it's slower than a apple II
alexyoung 16y ago
What do you mean, for kids? I just spent 15 minutes colouring these in and hitting refresh...
- alphabeat 16y ago
  There are more than one?! I'm going back.
tholmes 16y ago
It starts to lag up really badly if you go over the top edge.

39 points by magichacker 16y ago

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.

callahad 16y ago
Neat! You've got a bug with painting along the horizontal edges -- the brush wraps around to the other side, Pac-Man style.
- magichacker 16y ago
  hey, it's a "magic" pic. ok, u r right, it's a bug, will fix.
- ericz 16y ago
  I thought it was a cool feature, a la snake games

user24 16y ago

Seems really laggy to me, Fx3.6.12/mac Great idea though. How do you do the edge detection? Sounds like a neat feature.

leif 16y ago
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.
- showerst 16y ago
  I've found firebug's profiler to be quite useful: http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii http://michaelsync.net/2007/09/10/firebug-tutorial-logging-p...
- magichacker 16y ago
  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.
  - deleted 16y ago
    [deleted]
  - magichacker 16y ago
    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.
    - leif 16y ago
      It's now fast for a few seconds, then gets slow shortly after the footer loads.
      - magichacker 16y ago
        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.
magichacker 16y ago
hi, i started of here http://developer.apple.com/safaridemos/CanvasPixelManipulation/ 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.

beej71 16y ago

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.

magichacker 16y ago
hi, thx for inputs. first i will look into > portions of the canvases that have been changed to make it faster for FF
- beej71 16y ago
  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/ 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.)

betageek 16y ago

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?

davethewave 16y ago
amen - and it's slower than a apple II

alexyoung 16y ago

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

alphabeat 16y ago
There are more than one?! I'm going back.

tholmes 16y ago

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