I've drawn a linechart with g.raphael. I've made a custom x-axis with my own values. And now I want these values to be rotated 90 degrees, so they're vertical instead of horizontal.
To do that, I'm using raphaels rotate() function. And this works perfectly in both IE (8) and Opera. But in Firefox nothing happens, and Firebug prints this error
Unexpected value rotate(90 NaN Infinity) parsing transform attribute.
I can't find anything about this error elsewhere, and I can't see how it isn't correct. And even more so, I find it extremely weird that it works in the other browsers.
Anybody have a clue about this?
My code - where xcoor is a simple int list of values 0-30:
for (var i in xcoor) {
var dato = new Date();
dato.setDate(new Date().getDate() - i);
var xTxt = r.text(30 + (i * (725 / 30)), 315, dato.getDate() + '/' + (dato.getMonth() + 1)).rotate(90);
}
Well, after hours of googling, reading and more googling, I finally found a solution.
I still don't get why the first one doesn't work. But none the less I figured out a way that works in all the browsers:
for (var i in xcoor) {
var dato = new Date();
dato.setDate(new Date().getDate() - i);
var xTxt = blokCanvas.text(40 + (i * (725 / 30)), 315, dato.getDate() + '/' + (dato.getMonth() + 1))
xTxt.rotate(90, (40 + (i * (725 / 30))), 315);
}
The rotate-function comes in more different version. One of them is this
rotate(degrees, x, y)
Where degrees represents the number of degrees the item should rotate and x, y represents the coordinates of the point around which the item should be rotated.
Setting the x,y values to the same as the ones placing the item in the first place gives me the wanted result.
Yay!
Related
This is probably something simple I'm overlooking. But I'm trying to get the position of an Object3D after panning. I'm using OrbitControls.
I've tried object.position, but the result returned is always the same. This is an example fiddle:
https://jsfiddle.net/jmg157/b9xxdubc/
I tried grid.position, but again, it always returned (0, 0, 0), as I set it initially. I also tried setting an ID for the DOM element (container), and using jQuery's position() method, but no luck with that either.
So if I right click and pan around the grid, how can I get the new position of the grid on the screen (i.e., top, left)?
As always, many thanks!
This seemed to do the trick, thanks to the answer of this question: Converting 3D position to 2d screen position [r69!]
I just call this method whenever there is a change in controls (i.e., panning, rotating, etc.) to get the updated position.
function getScreenPosition(object, camera) {
var vector = new THREE.Vector3();
var widthHalf = 0.5 * renderer.context.canvas.width;
var heightHalf = 0.5 * renderer.context.canvas.height;
object.updateMatrixWorld();
vector.setFromMatrixPosition(object.matrixWorld);
vector.project(camera);
vector.x = (vector.x * widthHalf) + widthHalf;
vector.y = -(vector.y * heightHalf) + heightHalf;
return vector;
}
Where left is vector.x and top is vector.y.
Sorry, for weird topic name, but I don't know how else to name it.
The problem is.. I have a zedgraph control. There is some lines drawn inside.
I have the coords of left border of chart area and right border of chart area.
I draw vertical lines as PictureBoxes over zedgraph control, so they moves in different coords. This vertical lines can be moved to left and right.
That way I trying to get X value in coords of XAxis:
public double Get_X_InContextOfChart(int left_coord_of_border) //Left of vertical line
{
//zed_graph.GraphPane.XAxis.Scale.Min is minimal X value shown on XAxis
//zed_graph.GraphPane.Chart.Rect.Left is Left of YAxis
//Same for else if, aside of using Right and maximum X at right
if (zed_graph.GraphPane.XAxis.Scale.Min != 0) //to avoid division by zero
return (left_coord_of_border * zed_graph.GraphPane.XAxis.Scale.Min) / zed_graph.GraphPane.Chart.Rect.Left;
else if (zed_graph.GraphPane.XAxis.Scale.Max != 0)
return (left_coord_of_border * zed_graph.GraphPane.XAxis.Scale.Max) / zed_graph.GraphPane.Chart.Rect.Right;
return double.NaN;
}
This code calculate X fine as long as else if used, but in my example it calculate something wrong.
I hope someone understand this.
Updated with new code:
public double Get_X_InContextOfChart(int left_coord_of_border)
{
double scale_left = zed_graph.GraphPane.XAxis.Scale.Min;
double scale_right = zed_graph.GraphPane.XAxis.Scale.Max;
double graph_width = zed_graph.GraphPane.Chart.Rect.Width;
double x = left_coord_of_border;
return scale_left + (scale_right - scale_left) / graph_width * x;
}
Result:
scale_left = -0.1
scale_right = 0.9
graph_width = 540 // pixels
x = 190 // pixels
scale_x = scale_left + (scale_right - scale_left) / graph_width * x // 0.25
I am trying to control a robot turret using Kinect Facetracking. When user moves his head, the turret moves in that same direction. I'm able to get the yaw, pitch and roll of the user's head and I control the turret using this data. My current attempts work, but do not move the turret fluidly. The movement is sporadic and choppy at times. What I want is smooth movements and a nice fluid motion.
So the main problem I have is that since the data is being received realtime, I cannot reliably predict what the user is going to do next. I need there to be as little lag as possible between the receiving the data and the commands.
Another problem is that the data coming from the Kinect is not perfect and sometimes fluctuates a bit. It's good data, but if I don't do something to it, then there will be choppiness.
How can I smooth out the data coming from the Kinect so that it is as fluid as possible?
I have some ideas, but I'd rather not influence you and cause you to think like me
The TransformSmoothParameters joint filtering helped some. But the most remarkable change happened when I stumbled upon this: http://www.dyadica.co.uk/journal/very-simple-kalman-in-c/
So basically just pass your data through update and it starts to filter it. Very impressed. Very simple. Works extraordinarily well. I think this is more of a moving average rather than Kalman filter, but it is exactly what I needed. Hope this helps those who are trying to do something similar.
private double Q = 0.000001;
private double R = 0.0001;
private double P = 1, X = 0, K;
private void measurementUpdate()
{
K = (P + Q) / (P + Q + R);
P = R * (P + Q) / (R + P + Q);
}
public double update(double measurement)
{
measurementUpdate();
double result = X + (measurement - X) * K;
X = result;
// Debug.WriteLine("Measurement " + result + " y: " + y);
return result;
}
So I've managed myself to write the first part (algorithm) to calculate each tile's position where should it be placed while drawing this map (see bellow). However I need to be able to convert mouse location to the appropriate cell and I've been almost pulling my hair off because I can't figure out a way how to get the cell from mouse location. My concern is that it involves some pretty high math or something i'm just something easy i'm not capable to notice.
For example if the mouse position is 112;35 how do i calculate/transform it to to get that the cell is 2;3 at that position?
Maybe there is some really good math-thinking programmer here who would help me on this or someone who knows how to do it or can give some information?
var cord:Point = new Point();
cord.x = (x - 1) * 28 + (y - 1) * 28;
cord.y = (y - 1) * 14 + (x - 1) * (- 14);
Speaking of the map, each cell (transparent tile 56x28 pixels) is placed in the center of the previous cell (or at zero position for the cell 1;1), above is the code I use for converting cell-to-position. I tried lot of things and calculations for position-to-cell but each of them failed.
Edit:
After reading lot of information it seems that using off screen color map (where colors are mapped to tiles) is the fastest and most efficient solution?
I know this is an old post, but I want to update this since some people might still look for answers to this issue, just like I was earlier today. However, I figured this out myself. There is also a much better way to render this so you don't get tile overlapping issues.
The code is as simple as this:
mouse_grid_x = floor((mouse_y / tile_height) + (mouse_x / tile_width));
mouse_grid_y = floor((-mouse_x / tile_width) + (mouse_y / tile_height));
mouse_x and mouse_y are mouse screen coordinates.
tile_height and tile_width are actual tile size, not the image itself. As you see on my example picture I've added dirt under my tile, this is just for easier rendering, actual size is 24 x 12. The coordinates are also "floored" to keep the result grid x and y rounded down.
Also notice that I render these tiles from the y=0 and x=tile_with / 2 (red dot). This means my 0,0 actually starts at the top corner of the tile (tilted) and not out in open air. See these tiles as rotated squares, you still want to start from the 0,0 pixel.
Tiles will be rendered beginning with the Y = 0 and X = 0 to map size. After first row is rendered you skip a few pixels down and to the left. This will make the next line of tiles overlap the first one, which is a great way to keep the layers overlapping coorectly. You should render tiles, then whatever in on that tile before moving on to the next.
I'll add a render example too:
for (yy = 0; yy < map_height; yy++)
{
for (xx = 0; xx < map_width; xx++)
{
draw tiles here with tile coordinates:
tile_x = (xx * 12) - (yy * 12) - (tile_width / 2)
tile_y = (yy * 6) + (xx * 6)
also draw whatever is on this tile here before moving on
}
}
(1) x` = 28x -28 + 28y -28 = 28x + 28y -56
(2) y` = -14x +14 +14y -14 = -14x + 14y
Transformation table:
[x] [28 28 -56 ] = [x`]
[y] [-14 14 0 ] [y`]
[1] [0 0 1 ] [1 ]
[28 28 -56 ] ^ -1
[-14 14 0 ]
[0 0 1 ]
Calculate that with a plotter ( I like wims )
[1/56 -1/28 1 ]
[1/56 1/28 1 ]
[0 0 1 ]
x = 1/56*x` - 1/28y` + 1
y = 1/56*x` + 1/28y` + 1
I rendered the tiles like above.
the sollution is VERY simple!
first thing:
my Tile width and height are both = 32
this means that in isometric view,
the width = 32 and height = 16!
Mapheight in this case is 5 (max. Y value)
y_iso & x_iso == 0 when y_mouse=MapHeight/tilewidth/2 and x_mouse = 0
when x_mouse +=1, y_iso -=1
so first of all I calculate the "per-pixel transformation"
TileY = ((y_mouse*2)-((MapHeight*tilewidth)/2)+x_mouse)/2;
TileX = x_mouse-TileY;
to find the tile coordinates I just devide both by tilewidth
TileY = TileY/32;
TileX = TileX/32;
DONE!!
never had any problems!
I've found algorithm on this site http://www.tonypa.pri.ee/tbw/tut18.html. I couldn't get it to work for me properly, but I change it by trial and error to this form and it works for me now.
int x = mouse.x + offset.x - tile[0;0].x; //tile[0;0].x is the value of x form witch map was drawn
int y = mouse.y + offset.y;
double _x =((2 * y + x) / 2);
double _y= ((2 * y - x) / 2);
double tileX = Math.round(_x / (tile.height - 1)) - 1;
double tileY = Math.round(_y / (tile.height - 1));
This is my map generation
for(int x=0;x<max_X;x++)
for(int y=0;y<max_Y;y++)
map.drawImage(image, ((max_X - 1) * tile.width / 2) - ((tile.width - 1) / 2 * (y - x)), ((tile.height - 1) / 2) * (y + x));
One way would be to rotate it back to a square projection:
First translate y so that the dimensions are relative to the origin:
x0 = x_mouse;
y0 = y_mouse-14
Then scale by your tile size:
x1 = x/28; //or maybe 56?
y1 = y/28
Then rotate by the projection angle
a = atan(2/1);
x_tile = x1 * cos(a) - y1 * sin(a);
y_tile = y1 * cos(a) + x1 * sin(a);
I may be missing a minus sign, but that's the general idea.
Although you didn't mention it in your original question, in comments I think you said you're programming this in Flash. In which case Flash comes with Matrix transformation functions. The most robust way to convert between coordinate systems (eg. to isometric coordinates) is using Matrix transformations:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html
You would want to rotate and scale the matrix in the inverse of how you rotated and scaled the graphics.
I am a fairly intelligent person, but when I see a certain kind of math I might as well be a gigantic moron. I could really use some help here.
I have been researching a ton of things as I learn iOS game development and I came across a formula while doing some searches. Here is the formula:
x(t) = x(0) + v(0)*t + .5 (F/m) * t^2
Also stated was solving for x and y:
Fx = (x(t) - x(0) - vx(0)*t) * 2m/t^2
Fy = (y(t) - y(0) - vy(0)*t) * 2m/t^2
Source: Box2D.org forums
Now for my actual question, what does that mean? Keep in mind that in this situation I am an idiot. It would be great if someone could explain the variables in simple terms and how they relate to box2d. How would I apply this formula? Here is an example of my code (firing projectiles):
- (void)spawnProjectile:(CGPoint)from direction:(CGPoint)direction inParent:(CCNode*)parentNode
{
double curTime = CACurrentMediaTime();
double timeTillShotDies = curTime + SHOT_TYPE1_EXIST_TIME;
b2Body *shotBody = projectileBodyTracker[nextShot];
b2Vec2 moveToPosition = b2Vec2(from.x/PTM_RATIO, from.y/PTM_RATIO);
shotBody->SetTransform(moveToPosition, 0.0);
shotBody->SetActive(true);
CCSprite *shot = [projectiles objectAtIndex:nextShot];
shot.position = ccp(from.x/PTM_RATIO, from.y/PTM_RATIO);
shot.visible = YES;
[projectilesTracker replaceObjectAtIndex:nextShot withObject:[NSNumber numberWithDouble:timeTillShotDies]];
CCParticleSystemQuad *particle = [projectileParticleTracker objectAtIndex:nextShot];
[particle resetSystem];
nextShot++;
if(nextShot >= projectiles.count) nextShot = 0;
// dx2 and dy2 are analog stick values (see below code)
b2Vec2 force = b2Vec2(dx2, dy2);
shotBody->SetLinearVelocity(force);
[AudioController playLaserShot];
}
In this particular chunk of code I am firing from the player at the angle the analog is at. I also would need to use the formula to fire from the enemy to the player. This is a top down space shooter.
So to summarize, how do I solve constant force over time for x and y, in terms of box2d code?
Extra info:
dx2 = (float)joypadBG2.position.x - (float)convertedPoint.x;
dy2 = (float)joypadBG2.position.y - (float)convertedPoint.y;
All objects are preloaded and kept that way. Bodies are set inactive and sprites set invisible. Particle systems are stopped. The opposite is true for using a projectile again.
Thank you very much for any help you may be able to provide. I hope I haven't forgotten anything.
The first equation describes the movement of an object that is subject to a constant force.
The object starts at position x(0) and has speed v(0). Both x and v are vectors, so in a 2d shooter, x(0) would be (x0,y0), or the xy-position, and v(0) would be (vx0, vy0).
If there is no gravity then F=0 on unpropelled projectiles (projectiles without thrusters),
so the velocity will be constant.
x(t1) = x(t0) + vx * (t1-t0)
y(t1) = y(t0) + vy * (t1-t0)
t1-t0 or dt (delta-t) is the time elapsed since the last time you updated the position of the projectile.
If thusters or gravity are excerting force on an object then the velocity will change over time.
vx(t1) = vx(t0) + ax * (t1-t0)
vy(t1) = vy(t0) + ay * (t1-t0)
a is the acceleration. In a game you usually don't care about mass and force, just acceleration. In physics, a = F/m.
Edit 1:
In computer games, you update the position of an object very frequently (typically around 60 times per second). You have the position and velocity of the object at the previous update and you want to calculate the new position.
You update the position by assuming that the velocity was constant:
positionVectorAt(newTime) = positionVector(lastTime) + velocityVector*(newTime - lastTime);
If the velocity of the object is changed you also update the velocity:
velocityVectorAt(newTime) = velocityVector(lastTime) + accelerationVector*(newTime - lastTime);
Let's say we have a sprite at
positionVector.x=100;
positionVector.y=10;
The initial speed is
velocityVector.x = 3;
velocityVector.y = -10;
The sprite is using thrusters which is giving a horizonal acceleration per second of
thrusterVector.x= 5;
and it is also subject to gravity which gives a vertical acceleration per second of
gravityVector.y = -10;
The code to update the sprites position will be:
deltaTime = now - lastTime; // Time elapsed since last position update
// Update the position
positionVector.x = positionVector.x + velocityVector.x * deltaTime;
positionVector.y = positionVector.y + velocityVector.y * deltaTime;
// Update the velocity
velocityVector.x = velocityVector.x + (thrusterVector.x + gravityVector.x) * deltaTime;
velocityVector.y = velocityVector.y + (thrusterVector.y + gravityVector.y) * deltaTime;
// Done! The sprite now has a new position and a new velocity!
Here is a quick explanation:
x(t) = x(0) + v(0)*t + .5 (F/m) * t^2
Fx = (x(t) - x(0) - vx(0)*t) * 2m/t^2
Fy = (y(t) - y(0) - vy(0)*t) * 2m/t^2
These 3 equations are standard movement ones:
t: time
x(t): position at time t
v(t): speed at time t
vx(t): horizontal component of speed at time t
vy(t): vertical component of speed at time t
m: mass
F: force
Fx: horizontal component of the force
Fy: vertical component of the force
So of course, each time you see x(0) or vy(0), these values are taken at time t, i.e. they are initial values. These equations are basic cinematic equations with the basic cinematic variables (position, speed, force, mass).