I was wondering if anyone could point me in the right direction as to how I would generate the points of a filled ellipse or circle.
I know of algorithms to draw the outline, but not the contents as well.
All I require are an array of points. But I have no idea where to start and can't seem to find my answer on Google.
Any help is much appreciated.
Thanks.
You know the points of the outline, so you could just sort them by line (i.e. by the y-coordinate). When the two y-coordinates are equal, sort them by x-coordinate.
Now, for two points with the same y-coordinate you know that all points between them must be in the ellipse.
You can generate the points by scanline. The equation of an ellipse is
ax2 + by2 + c = 0
So iterate over the values of y and solve for x. You'll get a quadratic equation in x with two solutions, giving you the points at the left and right end of the scanline. All the point in between are inside the ellipse.
If you want fast generation of the coordinates for the endpoints, see John Kennedy's paper, A fast Bresenham-type algorithm for drawing ellipses.
You may want to have a look at some graphics library like jsDraw2d
http://jsdraw2d.jsfiction.com/
A more efficient method though is probably to use Javascript to generate SVG images but unfortunately Internet Explorer up to version 8 does not support SVG.
Related
I am trying to shrink a polygon by a specific amount where all edges in the new polygon are of equal distance to the old one. To explain better I have a picture here.
If the picture doesnt work I have a link here.
https://imgur.com/a/A27mVHs
This is a rough drawing.
I have a point array in ([x,y])
[[390,435], [388,430], [391,425], [425,428], [410,435]]
I am trying to shrink it so the new array
[[x1,y1], [x2,y2] ... [x5,y5]]
ensures that the distance between the new area and the original one is 2 at all sides of the area.
How can I do this by only manipulating the co-ordinates. I know I need some kind of scalar vector but I'm unsure how to do this. I am trying to implement this in javascript
In the general case this is indeed an arduous problem. But for a convex polygon, it is pretty easy.
At every angle, draw the bissector and find the point at distance of the vertex equal to d / sin α/2 where α is the measure of the angle.
Have you done some research because there is lots of topics in internet about that subject, the short answer is this is not easy because there is lots of edge cases (look this topic for exemple).
A good term if you want to look more and find nice libs to do this task for your is Polygon offsetting
Others good links :
An algorithm for inflating/deflating (offsetting, buffering) polygons
ClipperOffset
A Survey of Polygon Offseting Strategies
Javascript Clipper
I want to connect two point using a curve, we know the coordinates of start point, the coordinates of end point, curve length. Since the length is greater than the direct straight line of the two points, a curve should be used. Any method using the d3 library would be better. I found something similar to my question here. But the question is not actually solved since calculating the length is far too complex. Thanks.
Here is one way of using circle arc, I analytically try it but it seems not good enough since we need some numerical method such as Newton's method to obtain theta, the function has the form
sin theta / theta = 2l / s
where l is the length of the curve and s is the length of the straight line (segment).
The answer is very simple: the curve that satisfies the condition is an arc. Given points, and desired curve length, finding such arc is a matter of high school math. Since you didn't bother attaching a jsfiddle or similar prototype showing some effort from your side, I won't bother too.
Ok, so... here's what I'm trying to do. In HTML/JS. With a math knowledge that would embarrass a twelve-year old.
With, say, 20 checkboxes on a page, the user picks.. five of them. A circle then appears on the page (I'd anticipate using one of the canvas libraries like Raphael) with their five answers arranged around it. So that's the first thing I don't know how to do; split a circle into x equal segments. Strange, foreign terms like "cos" and "sin" are looming on the horizon.
But then it gets even more fun: the user can click a point on the circle. And that point is translated into some sort of percentage value for each of the segments. So if the user checks Happy, Grumpy, Sneezy, Dopey and Bashful, and clicks the circle, I can tell them that they're 37% Happy, 42% Dopey and 21% Sneezy.
The best analogy is probably a colour-picker wheel, but I can't find any JS ones that I could repurpose. A pie chart is close - and there's a nice Raphael demo - but I've got a feeling that the fixed boundaries of a pie chart segment is going to take me down the wrong route for estimating percentage positions within the circle as a whole.
So, given my vague and poorly thought out request, and the noticeable absence of any "here's what I've tried so far" code - because I don't have the foggiest where to even start, apart from high school trigonometry books, can anyone suggest any code libraries or snippets that might get me at least pointing in the right direction?
Thanks :)
========================
Edit :
Wow, thanks for all the answers. I'll try to refine the question/s a bit:
I'm going to need to draw a circle with x number of points arranged equally around its circumference. The number of points will correlate to the number of checkboxes that the user checked.
That's the first bit I'm stuck on: I reckon that I can draw a circle, with dimensions and at a position on the page of my own choosing, (using Raphael or similar canvas library) but how can I calculate what the x/y pixel coordinates of those points should be on the circle circumference?
The second bit: the user then clicks anywhere in the circle. I guess what I'd do is calculate how far each of the circumference points are from that user click point - I'm not sure how to do that, apart from a vague suspicion it involves imaginary triangles - and then how much of a total distance each of those distances are. That last bit, at least, I can manage.
Actually, this is starting to make sense. I'm still not sure how the trig stuff works but it's amazing what typing your problem out so that strangers will understand it can do to help your own understanding...
You need to revise your question to explain more clearly what you are trying to do. In the meantime, I can give you the following information that may help you get started.
First of all, you'll need to know the locations of the five checkboxes that the user selects. In order to do this, the jQuery library offers some convenient functions such as $.position and $.offset.
Your question does not make clear exactly how the circle you want to draw is positioned in relation to the five checkboxes that the user clicks. As for actually drawing the circle, you may want to use something like the HTML5 canvas element. I've not yet used it myself, so I can't tell you much about it.
You might want to try asking another question on StackOverflow about how to draw a circle on your web page once you've computed the center and radius of the circle.
As for doing the math about the circle, you need to know that a circle can be parameterized on an x-y plane by the following equations:
x = x0 + r cos(theta)
y = y0 + r sin(theta)
where (x0,y0) is the center of the circle, r is the radius of the circle, and theta ranges over 0 to 2*Pi radians (0 to 360 degrees)
Let us know more about what you're doing and we can give you some more specific information.
I am still working on my "javascript 3d engine" (link inside stackoverflow).
at First, all my polygons were faces of cubes, so sorting them by average Z was working fine.
but now I've "evolved" and I want to draw my polygons (which may contain more than 4 vertices)
in the right order, namely, those who are close to the camera will be drawn last.
basically,
I know how to rotate them and "perspective"-ize them into 2D,
but don't know how to draw them in the right order.
just to clarify:
//my 3d shape = array of polygons
//polygon = array of vertices
//vertex = point with x,y,z
//rotation is around (0,0,0) and my view point is (0,0,something) I guess.
can anyone help?
p.s: some "catch phrases" I came up with, looking for the solution: z-buffering, ray casting (?!), plane equations, view vector, and so on - guess I need a simple to understand answer so that's why I asked this one. thanks.
p.s2: i don't mind too much about overlapping or intersecting polygons... so maybe the painter's algorthm indeed might be good. but: what is it exactly? how do I decide the distance of a polygon?? a polygon has many points.
The approach of sorting polygons and then drawing them bottom-to-top is called the "Painter's algorithm". Unfortunately the sorting step is in general an unsolvable problem, because it's possible for 3 polygons to overlap each other:
Thus there is not necessarily any polygon that is "on top". Alternate approaches such as using a Z buffer or BSP tree (which involves splitting polygons) don't suffer from this problem.
how do I decide the distance of a polygon?? a polygon has many points.
Painter's algorithm is the simplest to implement, but it works only in very simple cases because it assumes that there is only a single "distance" or z-value for each polygon (which you could approximate to be the average of z-values of all points in the polygon). Of course, this will produce wrong results if two polygons intersect each other.
In reality, there isn't a single distance value for a polygon -- each point on the surface of a polygon can be at a different distance from the viewer, so each point has its own "distance" or depth.
You already mentioned Z-buffering, and that is one way of doing this. I don't think you can implement this efficiently on a HTML canvas, but here's the general idea:
You need to maintain an additional canvas, the "z-buffer", where each pixel's colour represents the z-depth of the corresponding pixel on the main canvas.
To draw a polygon, you go through each point on its surface and draw only those points which are closer to the viewer than any previous objects, as indicated by the z-buffer.
I think you will have some ideas by investigating BSP tree ( binary spaces partition tree ), even if the algo will require to split some of your polygon in two.
Some example could be find here http://www.devmaster.net/articles/bsp-trees/ or by google for BSP tree. Posting some code as a reply is, in my opinion, not serious since is a complex topic.
Is there a way to geometrically compute the intersection points of a line and an arbitrary graphics path? I know where all of the lines and curves are in the path, and I am using the HTML5 canvas element if that helps any. Basically, I have access to all of the canvas drawing commands and their arguments. For instance, if the API was called with a lineTo, then a moveTo, then an arc I have all of that information. Each call to the API is stored in an array. I have the path definition, I just want to figure out where the line intersects the path. Below is an image showing an example of the points I would need to find.
Thanks for any help! Again, I would rather do this geometrically rather than pixel based if possible.
You might want to have a look at Kevin Lindsey's Javascript geometry library - it contains probably all the interesection algorithms you are looking for: http://www.kevlindev.com/geometry/index.htm
Without knowing how your graphics path is defined, it's impossible to answer your question with a concrete algorithm. There is a solution in this book on algorithms for straight line segments.
If you have the equations for everything, then you can do it (in theory). In practice, it's not so easy (especially not in the general case). This discussion has some good advice on intersecting lines and bezier curves.
You want to intersect a line and a "spline" x(t), y(t) which should be at most 4-th degree polynomial for both x(t) and y(t). You ed up solving equations, but yo do need to know all of the parameters. If solution is out of either range (line segment and spline segment have start and end) - discard it. Related q:
The intersection point between a spline and a line