We Keep Coding

Procedural texture uv error

I am creating a game with procedural generated plane and uv, it works mostly fine, but there is one place where the uv seems distorted in a very confusing way.
Intro: the uv is mapped in a "Global" uv coordinates, instead of a local one, because the texture has to be aligned with adjacent planes. Each texture has a tiling of 2*2, I introduce a uv scale of 2 which means each plane "v" coordinates will be mapped in range [0, 0.5] of the texture vertically, to make sure horizontally "u" coordinates do not go out of range [0, 1]. (horizontally the noise is unpredictable to some extend).
code:
Vector2[] CalculateU(float[] leftXMap, float[] rightXMap) {
int length = leftXMap.Length;
float totalHeight = (length - 1) * 1; // distance between two vertices vertically is 1
float uvheight = totalHeight * uvScale; // uvScale is 2, purpose is to map a plane's v(vertically), into a range of [0, 0.5]..
Vector2[] UMap = new Vector2[length * 2];
for(int i = 0; i < length; i++) {
float left = leftXMap[i];
float right = rightXMap[i];
// make left and right positive.
while (left < 0) {
left += uvheight;
}
while(right < 0) {
right += uvheight;
}
float leftu = (left % uvheight) / uvheight;
float leftv = (i / (float)(length-1)) / uvScale;
float rightu = (right % uvheight) / uvheight;
float rightv = leftv; //(i / (float)length) / 2f;
UMap[i * 2] = new Vector2(leftu, leftv);
UMap[i * 2 + 1] = new Vector2(rightu, rightv);
}
}
explain:
the parameters for the function, are the noise maps for the generated plane. the noise is the x coordinates. while the y coordinates are simple value of 0, 1, 2, .... (length-1).
Distorted texture:
Zoomed in:

I managed to solved the problem, the UV map gets messed where the left noise map values are negative, and right noise map is positive values.
Since I always try to map all negative values to positive values, so left noise map, which is also be my left vertex x coordinates, will be mapped to positive values. but then it will be larger than right noise map (right vertex x coordinates). then it messed up the UV.
I solved it by not mapping at all, and suddenly realize that UV map values can be negative, I don't have to map at all!

Draw 2D trail of ship. XNA

I've been looking for a solution to this for some time now and already have many elements to work with but not really how to piece them together.
Objective: Draw a trail for the player's ship.
So far: Since the ship's direction is unpredictable I have only the previous positions of the player's ship to work with. To draw the trail I could simply draw a pixel (or a texture) at the previous position of the player but this is memory expensive and it doesn't draw curves, it won't achieve a pleasing to the eye curved effect.
I've been looking into Beziers Paths and Cathmull Rom for solutions.
Now I can get the control points for a given point, then from 2 points and 2 control points calculate a curve, from here I make an array of VertexPositionColor with a distance between points to make a triangleStrip from the curve.
These are the main functions I have so far:
public Vector2[] GetControlPoints(Vector2 p0, Vector2 p1, Vector2 p2, float tension = 0.5f)
{
// get length of lines [p0-p1] and [p1-p2]
float d01 = Vector2.Distance(p0, p1);
float d12 = Vector2.Distance(p1, p2);
// calculate scaling factors as fractions of total
float sa = tension * d01 / (d01 + d12);
float sb = tension * d12 / (d01 + d12);
// left control point
float c1x = p1.X - sa * (p2.X - p0.X);
float c1y = p1.Y - sa * (p2.Y - p0.Y);
// right control point
float c2x = p1.X + sb * (p2.X - p0.X);
float c2y = p1.Y + sb * (p2.Y - p0.Y);
return new Vector2[] {new Vector2(c1x, c1y), new Vector2(c2x, c2y) };
}
// Given 2 points and 2 control points
public static VertexPositionColor[] bezierCurve(Vector2 start, Vector2 end, Vector2 c1, Vector2 c2)
{
VertexPositionColor[] points = new VertexPositionColor[SUBDIVISIONS + 2];
float fraction;
for (int i = 0; i < SUBDIVISIONS + 2; i++)
{
fraction = i * (1f / (float)SUBDIVISIONS);
points[i] = new VertexPositionColor(new Vector3((float)((start.X * Math.Pow((1 - fraction), 3))
+(c1.X * 3 * fraction * Math.Pow(1-fraction, 2))
+(c2.X * 3 * Math.Pow(fraction,2) * (1-fraction))
+(end.X * Math.Pow(fraction,3))),
(float)((start.Y * Math.Pow((1 - fraction), 3))
+ (c1.Y * 3 * fraction * Math.Pow(1 - fraction, 2))
+ (c2.Y * 3 * Math.Pow(fraction, 2) * (1 - fraction))
+ (end.Y * Math.Pow(fraction, 3))), 0), UNLIT);
}
return points;
}
/*
* This function treats the curve as a series of straight lines and calculates points on a line perpendicular to each point, resulting in two points THICKNESS appart.
* Requires THICKNESS to be set
*/
public static VertexPositionColor[] curveToStrip(VertexPositionColor[] curve)
{
VertexPositionColor[] strip = new VertexPositionColor[curve.Length * 2];
VertexPositionColor[] new1 = new VertexPositionColor[curve.Length];
VertexPositionColor[] new2 = new VertexPositionColor[curve.Length];
for (int i = 0; i < curve.Length; i++)
{
if (i < curve.Length-1)
{
Vector2 p1 = new Vector2(curve[i].Position.X, curve[i].Position.Y);
Vector2 p2 = new Vector2(curve[i + 1].Position.X, curve[i + 1].Position.Y);
Vector2 perpPoint = perpendicularPoint(p1, p2);
new1[i] = new VertexPositionColor(new Vector3(distanceToPoint(p1, perpPoint, THICKNESS / 2), 0), UNLIT);
new2[i] = new VertexPositionColor(new Vector3(distanceToPoint(p1, perpPoint, -1 * THICKNESS / 2), 0), UNLIT);
}
else
{
Vector2 p1 = new Vector2(curve[i].Position.X, curve[i].Position.Y);
Vector2 p2 = new Vector2(curve[i - 1].Position.X, curve[i - 1].Position.Y);
Vector2 perpPoint = perpendicularPoint(p1, p2);
new1[i] = new VertexPositionColor(new Vector3(distanceToPoint(p1, perpPoint, -1 * THICKNESS / 2), 0), UNLIT);
new2[i] = new VertexPositionColor(new Vector3(distanceToPoint(p1, perpPoint, THICKNESS / 2), 0), UNLIT);
}
}
I thought about calling the functions on the draw phase but this seems very expensive just to make a tiny curve and to draw a bigger Beziers path I imagine it worse. Since I would get a point at each frame, each function would be called to calculate the curve between points just to draw 1 curve of 3 pixels (or less).
How can I proceed? Any suggestions?
I am still a beginner on this kind of stuff!
All this I got from several sources:
CathmullRom
Beziers and Triangle strip

http://www.imagehosting.cz/images/trails.gif
I will just briefly explain how this works:
It is function that receives position, it is called each time you want add next segment of trail.
When function is called it adds two vertices on position, look at tangent vector from previous step, creates normal vector to current position and place vertices along that normal according to trail width.
Next it looks to at previous two vertexes and align them according to average of current and previous tangent, creating trapezoid.
I suggest to leave calculation of fading on GPU (effectively using approach of GPU particles).
If you know velocity vector of object when you are calling update of trail you can use it to optimize that algorithm. Use of dynamic vertex buffer is probably without saying (just use your own vertex format that will include current time at moment when you create those vertices so you can fade it on GPU).

One way could be that you create a list of trails/particles, and you init that on every frame or how much you like. i will try to explain in pseudo code below. i also rotate a bit every trail, and use different size and color of smoke texture, and added a bit of ofsset +- 5 pixels on init.
class Trail
position as vector2d
duration as single
velocity as vector2d
fade as integer = 1
active = true
end class
class Trails
inherits list of Trail
sub Init(position as vector2d, velocity as vector2d)
// add trail to list
end sub
sub Update()
for each trail in me.findAll(function(c) c.active))
position += velocity
fade -= .05 // or some value
end for
me.removeAll(function(c) not(c.active)) // remove from list when unused
end sub
sub Draw()
for each trail in me.findAll(function(c) c.active))
draw(smokeTexture, position, size, rotate, color * trail.fade)
end for
end sub
end class
by this i have achieved this effect, it's barely visible but it gives effect.

How to rotate a 3D model based on the projection coordinates

I'm trying to implement something using OpenTK in C# where when you render a 3d plot, you can rotate it around the z axis (pointing up) as I move the mouse.
I already have it working but as shown below, I had to come up with an arbitrary constant 500;
The equation is:
arc_length = radius * theta
theta = arc_length / radius
where radius = eye_pos.Length
arc_length is the delta_x in model coordinate, but
(e.X - mouse_down_pos.X) is in screen coordinate.
so that 500 was used to map model coordinate to screen projected coordinate.
QUESTION: is there a way to eliminate this constant and properly obtain the conversion factor?
My educated guess is that I should use somehow multiply [delta_x, 0, 0] by inverse of the projection matrix...but do not have a clue how.
private static Vector3 eye_pos = new Vector3(30.0f, 0.0f, 0.0f);
GL.MatrixMode(MatrixMode.Modelview);
Matrix4 lookat = Matrix4.LookAt(eye_pos.X, eye_pos.Y, eye_pos.Z, 0, 0, 0, 0, 0, 1);
...
private void glControl1_MouseMove(object sender, MouseEventArgs e)
{
if (mouse_op == Mouse_Operation.Rotate)
{
decimal yaw = (decimal)MathHelper.DegreesToRadians((e.X - mouse_down_pos.X) * 500 / eye_pos.Length) + ref_yaw;
SetYawAndRedraw(yaw);
}
}

Calculate angle from matrix transform

I have following line of code:
I have applied few rotation to the rectangle at without knowing values (of how many degrees). Now I want to get Rotation or angle of element in 2D.
Rectangle element = (Rectangle)sender;
MatrixTransform xform = element.RenderTransform as MatrixTransform;
Matrix matrix = xform.Matrix;
third.Content = (Math.Atan(matrix.M21 / matrix.M22)*(180/Math.PI)).ToString();
and the matrix is like following
|M11 M12 0|
|M21 M22 0|
|dx dy 1| which is Transformation Matrix I guess !!
This does not seems to be correct value.
I want to get angles in 0 to 360 degrees

FOR FUTURE REFERENCE:
This will give you the rotation angle of a transformation matrix in radians:
var radians = Math.Atan2(matrix.M21, matrix.M11);
and you can convert the radians to degrees if you need:
var degrees = radians * 180 / Math.PI;

You can use this:
var x = new Vector(1, 0);
Vector rotated = Vector.Multiply(x, matrix);
double angleBetween = Vector.AngleBetween(x, rotated);
The idea is:
We create a tempvector (1,0)
We apply the matrix transform on the vector and get a rotated temp vector
We calculate the angle between the original and the rotated temp vector
You can play around with this:
[TestCase(0,0)]
[TestCase(90,90)]
[TestCase(180,180)]
[TestCase(270,-90)]
[TestCase(-90, -90)]
public void GetAngleTest(int angle, int expected)
{
var matrix = new RotateTransform(angle).Value;
var x = new Vector(1, 0);
Vector rotated = Vector.Multiply(x, matrix);
double angleBetween = Vector.AngleBetween(x, rotated);
Assert.AreEqual(expected,(int)angleBetween);
}

Your answers will be in radians, http://social.msdn.microsoft.com/forums/en-US/netfxbcl/thread/c14fd846-19b9-4e8a-ba6c-0b885b424439/.
So simply convert the values back to degrees using the following:
double deg = angle * (180.0 / Math.PI);

Rotating a Microsoft.XNA.Framework.Rectangle and creating a rectangle based on that rotation?

I've been trying to do this for a while but haven't had much success. All I want to do is rotate the rectangle and then create a new rectangle which encompasses the rotated points.
Anyone have any ideas how it should be done properly?
The code I have doesn't work, but I'm not sure where it's going wrong exactly (the numbers make me think it actually works), for example if I have a rectangle with the following values:
{X:865 Y:76 Width:22 Height:164}
The result is:
{X:1863 Y:1740 Width:164 Height:22}
Where it is rotated -1.57094443
What I do is grab all four points of the original rectangle and rotate them with this function:
static public Vector2 RotateVectorAround(Vector2 anchor, Vector2 vector, float rotation)
{
Matrix mat = new Matrix();
mat.Translation = new Vector3(vector.X - anchor.X, vector.Y - anchor.Y, 0);
Matrix rot = new Matrix();
rot = Matrix.CreateRotationZ(rotation);
mat *= rot;
mat.Translation += new Vector3(anchor.X, anchor.Y, 0);
return new Vector2(mat.Translation.X, mat.Translation.Y);
}
Where 'anchor' is the pivot point (I'm not sure if this function is mathematically sound), then I determine the corners of the rotated rectangle with this:
Vector2 newTopLeft = new Vector2( Math.Min(Math.Min(topleft.X, bottomRight.X), Math.Min(bottomleft.X, topright.X)),
Math.Min(Math.Min(topleft.Y, bottomRight.Y), Math.Min(bottomleft.Y, topright.Y)));
Vector2 newBottomRight = new Vector2(
Math.Max(Math.Max(topleft.X, bottomRight.X), Math.Max(bottomleft.X, topright.X)),
Math.Max(Math.Max(topleft.Y, bottomRight.Y), Math.Max(bottomleft.Y, topright.Y) ));

You can multiply the points of the rectangle with a rotation matrix.
so given point P in a rotation will result in point R
where a is the rotation
a = degrees * (PI/180)
Rx = Px * cos(a) + Py * -sin(a)
Ry = Px * sin(a) + Py * cos(a)
to rotate about a point you can substract the pivot point before rotating it and add them after the rotation again (so the rotation is virtually around (0,0)
Px = Px - PivotX
Py = Py - PivotY
Rx = Px * cos(a) + Py * -sin(a)
Ry = Px * sin(a) + Py * cos(a)
Px = Rx + PivotX
Py = Ry + PivotY
I would not use the 3'th dimension here for a 2d rotation
in XNA that is something like (sorry no VStudio here):
point -= pivot
point = Vector2.Transform(point, Matrix.CreateRotationZ(angle));
point += pivot