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.
Related
Imagine I have a set of images (number of images : N), and in each image there are several circles.
I have used image processing algorithms to extract 10 features from each image. Among those 10 features I have the center coordinate (cx and cy ) for that specific circle.
For a specific image with m circles in it, I will have an array of m by 10 (m is the number of circles in that image). So the results will be an array of N*m by 10.
I have written a Javascript code using D3, that draws parallel coordinates for those 8 features (not cx and cy). Now, I want to add a specific capability to my parallel coordinates, that by hovering on different lines (different circles), related image is shown and also the center of that specific circle in the image can be recognized. Please see the image below.
I don't know if it is possible using Javascript and D3 or not. I would be thankful if anyone can help me through this or give me a similar example.
Thank you in advance.
Yes, totally possible. As I don't have a JSFiddle or code example, I am going to give some high level ideas:
The circles on image is very straight forward. Just render the image in <img> tag. Overlay a canvas with transparent background and draw all the circles/ovals.
I believe you used SVG path for each circle (lines going through each of the feature values). Get a handle to the SVG path element on mouseover. Determine the index of the circle in question.
Once you have the index, look up (cx, cy) and render the center for the circle in the canvas. On mouseout, remove the center asterisk.
Hope that helps!
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'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 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/
Is there any change to remove or resize selected object from Canvas without changing other design.
For example:- I drawn circles (just for help Circle1, circle2, circle3) .
circle1 will be bottom of other two circles. Now I want to remove circle2 or re-size. But it should not effect other circles.
And it there any change do this without using clear Canavas method.
It should work something like powerpoint design just draw and resize and delete.
I do not think that is possible, canvas is a bitmap object as far as I know and anything you draw on it updates the image.
If you like to use circle as an object you probably should look to SVG
Citation:
"once the rectangle is drawn, the fact that it was drawn is forgotten by the system. If its position were to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle."
You could try drawing the circles on separate canvases. In this case all you would have to do is to get rid of the Canvas element containing the circle itself.
Of course this means you'll have to do use some CSS trickery (namely z-index and absolute positioning)... It also incurs some overhead. This might be acceptable if you are dealing with an adequate amount of objects.
I agree with David about SVG. That might be a good option.
With Canvas you have to start setting up your own framework. I started a few simple tutorials on the subject, including resizing shapes.
In short, you're gonna have to start keeping track of each object you have drawn so you can re-draw them every time something moves.
One possibility is to use a canvas library like fabric.js, which allows you to draw and access canvas objects programmatically. Having canvas contents as a number of objects makes it easy to modify those objects dynamically, without affecting anything else; move, resize, delete, clone, change properties (color, opacity, etc.)