I have a list of XY points which represent text in a "dot matrix" form. The origin of the first point in the set in the set is 0,0(upper left point). (I can change the points to incremental coordinates too)
I would like to project or wrap the points around a radius like so:
I've tried to follow this answer, but the results are not what I expect:
How To Project Point Onto a Sphere
I've also tried converting to Polar coordinates and imposing
the R coordinate to determine the Theta and the convert back to cartesian, but that does not work either.
For example, the letter T produces this which should then be projected to the curve:
0, .0
0.1, .0
0.2, .0
0.2, .-0.1
0.2, .-0.2
0.2, .-0.3
0.2, .-0.4
0.2, .-0.5
0.2, .-0.6
0.3, .0
0.4, .0
What is the process to get my points to follow a radial curve
Say you want to curve around a circle centered at (cx, cy) with radius r, using dots with size (diameter) 0.1.
The distance, d the center of a dot at (x, y) is from center of the circle is:
d = r + y - size / 2
(I've subtracted size / 2 to get the position of the center of dot)
The angle theta (in radians) around the circle is:
theta = (x + size / 2) / r
The position of the dot is then:
dx = cx + d * cos(theta)
dy = cy - d * sin(theta)
Here's an example using SVG and Javascript
var svg = document.getElementById('curve-text');
var NS = "http://www.w3.org/2000/svg";
var points = [
[0, 0],
[0.1, 0],
[0.2, 0],
[0.2, -0.1],
[0.2, -0.2],
[0.2, -0.3],
[0.2, -0.4],
[0.2, -0.5],
[0.2, -0.6],
[0.3, 0],
[0.4, 0]
];
var cx = 2;
var cy = 2;
var r = 2;
var size = 0.1;
drawCircle(cx, cy , r - 0.7);
var circumference = Math.PI * 2 * r;
var angle = 360 / circumference;
var radians = 1 / r;
// Add 12 copies of the letter T around the circle
for (var j = 0; j < 12; j++) {
for (var i = 0; i < points.length; i++) {
addDots(points[i][0] + j, points[i][1], size, cx, cy, r)
}
}
function drawCircle(cx, cy , r) {
var circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', cx);
circle.setAttributeNS(null, 'cy', cy);
circle.setAttributeNS(null, 'r', r);
circle.setAttributeNS(null, 'fill', 'none');
circle.setAttributeNS(null, 'stroke', 'black');
circle.setAttributeNS(null, 'stroke-width', '0.02');
svg.appendChild(circle);
}
function addDots(x, y, size, cx, cy, r) {
var dotR = size / 2;
var d = r + (y - dotR);
var theta = (x + dotR) / r;
var x = cx + d * Math.cos(theta);
var y = cy - d * Math.sin(theta);
var dot = document.createElementNS(NS, 'circle');
dot.setAttributeNS(null, 'cx', x);
dot.setAttributeNS(null, 'cy', y);
dot.setAttributeNS(null, 'r', dotR);
svg.appendChild(dot);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" id="curve-text" width="200" height="200">
</svg>
You need to take the (X, Y) coordinates as if they were (Θ, R) polar coordinates (in this order), and convert to Cartesian.
Experiment a little to understand the effect of horizontal or vertical translation before the transformation, as well as h/v scaling. Ensure that for all points R > r, the radius of the circle.
Related
I have a list of 2D coordinates that draw a shape, e.g. [{12, 14}, {22, 44}, {59, 33}, ...]
I'd like to be able to take this shape, and center it in a canvas of arbitrary size (let's say 400x400) and have it take as much space as possible.
I've figured out how to normalize the list so it's in the 0-1 range, but ended up being stuck there when trying to then scale it up to the desired size.
Any help would be appreciated!
Find minimal and maximal values for X and Y coordinates xmin, xmax, ymin, ymax
Calculate point cloud width and height, and middle coordinates
cw = xmax - xmin
ch = ymax - ymin
mx = (xmax + xmin) / 2
my = (ymax + ymin) / 2
Now find coefficient
if cw * canvas.height >= ch * canvas.width
coeff = canvas.width / cw
else
coeff = canvas.height / ch
Now get canvas center
centerx = canvas.width / 2
centery = canvas.height / 2
and apply the next transformation to every point (x,y):
screenx = centerx + coeff * (x - mx)
screeny = centery + coeff * (y - my)
Wondering how to take the definition of a half circle arc and convert it into quadratic bezier curve, using the lowercase letter b as an example.
var c = document.querySelector('canvas')
var ctx = c.getContext('2d')
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(0, 200)
ctx.lineTo(100, 200)
ctx.quadraticCurveTo(0, 100, 200, 0)
ctx.stroke()
<canvas></canvas>
I don't see how to apply this (which I think is using an outdated canvas API) to the current canvas API for quadratic bezier curves. Where the right side of the b is a half-circle.
var c = document.querySelector('canvas')
var ctx = c.getContext('2d')
ctx.width = ctx.height = 100
ctx.beginPath()
ctx.moveTo(0, 20)
ctx.lineTo(0, 40)
ctx.lineTo(10, 40)
half(10, 40, 5, 10, 30)
ctx.lineTo(0, 30)
ctx.stroke()
function half(sx, sy, radius, endx, endy, clock) {
var x = sx + radius
var y = sy - radius
var cpx = sx + radius
var cpy = sy
ctx.quadraticCurveTo(cpx, cpy, x, y)
var x = endx
var y = endy
var cpx = sx + radius
var cpy = endy
ctx.quadraticCurveTo(cpx, cpy, x, y)
}
<canvas></canvas>
I have a problem where I have to select all squares (think pixels) that are partially within a circle (even if the circle only cuts through a small corner of the square, but not if it goes through one of the corner vertices). The radius is an integer multiple of the pixel size.
The problem is that the center of the circle is between pixels, i.e. on the corner vertices of four pixels.
I want to visit each pixel only once.
For example, I would like to select all white pixels in the following images:
R = 8 px
R = 10 px
For a circle with the center in the center of a pixel, this wouldn't be a problem, and I could use the usual form of the Bresenham algorithm:
public void checkCircle(int x0, int y0, int radius) {
int x = radius;
int y = 0;
int err = -x;
while (x > 0) {
while (err <= 0) {
y++;
err += 2 * y + 1;
}
checkVLine(x0 + x, y0 - y, y0 + y);
checkVLine(x0 - x, y0 - y, y0 + y);
x--;
err -= 2 * x + 1;
}
checkVLine(x0, y0 - radius, y0 + radius);
}
public void checkVLine(int x, int y0, int y1) {
assert(y0 <= y1);
for (int y = y0; y <= y1; y++)
checkPixel(x, y);
}
Sadly, I don't see how to adapt it to support inter-pixel circles.
For the first quadrant - cell should be marked if its left bottom corner lies inside circle, so you can rasterize with simple loops
for dy = 0 to R-1
dx = 0
sq = R * R - dy * dy
while dx * dx < sq
mark (dx, dy)
mark (dx, -dy-1)
mark (-dx-1, dy)
mark (-dx-1, -dy-1)
To fill whole horizontal lines, you can calculate max value for dx
for dy = 0 to R-1
mdx = Floor(Sqrt(R * R - dy * dy))
fill line (-mdx-1,dy)-(mdx,dy)
fill line (-mdx-1,-dy-1)-(mdx,-dy-1)
I am working on a game that rotates an object on the z axis. I need to limit the total rotation to 80 degrees. I tried the following code, but it doesn't work. minAngle = -40.0f and maxAngle = 40.0f
Vector3 pos = transform.position;
pos.z = Mathf.Clamp(pos.z, minAngle, maxAngle);
transform.position = pos;
The code you posted clamps the z position. What you want is to use transform.rotation
void ClampRotation(float minAngle, float maxAngle, float clampAroundAngle = 0)
{
//clampAroundAngle is the angle you want the clamp to originate from
//For example a value of 90, with a min=-45 and max=45, will let the angle go 45 degrees away from 90
//Adjust to make 0 be right side up
clampAroundAngle += 180;
//Get the angle of the z axis and rotate it up side down
float z = transform.rotation.eulerAngles.z - clampAroundAngle;
z = WrapAngle(z);
//Move range to [-180, 180]
z -= 180;
//Clamp to desired range
z = Mathf.Clamp(z, minAngle, maxAngle);
//Move range back to [0, 360]
z += 180;
//Set the angle back to the transform and rotate it back to right side up
transform.rotation = Quaternion.Euler(transform.rotation.eulerAngles.x, transform.rotation.eulerAngles.y, z + clampAroundAngle);
}
//Make sure angle is within 0,360 range
float WrapAngle(float angle)
{
//If its negative rotate until its positive
while (angle < 0)
angle += 360;
//If its to positive rotate until within range
return Mathf.Repeat(angle, 360);
}
Here's a static version of the nice solution by Imapler that, instead of changing the angle itself, it returns the campled angle, so it can be used with any axis.
public static float ClampAngle(
float currentValue,
float minAngle,
float maxAngle,
float clampAroundAngle = 0
) {
return Mathf.Clamp(
WrapAngle(currentValue - (clampAroundAngle + 180)) - 180,
minAngle,
maxAngle
) + 360 + clampAroundAngle;
}
public static float WrapAngle(float angle)
{
while (angle < 0) {
angle += 360;
}
return Mathf.Repeat(angle, 360);
}
Or if you don't expect to use the WrapAngle method, here's an all-in-one version:
public static float ClampAngle(
float currentValue,
float minAngle,
float maxAngle,
float clampAroundAngle = 0
) {
float angle = currentValue - (clampAroundAngle + 180);
while (angle < 0) {
angle += 360;
}
angle = Mathf.Repeat(angle, 360);
return Mathf.Clamp(
angle - 180,
minAngle,
maxAngle
) + 360 + clampAroundAngle;
}
So now you can do:
transform.localEulerAngles.x = YourMathf.ClampAngle(
transform.localEulerAngles.x,
minX,
maxX
);
I have a bezier curve defined by start point, end point and 2 control points (parameters of this: http://www.w3schools.com/tags/canvas_beziercurveto.asp).
First, I need to calculate width and height of this curve. If I make rectangle around a curve, its width and height is what I need.
Then I need to start point (x,y of left top corner) of this rectangle.
How can I calculate that ? Thanks.
For true bounds, you need to compute the extremities of the curve's component functions, then plug those into the bezier function for the (x,y) coordinates for each extremity. I cover this over at http://pomax.github.io/bezierinfo/#extremities, which also explains how to do most of the steps required to get there in the text leading up to the extremities section. paragraphs 11 and 12/13 then cover bounding boxes (plain, which you're probably interested in, and tight, respectively)
I found approximate solution in some other topic (I don't remember which one) but here is simple JS function to calculate it:
function getCurveBoundary(ax, ay, bx, by, cx, cy, dx, dy) {
var tobx = bx - ax;
var toby = by - ay;
var tocx = cx - bx;
var tocy = cy - by;
var todx = dx - cx;
var tody = dy - cy;
var step = 1 / 40; // precission
var d, px, py, qx, qy, rx, ry, tx, ty, sx, sy, x, y, i, minx, miny, maxx, maxy;
function min(num1, num2) {
if (num1 > num2)
return num2;
if (num1 < num2)
return num1;
return num1;
}
function max(num1, num2) {
if (num1 > num2)
return num1;
if (num1 < num2)
return num2;
return num1;
}
for (var i = 0; i < 41; i++)
{
d = i * step;
px = ax + d * tobx;
py = ay + d * toby;
qx = bx + d * tocx;
qy = by + d * tocy;
rx = cx + d * todx;
ry = cy + d * tody;
toqx = qx - px;
toqy = qy - py;
torx = rx - qx;
tory = ry - qy;
sx = px + d * toqx;
sy = py + d * toqy;
tx = qx + d * torx;
ty = qy + d * tory;
totx = tx - sx;
toty = ty - sy;
x = sx + d * totx;
y = sy + d * toty;
if (i == 0)
{
minx = x;
miny = y;
maxx = x;
maxy = y;
}
else
{
minx = min(minx, x);
miny = min(miny, y);
maxx = max(maxx, x);
maxy = max(maxy, y);
}
}
return {x: Math.round(minx), y: Math.round(miny), width: Math.round(maxx - minx), height: Math.round(maxy - miny)};
}
If you're looking for an approximate solution, it's pretty easy to compute a solution that's always big enough to cover the curve, but might be too big.
Beziers satisfy the 'convex hull property' which means that you can take a bounding box of your control points and that will bound the curve itself.
If you're looking for something more accurate, then the simplest way is to evaluate a bunch of different points on the curve and take the bounding box of those points on the curve. You can vary the number of points you test in order to change the quality/speed tradeoff.
If you're looking for something that directly computes the exact answer then what you need is a root finder to look for extrema of the functions x(t) and y(t).