-1

I'm creating a planning tool for a game. Imagine two 2D static gun emplacements with different ranges and damage per second. I want to draw these ranges with different colours according to damage, in a scale similar to this http://www.celtrio.com/support/documentation/coverazone/2.1.0/ui.viewmode.heatmapcolorscale.html

I got that part working with CSS border radiuses. My problem is that if ranges overlap, the overlapping area doesn't show the combined damage.

I found heatmap.js http://www.patrick-wied.at/static/heatmapjs/ but it doesn't allow you to set a different radius for each point. I also can't find a way to turn off the gradient... the damage of these guns at its maximum range is the same at its minimum range. I realise that's sort of the point of a heatmap normally haha but I'm not too sure what I should be googling.

I had a think about a PHP solution which would create a greyscale image using varying levels of opacity to represent different damage. I'd then loop through all the pixels and recolour them according to the scale. But that would be far too slow. It needs to update in as close to realtime as possible as the user drags the guns around the screen.

There's probably a very simple way to do this, a CSS filter maybe, but I can't find anything. Any ideas? Thanks!

rjdown
  • 9,162
  • 3
  • 32
  • 45
  • You can set opacity with css as well. You can even do an opacity gradient - that would solve your problem. See here: http://stackoverflow.com/questions/2293910/css3-transparency-gradient – Benubird Jun 06 '13 at 13:23
  • That would just combine the colours. I need to show a potentially completely different colour. – rjdown Jun 06 '13 at 13:31
  • Wouldn't combining the colours (usually) show a completely different colour? – Michael Todd Jun 06 '13 at 14:23
  • Sure, but the wrong colour. For example, if the scale went like this: 2 = red, 3= yellow, 4 = green, 5 = blue... 2 + 3 would show as orange instead of blue – rjdown Jun 07 '13 at 14:20

2 Answers2

2

CSS is the wrong tool for this job -- you really ought to be doing stuff like this using SVG or Canvas. It'll be a lot easier to achieve complex graphical effects using a proper graphics system than trying to hack it with shapes created in CSS.

For example, in SVG, you would simply need to use the fill feature to fill each area with whatever colour you wanted. See an example SVG image here. It's an SVG Venn diagram where the overlap areas are completely different colours to the parent circles. Canvas has similar functionality.

You might also want to consider using a Javascript library such as RaphaelJS or PaperJS to help you with this. (using Canvas would imply that you're using some Javascript anyway, and it will make SVG easier to work with too).

However if you must do it using CSS, if you want elements to show through so the colours are merged when they overlay each other, then you'll want to use some sort of opacity effect.

Either opacity:0.5 or an rgba colour for the background.

That's as good as you'll get with CSS; you won't be able to get arbitrary colours in the overlap portions; just a combination of colours from the layered opacity effects.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • That would just combine the colours. I need to show a potentially completely different colour. Do you know how I can do this with Canvas / SVG? – rjdown Jun 06 '13 at 13:32
  • Yes, that can definitely be done in Canvas or SVG. And definitely not using CSS (at least not in a sane or useful way; I'm sure someone could work out a way to hack it). It's simply a matter of using SVG's `fill` feature. [Here's an example](https://upload.wikimedia.org/wikipedia/commons/d/df/VennDiagram.svg) (you should see a venn diagram; view source to see the SVG code) – Spudley Jun 06 '13 at 13:43
  • @rjdown - edited the answer to cover more detail, including the points in the comments above. – Spudley Jun 06 '13 at 13:51
  • Thanks, I'm looking into SVG now. – rjdown Jun 07 '13 at 14:21
1

If you look at the code of heatmap.js, you'll see that it works like this:

  1. Paint circles onto a canvas, using a radial gradient from transparent to some percent opaque (depending on the strength of the point).
  2. Color-map that grayscale image (converting each gray value to one of an array of 256 colors).

Your problem could be solved in the same way, but painting a circle of constant opacity and variable radius in step 1.

Russell Zahniser
  • 16,188
  • 39
  • 30
  • I did have a look at the code but couldn't follow it well. I will definitely have another go though. – rjdown Jun 07 '13 at 14:23