It is possible to create a segments inside the circle on the basis of input . I am trying to represent the fraction value in the form of circle by creating the segments for example :-
there is a div
<div class="circle">
</div>
circle has a width of 150px & height as well now with a border radius of 50%;
i want to take input value of numerator and denominator display the number of segments in the circle div
for example like this
As you are going to be dealing with possibly complex angles, I would recommend that you use a canvas. Here is an example of how you can achieve what you are looking for:
//Getting the context for the canvas
var canvas = document.getElementById('fraction');
var context = canvas.getContext('2d');
var x = 80; // X coordinate for the position of the segment
var y = 80; // Y coordinate for the position of the segment
var radius = 75; // Radius of the circle
// This is what you will be changing
// Maybe get these values from a function that pulls the numbers from an input box
var numerator = 1;
var denominator = 4;
var fraction = numerator / denominator; // The angle that will be drawn
// For plotting the segments
var startAngle = Math.PI;
var endAngle = (1 + (2 * fraction)) * startAngle;
// If the circle is draw clockwise or anti-clockwise
// Setting this to true will draw the inverse of the angle
var drawClockwise = false;
// Drawing the segment
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, drawClockwise);
context.lineTo(x, y);
context.closePath();
context.fillStyle = 'yellow';
context.fill();
//***************** Edit *******************
// This will add the circle outline around the segment
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, drawClockwise);
context.closePath();
context.strokeStyle = '#000';
context.stroke();
<div>
<canvas id="fraction" width="200" height="200"></canvas>
</div>
In the code above you can play with the variables, but the main variables that you will be interested in are numerator, denominator and fraction. These make up the fraction that you mentioned above and are used to draw the correct segment.
You can also play with the other variables to change the size and position of the shape, the direction that it is drawn in. You are not limited to these though, there are many other things that you can change!
Here is an example of drawing circles and segments onto the canvas, here is an example of the how to set and change the colour and outline of the shape and here is an introduction to canvas in general.
I hope this helps!
Good luck :)
Related
Edit: I could divide the radius with the angle?
Problem: For the sake of learning the arts of collision in HTML5 Canvas, I am currently trying to get a full circle to collide with a segmented circle, in this case a semi circle.
What I Tried: My first thought was a simple circle to circle collision would do but I was wrong. I read various sources on collision detection but all of them were either the standard circle / circle, box / circle, box / box, or polygon collision formulas.
My Question: What is the formula for colliding a full circle with only a segmented circle? It seems something other than just the radius comes into play. Maybe the radians as well?
Attempt:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var C1 = {x: 45, y: 65, radius: 20};
var C2 = {x: 60, y: 20, radius: 20};
var dx = C1.x - C2.x;
var dy = C1.y - C2.y;
var distance = Math.sqrt(dx * dx + dy * dy);
ctx.beginPath();
ctx.arc(C1.x, C1.y, C1.radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
ctx.beginPath();
ctx.rotate(0.3);
ctx.arc(C2.x, C2.y, C2.radius, 0, Math.PI * 1);
ctx.fillStyle = 'red';
ctx.fill();
if (distance < C1.radius + C2.radius) {
alert('true')
}
else {
alert('false')
}
A demo for to play around with: jsfiddle.net/tonyh90g/1
My learning resource: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
You're on the right tracks, you will indeed need to not only calculate the distance between centres but also the angle of the intersection point(s) on the segment.
In general cartesian coordinates that angle can be calculated using Math.atan2(dy, dx) where dx and dy are the difference in coordinates from the segment to the circle. If those angles fall between the segment's angle, you have a hit.
[NB: At the exact point of touching there's only one point, but if the two objects end up slightly overlapping, which is not uncommon in animation, you'll get two points].
It's also possible that the circle could intersect the line segments rather than the round portion of the segment, but I think those cases will be correctly caught anyway. This may require further investigation, and if required would need a line-segment / circle intersection test.
I also note in your fiddle that you're using rotate() transforms on the sector. This will foul up your angle calculations unless you specifically account for it. It may be easier to use absolute angles throughout.
I'm using CSS to try and create a label (which is a popup that always remains on the map) attached to a circle. The following link will lead to the image of what I'm trying to do: Image. In order to achieve this I've been using the following code:
$(popup._container.firstChild).css({
background: "-webkit-radial-gradient(-29px" + percentZoom + ", circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 58px, white 59px)"
});
Before, I was calculating the percentZoom depending on the radius of the circle and the zoom where the map is now.
var percent = (50 * presentCircleRadius) / 300000 //when the radius is 300000 the percentage should be 50%
var percentZoom = (percent * zoom) / 6; // then calculate it the exact zoom that should be used depending on the zoom. Being 6 the default one.
This didn't work or it had many issues when I zoomed in on the map (considering that the circle doesn't really change but the curvature seems to becoming flatter).
I tried using canvas as well to get the result that I wanted it, but I had issues. I was using two arches to build the top part and the bottom part, then thought about using two rectangles to create the two parts to the right of the circle. The problem with this it's that the circle is transparent and it's meant to start on the edge of it, if I used this solution the rectangle would appear in the middle of the circle.
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, 1.6 * Math.PI, 0 * Math.PI, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(x, y, radius, 0 * Math.PI, 0.4 * Math.PI, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.lineWidth = "10";
context.strokeStyle = "blue";
context.rect(x, y - radius, 150, radius);
context.stroke();
<canvas id="myCanvas1" width="578" height="250"></canvas>
So I thought of using lines instead of rectangles to create the right part of the label: fiddle, the problem with this solution is, as mention before, as you zoom the curvature will change and I found no way to calculate exactly where the lines on the top and on the bottom should start.
Is there a way to do what I want to do: Make it so that the label follows the curvature of the circle as you zoom in and out and if so how can I make it so considering that there might be more than one circle per zoom with different radius?
Here is an example!
I am trying to reset the green arc inside drawValueArc() so that each time you click the change button, the green arc is removed and redrawn. How can I remove it without removing the entire canvas? Also, as an aside, I have noticed that Math.random() * 405 * Math.PI / 180 doesn't actually always result in an arc that fits inside the gray arc, sometimes it is larger than the gray arc, why is this?
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 150;
var cy = 150;
var startRadians = 135 * Math.PI / 180;
var endRadians = 405 * Math.PI / 180;
//main arc
ctx.beginPath();
ctx.arc(cx, cy, 58, startRadians, endRadians, false);
ctx.strokeStyle="rgb(220,220,220)";
ctx.lineWidth = 38;
ctx.stroke();
$('#setRandomValue').click(function(){
drawValueArc(Math.random() * 405 * Math.PI / 180);
});
function drawValueArc(val){
//ctx.clearRect(0, 0, W, H);
ctx.beginPath();
ctx.arc(cx, cy, 58, startRadians, val, false);
ctx.strokeStyle = "green";
ctx.lineWidth = 38;
ctx.stroke();
}
Drawing past boundary
The problem you are facing is in first instance the fact you are drawing before and after a 0-degree on the circle. This can be complicated to handle as you need to split in two draws: one for the part up to 0 (360) and one 0 to the remaining part.
There is a simple trick you can use to make this easier to deal with and that is to deal with all angles from 0 and use an offset when you draw.
Demo using redraw base (I moved it to jsfiddle as jsbin did not work for me):
http://jsfiddle.net/3dGLR/
Demo using off-screen canvas
http://jsfiddle.net/AbdiasSoftware/Dg9Jj/
First, some optimizations and settings for the offset:
var startRadians = 0; //just deal with angles
var endRadians = 300;
var deg2rad = Math.PI / 180; //pre-calculate this to save some cpu cycles
var offset = 122; //adjust this to modify rotation
We will now let the main function, drawArc() do all calculations for us so we can focus on the numbers - here we also offset the values:
function drawArc(color, start, end) {
ctx.beginPath();
ctx.arc(cx, cy, 58,
(startRadians + offset) * deg2rad,
(end + offset) * deg2rad, false);
ctx.strokeStyle = color;
ctx.lineWidth = 38;
ctx.stroke();
}
Clearing the previous arc
There are several techniques to clear the previous drawn arc:
You can draw the base arc to an off-screen canvas and use drawImage() to erase the old.
You can do as in the following example, just re-draw it with the base color
As with 2. but subtracting the green arc and draw the base color from the end of the green arc to the end of the base arc.
clearing the whole canvas with fillRect or clearRect.
1 and 3 are the fastest, while 4 is the slowest.
With out re-factored function (drawArc) it's as easy as this:
function drawValueArc(val) {
drawArc("rgb(220,220,220)", startRadians, endRadians);
drawArc("green", startRadians, val);
}
As everything now is 0-based concerning start we really don't need to give any other argument than 0 to the drawArc instead of startRadians. Use the new offset to offset the start position and adjust the endRadians to where you want it to stop.
As you can see in the demo, using this technique keeps everything in check without the need to draw in split.
Tip: if you notice green artifacts on the edges: this is due to anti-alias. Simply reduce the line width for the green color by 2 pixels (see demo 2, off-screen canvas).
Recently I got a task that is to draw circles on my own website with Google Maps API.
The complexity is the center of the circle is representing a "signal transmitter" and I need to make the circle transparent, with the opacity of each pixel reprseting the signal intensity of the exact location.
My basic idea is to extend the "Overlay" of Google Map API, so I have to write it in javascript I think.
The key part is to draw a circle with gradually changing opacity (inner stronger, outter lighter) and idealy, I can specify the opacity of each pixel.
I've been looking for approaches like CSS3, SVG, VML and even jquery and AJAX but still having no idea about how to archve this.
Thank you very much for your helping!
It looks like you're going to have to manually set every pixel, if you want that level of control over the opacity. I'd use something like this:
var centerX = 100 // Center X coordinate of the circle.
var centerY = 100 // Center Y coordinate of the circle.
var radius = 25 // Radius of circle.
//(var diameter = 2 * radius // Diameter of circle)
for(x = -radius; x < radius; x++){
for(y = -radius; y < radius; y++){
var hypotenuse = Math.sqrt((x * x) + (y * y)); // Line from point (x,y) to the center of the circle.
if(hypotenuse < radius){ // If the point falls within the circle
var opacity = hypotenuse / radius; // Should return a value between 0 and 1
drawPointAt(x + centerX, y + centerY, colour, opacity); // You'll have to look up what function to use here, yourself.
}
}
}
Here's a small example of this code returning a circle.
Here I got the solution. It's making use of the Canvas element of HTML5 (which is widely supported).
Here is the javascript code for locating the canvas element and draw the circle with gradually changing transparency. The key part is to use the "Gradient".
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
gradient.addColorStop("0", "blue");
gradient.addColorStop("1.0", "transparent");
ctx.fillStyle = gradient;
//ctx.beginPath();
ctx.arc(200, 200, 200, 0, Math.PI*2, true);
//ctx.closePath();
ctx.fill();
I have a quadratic curve that I use to create a slice of a piechart. The slice is situated in an axis of x and y, with the center point at (0,0). The radius is variable at radiusX and radiusY. This slice travels 90 degrees.
I need to split this slice into 3 seperate slices (each having 30 degree angle) and have them match whatever curve their parent slice had.
The following images show possible examples of the slice. Black circles adjust the size/shape of the slice:
Here is the function I've made but it's just not working correctly:
//globalPosX and globalPosY equal whatever position each of the two large black circles have repectively.
var canvas = document.getElementById('CV_slices');
var context = canvas.getContext('2d');
var cenX = canvas.width/2;
var cenY = canvas.height/2;
var blackDotX = globalPosX - cenX;
var blackDotY = cenY - globalPosY;
var endX;
var endY;
var controlX;
var controlY;
//set first slice
var startCoOrds = {
x: cenX ,
y: globalPosY
};
for (i=1; i < 4; i++) {
//make end(x,y) of previous slice the start(x,y) for the next slice.
endX = startCoOrds.x - (blackDotX*Math.sin(30));
endY = startCoOrds.y + (blackDotY*Math.cos(30));
//set position of control point using position of start/end positions (at the moment only adjustibng using +10 -10 at end)
controlX = ((endX - startCoOrds.x) /2) + (startCoOrds.x) + 10;
controlY = ((endY - startCoOrds.y) / 2) + (startCoOrds.y) - 10;
// draw slice
context.save();
context.beginPath();
context.moveTo(cenX, cenY);
context.lineTo(startCoOrds.x, startCoOrds.y);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(cenX, cenY);
//make end(x,y) of previous slice the start(x,y) for the next slice
startCoOrds.x = endX;
startCoOrds.y = endY;
context.closePath();
context.globalAlpha = 0.1;
context.fillStyle = "#333333";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#ffffff";
context.stroke();
context.restore();
}
Use the closest "blackDot" as the radius of a circle,
using the circle, divide your quadrant into 3 (see wiki)
then scale the points by a ratio of the distance between 0,0 and the "blackDot"'s
In effect your arc is a quadrant of a circle that has been scaled in the x or y axis.