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/
Related
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.
I am very new to html5 game making.
Recently I am making a game which includes some animations using png sprite.
http://i.imgur.com/MZrpq9j.png
I have a background and I try to use this sprite to mask it, I was trying to use getImageData() & putImageData() to show only the circle part of each frame of the sprite, everything's cool until I try to make another "circle" near to the first one.
The problem is I cannot make both "circle" animate at the same time if the sprite sheets overlap with each other...
And this is the very start of my project, the final aim is like making 100 "circles" on random positions.
So is there a method to use this sprite sheet to make animating circles, showing the background in the circle part only even if there are several "circles" which overlapping each other?
Sorry that my english is bad and I try my best to describe the question...Any suggestions would be great and I can elaborate more on the question if needed! Thanks!!
PS: I have tried to do my homework before posting, the most neareast reference I can find is http://simonsarris.com/blog/140-canvas-moving-selectable-shapes, but I do not know how to apply the concept of the "ghost canvas" into my case..
Good day to all.
I need to create a graphical countdown in js. The algorithm for the timer is ordinary. But I need to create a circle filled with a color (lets say green, doesn't matter) and while the counter goes down the circle gets fill with another color. So what I basically need to do is fill a circle with color.
First I thought to simulate some lines inside the circle (from center to margin) and fill it with them. The problem is how to generate lines... and I got to the conclusion that I should generate points to generate lines to fill the circle and even though the code is easy to write sounds like quite a resource eater.
Second option would be to use a drawing library but I fear that it would do the same thing.
So... any ideas how to implement this without wasting too much resources?
Note: The circle must be fill in a circular way... like skill reuse in games for example. (like a clock)
The best way I can think of is to use the Raphael graphis library which allows your code to draw SVG (or VML on older IE). Look at the source of this demo (which basically does what you want):
http://raphaeljs.com/polar-clock.html
The key to understanding the code is understanding this line:
path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
And the key to understanding that line is to first understand SVG path specification:
http://www.w3.org/TR/SVG/paths.html
What about to use html5 canvas: with it you can draw arc.
See http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
I think you might find what you are looking for here:
http://dev-tips.com/featured/css-tip-how-to-make-ircles-without-images
There is a complete tutorial on how to create circles using css3, it won't work very well in older browsers tho.
Check out this post (using canvas): Using jQuery / HTML5 to animate a circle
Or if you want to do it yourself with an easy CSS, HTML:
You can make a image with a transparent circle in it.
Make a div with a position relative and the size of the image, and the default color of the circle
Make a div with the overlay background color, absolute positioned width 100% bottom 0.
Make a div where the image is as background image width 100% height 100% (so the image is over the default background color.
When the timer ticks out, and you know on what percentage it is, you can change the height of the div you made on step 3. But you won't see any angles on the lines.
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.
I've googled and googled about this, and all I can find, including on StackOverflow, is "support was and is broken in most major browsers." Not an actual solution to my problem.
This month's Playboy came with a pair of 3D glasses (red/cyan) to view the eye-popping centerfold. Naturally, I hit the Internets to find every single red/cyan anaglyph I could and look at how awesome they are. Eventually I found some animated GIFs, which led to the idea that maybe I should make some cool HTML5 Canvas thing that lets you put shapes on a scene in 3D.
This is how far I got. Only works well in Google Chrome. In Firefox, the "Elevated Text" should look correct, but not the rectangles.
The way I'm generating the scene is thus: There are layers that each contain a Z-index, and you can place a rectangle or some text on whichever layer you want. The concept is simple. When drawing the object, it draws one [Z-index] pixels to the left in pure red, then it draws one [Z-index] pixels to the right in pure cyan.
In theory, the overlapping parts should subtract to become pure black. In Chrome, this happens for filling rectangles, stroking text, but not for filling text. In Firefox, this only happens for stroking text.
Although the intended effect of globalCompositeOperation="darker" should do exactly what I want, it's obvious that going down this road is going to bring nothing but pain.
Does anyone here have an idea as to how I can get the effect I want without using globalCompositeOperation? I tried messing with the alpha channel on the colors but didn't really like how that came together (they never add up to pure black). I could draw a third black rectangle between the red and cyan ones, but that doesn't solve the problem for text or arbitrary shapes.
I could do the pixel-for-pixel rendering myself in the Javascript, but that just seems like overkill. Any thoughts?
If you still need this, I have written a free context-blender library that lets you perform Photoshop-style blend modes between two canvases. I have not yet added 'darker', but you could either:
Fork the project on GitHub, add your own support for darker (it's pretty easy to see how to add a mode) and then send me a pull request, or
Ply me with promises of upvotes to get it added for you. :) The only hard part (as with many of the blending modes) will be attempting to determine what is correct when blending one or two areas which are <100% opacity.
It seems that the correct mode in Firefox is globalCompositeOperation="difference". Haven't tested in Chrome or IE.
Because "difference" is a mathematical operation, there is no ambiguity in the implementation, unlike the subjective term "darker".
Maybe you would like to use darken instead of darker. darker has been removed from the specification in 2007
It's a bit of a hacky way but it worked for me.
You can invert the entire canvas by doing
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);
Then render whatever you want to render using globalCompositeOperation = "lighter". Then invert the entire canvas again and it should give the same results as a "darker" blend mode would.