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!
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.
If you look at the code of heatmap.js, you'll see that it works like this:
Paint circles onto a canvas, using a radial gradient from transparent to some percent opaque (depending on the strength of the point).
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.
Related
I decided to use SVGs to generate squares and images I need. SVGs are flexible and that should work with me.
I can't figure out how can I generate squares to fit inside the border of Croatia. End result I'd like to have can be seen in (see image below).
IMAGE :
It's pretty easy to generate squares in some rectangular shape. Since border of Croatia is not rectangular the only thing I have in mind is to do it manually, but this is not flexible. What if I want to create bigger or smaller squares just to test it out and fit them within borders.
It's usually a mistake to hand-implement low-level graphics primitives like this. Dealing with wavy or nested borders and edge conditions is bug-attracting code.
I'd suggest creating a small HTML canvas, drawing Croatia on it with path primitives and fill, then reading back its content with getImageData. Each fully black pixel corresponds to a square you want to draw. (Size the canvas to ensure this.)
(Or, if you just want the aesthetic, use an SVG pattern fill. That'd be less work.)
I certainly don't expect anyone to actually provide a working solution for this. My question at this point is a simple one: can this be done with an HTML5 canvas, or would I be spinning my wheels in the attempt?
I'm a programmer, but my forte is in PHP, JavaScript, traditional HTML, etc. ...I haven't had a chance to play with HTML5 yet.
The elements you see in the example, I can save out as individually as necessary. So to make the blocks rotate around the center, I was thinking I save a square image with the block in the appropriate corner, respectively. Then rotating the image would pivot around center appropriately, unless you can set a point of origin on an image a la PhotoShop.
The KineticJS library looks promising for this type of animation as well, but I'll leave the recommendations to you fine folks.
Anyway, here is the example I want to replicate:
I won't give any library recommendations for the same reasons that #Diodeus points out, but maybe I can help your selection process. What you're trying to do can be done multiple ways in the browser right now: Canvas, SVG, and/or CSS3 animations.
Your example above is basically a few vector graphics composed together with a gradient on your center "pie timer". Because of this I would lean towards using S V G, especially if you want to allow interactions with your component (each SVG element can have event handlers).
The canvas element is better for "pixel by pixel" control of your visual content on the page. Adding content in the canvas doesn't grow the DOM (like with SVG) so it will normally perform better, but you lose things like native event handlers and animations that you will end up having to re-implement on your own.
More about the choice between SVG and Canvas, and an SVG animation example
Once you have the components in the page, they'll need to be wired up and animated. The animation can be broken down into:
Scaling
Background color fading
Rotation
"Weird gradient pie timer" example with CSS3
These can be done with CSS animations, SVG animations, or with plain old javascript. The choice depends on what you'll be animating. If I was selecting a library I would want to find one that tried to use the newer methods (SVG/CSS3) when it can, and gracefully degrade when it cannot.
I would be weary of libraries that try to re-implement things that are already available natively in the browser. Relying more on the browser instead of your own code to do things like animations means that the browser can optimize its operations and use things like hardware acceleration to improve your performance.
Hopefully this can aid your library selection. Remember, libraries come and go all the time so don't get too attached to one. An ideal implementation should allow for you to easily swap out your animation or display code without having to touch other unrelated pieces.
Sure, it's not all that difficult when you break it down into pieces.
Here are some technologies and techniques to get you started.
You use Canvas by (1) displaying some drawings, (2) erasing, (3) displaying some new drawings
When you do this redrawing rapidly, you get animated effects like your image shows.
Html Canvas uses a context to draw with (think of it as the pen for the canvas)
drawing a path: context.beginPath + context.moveTo + context.lineTo will define a path that creates your "fan blade" polygons. You can use context.fillStyle to fill the polygons with you colors.
fading: context.globalAlpha will change the opacity of new drawings
rotating: context.translate(centerX,centerY) + context.rotate(radianAngle) will rotate new drawings (like your rotating polygons, your tick-marks, )
scaling: context.translate(centerX,centerY) + context.scale(scaleX,scaleY) will scale your polygons.
arcs: context.arc(centerX,centerY,radius,beginningAngle,endingAngle) will draw an arc with a specified centerpoint and sweeping from a beginning angle to an ending angle.
math: circleCircumferenceX = centerX+radius*Math.cos(radianAngle) circleCircumferenceY = centerY+radius*Math.sin(radianAngle) uses trigonometry to calculate an xy coordinate on the circumference of a circle. You can combine this trig + Math.random to place your "speckles" in an arc around your centerpoint.
I am looking to achieve something like this. A HTML view has a finite number of images (shown as red boxes in the image below). Are there any browser/jQuery APIs available today (cross-browser) which will let me calculate the dimensions of the remaining space (shown in green boxes) quickly? In the example shown below, it is easy to calculate the green area dimensions using simple geometry given the dimensions of the red boxes. But I am talking about very complex scenarios and complicated combination of images.
Appreciate any help. Thanks.
If you every images have absolute property, you can calculate dimension through top and left properties like $('#elementID').offset().top and $('#elementID').offset().left
From my experience working with DOM element dimensions, you cannot rely on them for exact values, and certainly can't really on them for the same values cross-browser. You can get OK results, but if you have complex scenarios then you will probably come undone at some point.
One way I have achieved similar things in the past is by drawing images to HTML5 Canvas. Using canvas you can have very fine-grained control. I have even iterated canvases pixel-by-pixel to get pixel perfect measurements of items on the canvas.
Check out this tutorial for a brief overview of drawing an image.
UPDATE
There is no easy way to do it. Using this method is low-level and will require you to use mathematics, and possibly byte-level image data from the canvas. However, if your problem is as complex as you suggest then you will have to get stuck in. When I did something similar I was also looking for an easy way to achieve what I wanted in the browser, then spent a month getting to grips with the canvas API, learning about byte-level colour data etc, but in then end I got what I needed, and ended up with something quite unique as it was difficult to achieve in a browser.
To get started, first I would say look at implementing a layered canvas by absolutely positioning multiple canvases on top of each other, then drawing a single image on each one. You already know the sizes of the images, and you can decide the coordinates of where to draw the image, so that's a start. In fact that may be all you need, you can track each image as you draw them by storing coords and dimensions, and you should be able to build up an accurate picture in numbers of where all your images are in 2D space.
Using those numbers you should then be able to calculate any empty spaces on there. However, that is a beyond me and probably a question for Mathematics Stack Exchange (which is actually down at the moment :D).
I have been experimenting with HTML5 and gradient fades, I would like to use 3 colours and gradually fade them into each other. Currently I can only get it working using two colours.
jsFiddle
My target is something similar to this image:
The colours should slowly fade into each other, i'm happy with the fade effect I currently have working, although would like to add a third colour.
I have tried to add an array of the colours to use, but the colour function was modded from a tutorial (will add link if I can find) and am not quite sure how to do it.
Could anyone offer any adivce?
Thanks in advance.
Am not trying to get it looking exactly the same as the image, but if I could just add another colour to my current version that should be fine.
Edit: Due to the confusion: I'm not looking for a "static" graident, if you view my example closely you will see a suttle fade effect. I want to achieve the same effect, but have the gradient with 3 colours and looking similar to the image above.
It should "shimmer" and a gradually fade. Offering a bounty as I'm struggling with creating this with 3 colours, which I think will be easy for most..
Unless you need to do some complex animation, you were doing some extremely unnecessary calculations for your gradient. The point of the gradient is that you give it some seed values and it generates everything in between automatically.
I worked up a sample gradient that looks similar to your reference image: http://jsfiddle.net/ZFayC/2/
Note that it looks like your reference image might have a small amount of texture to it, and that the gradient definitely isn't linear. If you want to re-create the reference image, you'll have to use some radial gradients and possibly overlay a texture.
Also, note that you were setting the canvas width and height via CSS properties. With the canvas element, CSS width and height control the magnification of the element, while DOM-level attributes control the actual dimensions.
Edit: I completely missed the fact that you were looking to produce an animated gradient. My apologies for that.
I went back and edited my example to smoothly transition between three pre-defined colors similar to the ones in your reference image. You can view the updated example here:
http://jsfiddle.net/fkU4Q/
Is this more along the lines of what you're looking for?
Edit: Here's another update that adds full-screen support, a diagonal gradient, and a secondary radial gradient that is overlaid in the middle to help give some variety:
http://jsfiddle.net/fkU4Q/2/
You might want to customize the colors a bit more to increase the variation, but hopefully the functionality is there now.
I think by applying certain tricks it should not be a big deal using CSS3 properties here is the playground,
http://css3.mikeplate.com/
I am looking for a way to use HTML5 canvas element to display an image of floats. Consider a grey scale image where values are not 8-bit nor 16-bit integers but are floats (or doubles). I would like to have a javascript/html5 solution to display the image inside the browser using a colormap. Additionally, I would like the user to be able to adjust interactively the minimum and maximum value.
This operation is quite common in scientific imaging software such as ImageJ but I haven't found a javascript/html5 solution. Pixastic seems to be in the right track for this but is more oriented to color image processing.
Any ideas, thanks in advance
I think I had the same need for work.
First i would say that I don't offer a library solution but I tell you how I code this.
I choose to make the colormap canvas using canvas linear Gradient.
To apply this gradient on my picture, I simply calcul the min/max of value I need to represent, then I searched for each values what colors correspond considering my linear gradient.
My picture has been included in a canvas using drawImage.
Then I changed the color of each pixel using canvasPixel manipulation on data array.
For interactive move colormap I choose to use JqueryUi slider.
All of this is linked on my code and it was a bit long to do.
Well I added some more complicated stuff because user is able to modify the color of linearGradient using a colorPicker Jquery plugin but it's more or less what you want too ?
I hope I answer your question. Good luck.