You will understand what I mean if you use graphic editing programs like Gimp or Photoshop. To edit a curve on those programs (which probably is Bezier Curve), we can click on the curve, drag the mouse and the curve is changed accordingly. I suspect all the things behind this mechanism are concerned with vectors, but I couldn't find any document mentioning how to do it. Could anybody tell me how I can do that? Thank you very much.
[edit] What I meant was to select-the-curve itself to change (edit) it (click on the curve, and drag the curve to edit it). In the usual way, we select the control points to change the curve. I know to change the curve, I need to edit the control points, but how do I interpret a change on a curve into a change into a change to control points?
There are a number of ways of accomplishing what you're seeing, depending on how you'd like it to behave. I'll explain some of the simpler methods of modifying a Bezier curve via point on curve manipulation.
The first thing to do is figure out the parameter value (t) where the user clicked on the curve. This is generally going to be an approximation. If you're doing pixel or sub-pixel rendering of the Bezier, then just record for every pixel what the t value was and use that. If you're tessellating into line segments, see which line segment is closest, find the t values of the two end points, and lerp the t value according to the distance along the line.
Once you have the t value, you can plug it into the Bezier curve equation. You'll end up with something of the form:
P = k0*P0 + k1*P1 + k2*P2 + k3*P3
where P is the point on the curve, P0, P1, P2, and P3 are the input control points, and k0, k1, k2, and k3 are constants for a given t. I'll call the k values 'contributions', or more specifically the contributions of control points to the point on the curve P(t). A nice property to remember is that k0+k1+k2+k3 = 1.
So, let's say you have a vector V = P' - P, where P' is the new position and P is the original position. We need to move some of the control points to get P' where it needs to go, but we have some flexibility about which of the control points we want to move. Any point with non-zero contribution can be used, or some combination.
Let's say the user clicks on the curve at t=0. In this case, only k0 is non-zero, so
P0 := P0 + V
will produce the correct result. This can also be written as
P0 := P0 + k0 * V
In the general case where all of the contributions are nonzero, you can apply the same transformation to each of the points, which will have the effect of a very smooth, spread-out deformation.
Another option is to simply move the control point with the maximum contribution the entire distance. I think the equation to use would be something like
Pmax := Pmax + 1/kmax * V
but either way it boils down to looking at the contributions at a given t value, and moving the control points so the new point lies in the desired location.
This approach is fairly general, and works for NURBS and most other splines, even surfaces. There is another method that's fairly common that uses Greville Abscissae, which pins as many points as possible, but in my experience it's too easy to get oscillation.
EDIT - In response to your question edit
In order to be able to select the curve itself to move the control points, I would suggest that Bezier curves are definitely not the way forward - you would have to solve the equation in reverse in order to find the right control point locations. You would also find that in some cases it's actually not possible to move the control points to make the curve go where you want.
If you were using B-Splines, then you could simply insert a new control point at the point on the curve closest to where the user has clicked, and then move the new control point. So, effectively, you'd be adding a new control point.
Original text
Assuming you already have an implementation of a bezier curve which, given a set of control points (typically three for Bezier but can be as many as you want) can produce a set of points to be joined with lines on the display device (typically you use the 0 >= u <= 1 parametric equation), then this is easy.
Your control points determine where the curve goes, so you simply need to implement selection feedback and drag/drop on those control points.
If you're looking for exact point matching, however, bezier curves are not ideal since they only pass through the first and last control points. And the more points you add to the curve, the less accurate they become.
B-Splines would be better, and variations of these are what you actually see in photoshop et al.
Dragging simply changes the control points of the Bezier curve, and the curve is recalculated accordingly. See Wikipedia for a good explanation on how they work.
Please clarify what you wish to do? Do you want to edit bezier curves in an application? Are you interested in the general maths behind it?
Normally you manipulate the control points that is used to generate the bezier curve.
OK, so let's assume that you have to use Bezier curves because you're using a rendering library that has them as a primitive. If you're absolutely married to the idea of using control points on the curve itself, you can just interpolate control points using the method outlined here: How to find control points for a BezierSegment given Start, End, and 2 Intersection Pts in C# - AKA Cubic Bezier 4-point Interpolation
In other words, for every set of 4 points on the curve, you would run the above algorithm and get the 4 control points needed to draw the cubic Bezier.
See github.com/bootchk/freehandTool for object models
A user drags. Project the drag onto nearest control point or arm between control points. Interpret the drag as rotation and or translation (transform) of said nearest control points. Note plural: nearest may be coincident control points( ends) of two segments, or control points of arm of bezier segment.
Related
I am attempting to come up with a quick and efficient means of translating a 3d mesh into a projected AABB. In the end, I would like to accomplish something similar to figure 1 wherein only the area of the screen covered by the cube is located inside the bounding box highlighted in red. ((if it is at all possible, getting the area as small as possible, highlighted in blue, would increase efficiency down the road.))
Figure 1. https://i.imgur.com/pd0E20C.png
Currently, I have tried:
Calculating the point position on the screen using camera.unproject_position(). this failed largely due to my inability to wrap my head around the pixel positions trending towards infinity. I understand it has something to do with Tan, but frankly, it is too late for my brain to function anymore.
Getting the area of collision between the view frustum and the AABB of the mesh instance. This method seems convoluted, and to get it in a usable format I would need to project the result into 2d coordinates again.
Using the MeshInstance VisualInstance to create a texture wherein a pixel is white if it contains the mesh instance, and black otherwise. Visual instances in general just baffle me, and I did not think it would be efficient to have another viewport just to output this texture.
What I am looking for:
An output that can be passed to a shader informing where to complete certain calculations. Right now this is set up to use a bounding box, but it could easily be rewritten to also use a texture. It also could be rewritten to use polygons, but I am trying to keep calculations to a minimum in the shader.
Certain solutions I have tried before have worked, slightly, but this must be robust. The camera interfacing with the 3d object will be able to move completely around and through it, meaning at times the view will be completely surrounded by the 3d model with points both in front, and behind.
Thank you for any help you can provide.
I will try my best to update this post with information if needed.
Is it possible to make some smooth movement with a picture (or anything else)? An acceleration, deceleration...
I know we can use keyframe geometry to move an element but the movement is not smooth. The goal is to add some easing (ease-in / ease-out / ease-inout...) in a pictures slideshow.
This "bouncy ball" example is not really smooth:
https://github.com/mltframework/mlt/blob/master/demo/mlt_bouncy_ball
My use is with the command line on a linux server, I do not use any Kdenlive or shotcut.
The bouncy ball example is not intended to show smoothness or easing. The examples are basic intended to get people to walk before running.
MLT Property Animation defines "smooth" keyframes. In order to make something move, you need to pick a filter such as affine that supports animated position properties. Then, how you define keyframes and their types depends on whether using the API or a property string value (command line, XML). When using the multi-value string format, you use ~= instead of = between the time and the value. For example with the affine filter:
transition.rect=0~=0/0:100%x100%;100~=45%/45%:100%x100%;120~=50%/50%:100%x100%
Now, smooth keyframes alone do not provide easing, but you can add one or more keyframes towards the target (ease in) or leaving the target (ease out). The smooth keyframes simply help make the curve instead of you having to add many keyframes to smooth it out yourself. Think about drawing a curve with an illustration program. If you only have a straight line tool that connects at points, you need many points to make a smooth curve - the more points, the more smooth it will be. Now, if you have a curve tool, then you only need a few points. The Catmull-Rom spline used by MLT smooth keyframes was chosen for simplicity: It draws a curve through the points given.
As is often repeated, the easiest way to learn how to use the filters and their properties is to mock things up in a video editor and view its MLT XML output. Keep the project as simple as possible to keep the amount of XML to look through shorter.
I am trying to draw arrows. I know how to draw lines which takes me half way there but I want the tip to have a small triangle just like an arrow. However even when I use a triangle as a point, obviously it does not always point towards the direction of the line and might sometimes produce weird looking arrows.
I would like to draw the passes a player makes on a soccer field. I do that using LINESTRING and 4 coordinates I have in a table in my database. I use the xFrom, yFrom, xTo and yTo coordinates and I manage to draw lines. However I would like to have the tip of the line to show as an arrow but I found nothing in Google or in SQL documentation.
I would like to use SSRS and not any other graphics vector program because its simpler and its incorporated easily in my overall report.
Anyone can suggest a way of turning a line into an arrow?
Thanks
Okay, first off I'd like to preface this answer with the statement that using SQL Server and Reporting Services as a graphics tool is asking for trouble. This is by far, not what it was meant for.
With that being said, I believe this would work. You will need to spend some time studying, though. When manipulating images, you have several operations that you can perform. (Like Rotating, skewing, resizing, etc.) The mathematics behind these operations can be performed using matrix algebra. What you will need to do is look at the line you have created. It has a slope. If you picture that line superimposed upon X and Y axes, you can see that there is an angle between the line and the Y axis. (Assumes that the triagle's base rests upon the X axis.) That angle is the angle that you will want to rotate your triangle that you're using as the tip of the arrow. That should fix your problem. You could create a formula to do the calculations. (If the formula engine is robust enough to handle matrix algebra.)
Here are a couple of pages that give you the basics of how to rotate an image.
http://datagenetics.com/blog/august32013/index.html
http://www.fastgraph.com/makegames/3drotation/
Good luck!
Demo Image : http://i.picpar.com/bzH.png
I want to build a smart bezier curve like this. There are 100 targets (grid) in the map. I know the source point (Rocket), and the target point (Grid). How to calculate two control points to build a beautiful bezier curve which can not across the blue map?
Find curve bounding box and then check if it is contained in blue map rectangle. If it will be outside move control points respectively.
Assuming that you are using cubic Bezier curve (4 control points) for first try You might set some default coordinates of curve control points:
P1(p0.x-10,p0.y+10)
P2(p3.x-10,p3.y+10)
I do not know what language/libraries You are using but it might have Rectangle.Contains(Bezier.BoundingBox) function which might make things easier.
Hi stackoverflow community,
This is a continuation of a question I asked 6 months regarding calculating the area and position of dynamically formed rectangles. The solution provided for that worked a treat but now I want to take this a step further.
Some background - I'm working on a puzzle game using Cocos2D/Box2D were the player draws lines on the screen. Depending on were the player draws, I want to then work out the area and position of polygons that appear as a result of the drawn lines.
In the following image, the black border represents a playing area, this will always be the same shape. The grey lines are player drawn and will always be straight. The green square is an obstacle. The obstacle objects will be convex shapes. The formed polygons (3 in this case) are the blue areas and are the shapes I'm trying to get the coordinates and area for.
I think I'll be fine with working out the area of a polygon using determinants but before that, I need to work out the coordinates of the blue polygons and I'm not sure how to do this.
I've got the lines (x,y) coordinates for both ends, the coordinates for the obstacle and the corner coordinates for the black border. Using those, is it possible to work out the coordinates of the blue polygons or am I approaching this the wrong way?
UPDATE - response to duffymo
Thanks for your answer. To explain further, each object mentioned is defined and encapsulated in a class i.e. I've got a Line/Obstacle/PlayingArea object. My polygon object is encapsulated in a 'Rectangle' object. Each one of these objects has it's own properties associated with it such as its coordinates/area/ID/state etc...
In order to keep track of all the objects, I've got an over-seeing singleton object which holds all of the Line objects / Obstacle objects etc in their own respective array. This way, I can loop through say all Lines and know were each one has been drawn by the player.
The game is a bit like classic JezzBall so I need to be able to create these polygon shapes when a user draws a line because the polygon shape will be used as my way of detecting if that particular area contains a ball. If not the area needs to be filled.
Since you already have the nodes and edges for your polygons, I'd recommend that you calculate the centroids, perimeters, and areas using contour integration You can express the centroids and areas as contour integrals using Green's theorem.
You can use Gaussian quadrature to do piecewise integration along each edge.
It'll be fast and accurate; it'll work on polygons of arbitrary complexity.
UPDATE: Objective-C is an object-oriented language. I don't know it myself, but I believe it's based on ideas from C and C++. Since that's the case, I'd recommend that you start writing more in terms of objects. Arrays of coordinates? They need to encapsulated together. I'd suggest a Point abstraction that encapsulates a point (id, x, y) together. Make a Grid that has a List of Points.
It sounds like users supply the relationship between Points to form Polygons. That's not clear from your description, so it's not a surprise that you're having trouble implementing it.