I get two (xy) coordinates dynamically, one defining the start and another defining the end of a curve. In order to generate a Bezier curve between them, I want to define a third (xy) coordinate as control - with a third point, I can draw a a Bezier curve perfectly, but my problem is that I do not know how to get the coordinate for the control point (xy).
For a line drawed by the xy start point and the xy end point (black line) I find one point in the coords xy (yellow circle) formed by the cross of drawing a intersection line (green line) in the middle of the line given and a 45 degrees staring in the xy start point (red line).
I added a image example to explain it better.
Related
I have a series of circles which are randomly positioned on the scene (x,y). I was wondering if anyone knew of a solution to make sure that when randomly placed, the circles would not overlap.
In your loop when you place circles, take the randomized (x,y) coordinate, and get the distance to all of the existing circles (another loop) --> √((x1-x2)^2 + (y1-y2)^2), if the distance is greater than the radii of both circles added together for EVERY circle, then you can place the circle, otherwise they overlap.
A statement checking to each circle's co-ordinates plus and minus its radius does not come within the co-ordinates of another circle plus and minus its radius in both the x and y direction could work
I'm implementing some basic annotation draw features, such as arrows. Now I'm a little bit stuck with ellipse.
The methods to draw an ellipse usually address using it's two diameters and eventually a rotation:
However I want to display the ellipse between the point user clicked and the one he's hovering, therefore I need a function that calculates diameters and rotation based on two points:
How would I do that? Can it be achieved with sufficient performance (as it renders during mouse-hovering)?
the steps you shoul follow:
get the angle of the line (from this post: get angle of a line from horizon)
rotate the canvas or at least the part you currently drawing (live demo here: http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial)
draw an ellipse in canvas (http://www.scienceprimer.com/draw-oval-html5-canvas)
the resulted ellipse will be transformed as described
It can be done in the same way that it is normally done, just using different math to calculate the shape. Without writing the entire code for you, you can start by having an event trigger when the user clicks the mouse button down. The function will copy the users x and y position based on the screen. Then there is a second function which will handle mouse movement. This function will keep track of the x and y coords of the mouse while it is in motion. The final function will be a mouse up event, when a user lifts their finger from the mouse button (assuming this is when the event should be finished). Using the initial and final position of the x and y coordinates, you can calculate the length of the line the user created. That line is the long diameter of the ellipse. Half this number for the large radius. Then use whatever ratio you are using to calculate the smaller radius from the larger one. Then create an ellipse based on these numbers.
For the math: Suppose your first point is x1,y1 and the end point is x2,y2
I'm also assuming that we have a line going from bottom-left to top-right
Distance between two points = sqrt((x2-x1)^2 + (y2-y1)^2) ---> (we will call this d1)
half of this is the length of the large radius ---> (we will call this r1)
Midpoint formula = ((x1+x2)/2 , (y1+y2)/2) ---> axis of rotation (we will call it (m1, m2))
distance from midpoint to end is just the radius
radius is now the hypotenuse of constructed plane, y2-m2 is height of right triangle.
Find the angles between midpoint and one end of larger radius - sin((y2-m2)/r1).
Angle of smaller radius is this angle + pi/4 radians.
calculate length of smaller radius based on ratio.
I am trying to smoothen the transition from a diagonal line to a horizontal line by using arcs of circles that I calculate with a little calculus. The problem I am running into is that it seems as though I can't get the arcs to be positioned correctly.
For example: jsfiddle.net/5Wa9e/2
It might just be a problem with my calculations but from "inspection" it seems as though I have the right circles. I want the red points on the right to always be at the bottom of the circle at the point where the tangent is horizontal.
I am using: A#{radius},#{radius} 0 0 0 #{curveEndX},#{curveEndY}" to define the arc. Am I missing something?
--edit--
It was just my math. Turns out the arcs I see are just fallback mechanisms for when the SVG renderer can't find a circle matching my constraints.
--edit--
end result: jsfiddle.net/5Wa9e/2
I have a pie chart which is drawn in HTML5 canvas .. I am retrieving the Point (X,Y) on mouse over .. Now i want to know whether the Point (X,Y) is in which slice of the pie chart ..
Note :
I have already found whether the Point(X,Y) is inside the pie chart or not
Known values :
Center of Pie Chart (Cx,Cy)
Start and End angle of each arc or slice
Piechart radius (R)
Start and End points of the arc or slice
So, we know the angle where a slice starts. We know the center and point (x,y).
Let's assume the origin is (0,0) and we draw a line from there to point (x,y) . The angle between the x-axis and the line will be tan^-1(y/x).
Once we know the angle it's a simple calculation to see between which arc section it lies, since we know the start and ending angles of each slice.
If the origin is not (0,0) you can make it so with some simple math.
I've been trying to draw an asymmetrical ellipse using HTML5 Javascript,
My first try was using the arc and the scale but I was only able to generate symmetrical ellipses using that,
So my second try was using bezier curves. Which had as main problem that I don't understand how they work...
In the end, I ended up with something like this:
http://jsfiddle.net/eLEUD/4/
It works, but I have the modifiers hardcoded in there, as soon as you change the points, it stops working. I have no idea how to calculate them though...
Who can help me further?
The bezierCurveTo function actually draws the last three nodes of a Cubic Bezier Curve
Cubic bezier curves require 4 points to be drawn:
P1: the starting point of the curve.
P2: the first point the curve heads towards but does not touch.
P3: the sencond point the curve heads towards but does not touch.
P4: the end point of the curve.
Given that, the code looks like this (assuming P1,P2,P3,P4 are point structures):
//move to the first part of the curve
context.moveTo(P1.x, P1.y);
//draw the curve.
context.bezierCurveTo(P2.x, P2.y,
P3.x, P3.y,
P4.x, P4.y);
The bezierCurveTo function treats the whatever point the canvas context is sitting at as the first anchor point.
As for drawing your egg shape, you're just going to have to fiddle with it until you're happy with whatever shape you're looking for.
I hope that helps.
EDIT
It seems like maybe you're trying to draw an egg shape inside the diamond shape... so I've updated your fiddle to do that. See the green egg shape here:
http://jsfiddle.net/blesh/zVWrH/1/
What I did is calculate the other points around the diamond: northeast, north-by-northeast, etc. and used those as anchor points.
I hope that helps.