does anyone have any tips/ideas on how to calculate Round line joins?
The device I'm working on only supports single width lines.
I am trying to implement basic stroking with only round line joins.
Some things I'm messing with are below.
It's not much, but I hope to get some ideas on how to handle the different cases when two lines join, based on any replies.
Thanks in advance for any help.
I have had some progress with the outer join:
a. Get clockwise order vertices (I get these from flattened glyphs)
b. Grab 3 vertices
c. Compute normal of line A (prevX, prevY) -> (currentX, currentY)
d. Compute normal of line B (currentX, currentY) -> (nextX, nextY)
I compute normals using a left turn on the current clockwise vertices
normal = (deltaY, -deltaX) // Thanks Andreas
Vec2[] computeNormals(float prevX, float prevY, float x, float y, float nextX, float nextY) {
float dx1 = x - prevX;
float dy1 = y - prevY;
float dx2 = x - nextX;
float dy2 = y - nextY;
Vec2 normal1 = new Vec2(dy1, -dx1).normalize();
Vec2 normal2 = new Vec2(dy2, -dx2).normalize();
if (normal1.angleDeg() > normal2.angleDeg()) {
normal2.rot((float) Math.PI);
}
return (new Vec2[] { normal1, normal2 });
}
e. Determine outer join arc angle from atan2(deltaY, -deltaX)
void computeArc(VertexBuffer dest, float x, float y, float arcRadius, Vec2 normal1, Vec2 normal2) {
// Angle from Vecto2D is atan2(y, x)
float angleStart = normal1.angle();
float angleEnd = normal2.angle();
float angleInc = (float) Math.PI / 4f; // Temporary, need to find a way to determine numVertices for a Pen of a given width
while (angleStart > angleEnd) {
angleStart -= (float) (2f * Math.PI);
}
for (float a = angleStart; a <= angleEnd; a += angleInc) {
float vx = x + ((float) Math.cos(a) * arcRadius);
float vy = y + ((float) Math.sin(a) * arcRadius);
dest.addVertex(vx, vy);
}
}
If your device can draw filled circles, you could put a filled circle at the 2 end points, and one at every line joint.
Related
I'm drawing arrows using Java and I can draw them straight but now I need to have the arrows pointing in different directions.
In my current code, I draw a triangle and then a square.
Is there a way to group the two after they've been drawn and then rotate them at a random angle?
Right now I'm only able to rotate the triangle and square separately, causing some messy thing.
void setup() {
size(400, 400);
}
void draw() {
float r = random(24, 64);
background(255);
drawArrow(r);
//drawPlus(r);
saveFrame("dataArrow/plus####.png");
if (frameCount == 100) {
exit();
}
}
void drawArrow(float r){
float base = r * 2;
float xStart = random(1, width-base - 1);
float xEnd = xStart + base;
float k = 0.5 * base;
float y = random(k, width-k);
float middleBase = base/2 + xStart;
float rectSide = 0.5 * base;
float rectX1 = middleBase - rectSide/2;
float rectX2 = middleBase + rectSide/2;
fill(0);
triangle(xStart, y, xEnd, y, middleBase, y - k);
rect(rectX1, y, rectSide, rectSide);
}
not sure if this exactly what you mean but here is how to move things around
push and pop matrix allows you to organize things that should have the same translations
https://processing.org/reference/pushMatrix_.html
https://processing.org/reference/rotate_.html
https://processing.org/reference/translate_.html
basic example
pushMatrix();//start of new translation and rotation things
translate(xAmount,yAmount);//this moves the origin
rotate(angle);//this rotates around origin
//drawing around the point of rotation 0,0 here
//drawing...
popMatrix();//reset all translations and rotations to before
I would like to know how to calculate the four corners of a rectangle.
I have various straight lines at different orientations. I would like
to use the start and end coordinates of each of these lines to determine a rectangle i.e using the addition or subtraction of diffx, diffy to the start and end points of the line dependent on the bearing of the line in whole circle quadrant. I am trying to do this in java.
My end goal is the have a rectangle (sleeve) to contain the line. The line would
appear as a centre-line to the rectangle or (rectangle buffer of the line).
Grateful for any help
Please see the slide on Assignment 2 on this link. It is a link to someone elses page and shows the image of what I am trying to do
http://blog.wijono.org/2015/07/simple-2d-tesselation-and-twist-with.html
link
link
Using points (x1, y1) and (x2, y2) for the start and end of the line.
Top left ( Math.min(x1, x2), Math.min(y1, y2) )
Top right: ( Math.max(x1, x2), Math.min(y1, y2) )
Bottom left: ( Math.min(x1, x2) , Math.max(y1, y2) )
Bottom right: ( Math.max(x1, x2) , Math.max(y1, y2) )
Assuming you intend the line to be the diagonal of the rectangle, and that line starts in x,y and ends in z,w with x < z.
Coordinates of the rectangle's vertices would be: (x,y), (x,w), (z,y), (z,w)
The other two folks covered the diagonal, here's the center-line method. I'm yoinking this from a shader I wrote, so forgive any type errors, I'll do my best to make them recognizable.
// Assume:
// Vec2 is a two-property float, with x and y
// Rect is a object that contains 4 Vec2s, representing each corner
// in counter-clockwise order.
function Rect getRectangle(Vec2 start, Vec2 end, float width) {
Vec2 parallel = end-start;
parallel = normalize(parallel);
Vec2 perpendicular = new Vec2(parallel.y,-parallel.x);
perpendicular *= width / 2;
return new Rect(start+perpendicular, start-perpendicular, end-perpendicular, end+perpendicular);
}
Given a line as two points and the amount of padding, this will return the four points of the bounding rectangle
public Point2D.Double[] padLine(Point2D lineStart, Point2D lineEnd, double padding)
{
//have the line start at the origin so as to be represented by one point
Point2D.Double line = new Point2D.Double(lineEnd.getX() - lineStart.getX(), lineEnd.getY() - lineStart.getY());
//find the unit vector perpendicular to the line
Point2D.Double perp = normalize(rotate90(line));
//create and fill in the array of the rectangle's coordinates
Point2D[] rect = new Point2D[4];
rect[0] = new Point2D.Double(lineStart.getX() + perp.x * padding, lineStart.getY() + perp.y * padding);
rect[1] = new Point2D.Double(lineStart.getX() - perp.x * padding, lineStart.getY() - perp.y * padding);
rect[2] = new Point2D.Double(lineEnd.getX() + perp.x * padding, lineEnd.getY() + perp.y * padding);
rect[3] = new Point2D.Double(lineEnd.getX() - perp.x * padding, lineEnd.getY() - perp.y * padding);
return rect;
}
//same directionality, but of length 1
public Point2D.Double normalize(Point2D p)
{
double length = Math.sqrt(p.getX() * p.getX() + p.getY() * p.getY());
return new Point2D.Double(p.getX() / length, p.getY() / length);
}
//rotates the given point by 90 degrees
public Point2D.Double rotate90(Point2D p)
{
return new Point2D.Double(p.getY(), -p.getX());
}
This just uses default java classes, java.awt.geom.Point2D.Double inside of java.awt.geom.Point2D
I have two points store in two variable, which forms a line. I want to find a point which is perpendicular to that line from one end point in that line.
Suppose I have two points P1(x1,y1) and P2(x2,y2) then i want to find a third point P3 such that line(P1-P2) is perpendicular to line(P2,P3) and intersect at P2.
First, the angle:
public static double angle (double x1, double y1, double x2, double y2) {
double xdiff = x1 - x2;
double ydiff = y1 - y2;
//double tan = xdiff / ydiff;
double atan = Math.atan2(ydiff, xdiff);
return atan;
}
To get the perpendicular, you must add PI/2 to the angle of the line defined by your two points.
Once you have that angle, the formula is:
x = interceptPt.x + sin(perp_angle) * distance;
y = interceptPt.y + cos(perp_angle) * distance;
If you want to use Java I can recommend to use JTS. Create a LineSegment and use the pointAlongOffset method. Given Points p1 and p2 the code would look like that:
// create LineSegment
LineSegment ls = new LineSegment(p1.getX(), p1.getY(), p2.getX(), p2.getY());
// perpendicular distance to line
double offsetDistance = 10;
// calculate Point right to start point
Coordinate startRight = ls.pointAlongOffset(0, offsetDistance);
// calculate Point left to start point
Coordinate startLeft = ls.pointAlongOffset(0, -offsetDistance);
// calculate Point right to end point
Coordinate endRight = ls.pointAlongOffset(1, offsetDistance);
// calculate Point left to end point
Coordinate endLeft = ls.pointAlongOffset(1, -offsetDistance);
ControlAltDel is already answered but he did a mistake, replaced cos to sin
x = interceptPt.x + cos(angle + 90) * distance;
y = interceptPt.y + sin(angle + 90) * distance;
x,y is point away from (interceptPt.x,interceptPt.y) at (distance) .
(interceptPt.x,interceptPt.y) is point in your line where perpendicular start to drawn.
angle = your line angle with horizontal axis
I got the answer at http://jsfiddle.net/eLxcB/2/
// Start and end point
var startX = 120
var startY = 150
var endX = 180
var endY = 130
R.circle(startX,startY,2);
// Calculate how far above or below the control point should be
var centrePointX = startX
var centrePointY = startY;
// Calculate slopes and Y intersects
var lineSlope = (endY - startY) / (endX - startX);
var perpendicularSlope = -1 / lineSlope;
var yIntersect = centrePointY - (centrePointX * perpendicularSlope);
// Draw a line between the two original points
R.path('M '+startX+' '+startY+', L '+endX+' '+endY);
// Plot some test points to show the perpendicular line has been found
R.circle(100, (perpendicularSlope * 100) + yIntersect, 2);
You can store your points in vec2d, then use some mathematical equations to get the perpendicular point.
vec2d getPerpendicularPoint(vec2d A, vec2d B, float distance)
{
vec2d M = (A + B) / 2;
vec2d p = A - B;
vec2d n = (-p.y, p.x);
int norm_length = sqrt((n.x * n.x) + (n.y * n.y));
n.x /= norm_length;
n.y /= norm_length;
return (M + (distance * n));
}
I am trying to make some sort of 3D Editor with Java and OpenGL. And now I'm implementing the basic functions of an 3D Editor like rotating the camera around a specific Position and zooming. Next I want to do a 3D Picking to select Objects,Lines and Vertices in 3D-Space with the Mouse. I thought this is gonna to be easy because I can already select Objects when the Camera is focusing them.
Here is the example of the Selection of Objects with the Camera focus:
In the Class Camera there is this Method:
public boolean isVecInFocus(Vec3 vec) {
//returns the distance between camera and target
float c = new Vec3(posX,posY,posZ).getDistanceTo(vec);
// returns a Vector by drawing an imiginary line with the length of c and the position and rotation of the camera
Vec3 target = getFocusedPoint(c);
//checks if the calculated Vector is near to the target
if(target.x > vec.x - 0.05f && target.x < vec.x + 0.05f && target.y > vec.y - 0.05f && target.y < vec.y + 0.05f && target.z > vec.z - 0.05f && target.z < vec.z + 0.05f) {
return true;
} else {
return false;
}
}
Now, I want to do the same with the Mouse input:
//Mouse positions
float mX = Mouse.getX();
float mY = Mouse.getY();
//My test Vector
Vec3 vec = new Vec3(-5,5,-8);
//Camera Position
Vec3 camV = new Vec3(cam.getPosX(),cam.getPosY(),cam.getPosZ());
//Distance from Test Vector to Camera
float c = camV.getDistanceTo(vec);
//Calculating of the aspect between width and height (Because fov_x and fov_y are different because of the Screen Resolution, I think)
float aspect = (float) sb.getDisplayWidth() / (float) sb.getDisplayHeight();
//Normal fov refers to fov_y, so here is the fov_x
float fovx = cam.fov * aspect;
//Changing the Rotations to calculate the target Vector with the values of the Mouse position and rotations , not the Camera
float rotY = cam.getRotationY() + (fovx / (float) sb.getDisplayWidth()) * (mX) - (fovx / 2F);
float rotX = cam.getRotationX() + (cam.fov / (float) sb.getDisplayHeight()) * ((float) sb.getDisplayHeight() - mY) - (cam.fov / 2F);
//Calculating the target Vector with simple Math ...
double xDis = c * Math.sin(Math.toRadians(rotY)) * Math.cos(Math.toRadians(rotX));
double yDis = c * Math.sin(Math.toRadians(rotX));
double zDis = c * Math.cos(Math.toRadians(rotY)) * Math.cos(Math.toRadians(rotX));
float posX = (float) (camV.x + xDis);
float posY = (float) (camV.y - yDis);
float posZ = (float) (camV.z - zDis);
Vec3 target = new Vec3(posX,posY,posZ);
//Check if the target Vector and the Test Vector are the same.
If I use this Code, and point with my Mouse at the Test-Vector, the result is not right. The accuracy of the Point gets lower, the bigger the difference between Screen-middle and Mouse position is.
I think it has something to do with the OpenGL Perspective, but I'm not sure ...
I got x and y (My position) and also destination.x and destination.y (where I want to get). This is not for homework, just for training.
So what I did already is
float x3 = x - destination.x;
float y3 = y - destination.y;
float angle = (float) Math.atan2(y3, x3);
float distance = (float) Math.hypot(x3, y3);
I got angle and distance but don't know how to make it move directly.
Please help!
Thanks!
Maybe using this will help
float vx = destination.x - x;
float vy = destination.y - y;
for (float t = 0.0; t < 1.0; t+= step) {
float next_point_x = x + vx*t;
float next_point_y = y + vy*t;
System.out.println(next_point_x + ", " + next_point_y);
}
Now you have the coordinates of the points on the line. Choose step to small enough according to your need.
To calculate the velocity from a given angle use this:
velx=(float)Math.cos((angle)*0.0174532925f)*speed;
vely=(float)Math.sin((angle)*0.0174532925f)*speed;
*speed=your speed :) (play with the number to see what is the right)
I recommend calculating the x and y components of your movement independently.
using trigonometric operations slows your program down significantly.
a simple solution for your problem would be:
float dx = targetX - positionX;
float dy = targetY - positionY;
positionX = positionX + dx;
positionY = positionY + dy;
in this code example, you calculate the x and y distance from your position to your target
and you move there in one step.
you can apply a time factor (<1) and do the calculation multiple times, to make it look like your object is moving.
Note that + and - are much faster than cos(), sin() etc.