0

I'm have a square icon, dimmed by a black mask. There should be a number of dots on top of this mask, of various colors. These dots are of addative color, so when on top of eachtother, they brighten. In combination, enough of these these would turn the black mask multicolored or even white, revealing the image underneath.

How could this be done? Client-side, with canvas or css3? Server-side, with ImageMagick or something else?

Here's a link to additive color on canvas: http://contrapunctus.net/blog/2010/rgb-demo

Phrogz
  • 271,922
  • 98
  • 616
  • 693
Peter Ehrlich
  • 6,586
  • 4
  • 44
  • 58
  • It could be done "with code". Everything you listed is a possibility. Have you tried anything? What's your question, or are you asking someone to write it for you? – Phrogz Apr 25 '12 at 05:57
  • Sorry, I could've been specific. I've never used canvas before, and am looking for someone to show me the api method necessary - rather than having to run around trying first one thing, then another.. – Peter Ehrlich Apr 25 '12 at 13:12

1 Answers1

1

HTML5 Canvas + Context Blender + screen mode.

Or, as you linked, using additive global composite mode.

Or using ImageMagick.

Or using ChunkyPNG along with addition.

Phrogz
  • 271,922
  • 98
  • 616
  • 693
  • After playing with photoshop, I think I need to make a white layer with subtractive composting. This would color the image black. In spots where this over-layer is darkened, the image shows through. So then the dots need to darken eachother instead of lighten, and be inverted from the color desired. – Peter Ehrlich Apr 25 '12 at 15:35
  • I'm having trouble using context blender-- the overlay always appears below the image canvas, and I don't know why. You can see the source, but it won't run due to cross domain issues: http://jsfiddle.net/pehrlich/a47bD/2/ – Peter Ehrlich Apr 25 '12 at 16:57
  • @Peter Pare it down. Make a reproducible test case that has the absolute minimum amount of code necessary to show the problem. Make it actually run on JSFiddle. If you can delete HTML, CSS, or JS and the problem exists, you haven't fully pared it down. Either you'll have your "ah-HA!" moment in the process, or you'll end up with something that I can actually help you with. What you've pasted right now isn't even legal JavaScript, let alone working code showing the problem. – Phrogz Apr 25 '12 at 17:03
  • Here is a working fiddle (converted to js from coffee), the blue adds with the photo: http://jsfiddle.net/pehrlich/a47bD/3/ Here is a hosted version, with the same code, copy and pasted. The blue goes behind the photo: http://minthatheater.com/canvas.html – Peter Ehrlich Apr 25 '12 at 18:41
  • Here's a simpler, modified version of your first fiddle, that works for me in Chrome: http://jsfiddle.net/a47bD/4/. I'll have to do extra work to see what your hosted version is doing differently. – Phrogz Apr 25 '12 at 18:51
  • 1
    In short, you need to [wait until the data-url is ready](http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-dataurl-be-available-immediately). If you change your last line of code to `setTimeout(function(){ ocontext.blendOnto(ucontext,'add')},5000)` it works correctly, while a delay of 1ms sometimes works and sometimes fails. If you wrap your code in `$('#image1').bind('load',function(){ ... });` it always works. – Phrogz Apr 25 '12 at 18:58
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10515/discussion-between-peter-ehrlich-and-phrogz) – Peter Ehrlich Apr 25 '12 at 19:20