I'm working on the iPad app, In which I have to rotate a arrow in a circle by touch. But I'm facing problems in it. The problem is in the angle calculation to which the image must be rotate.
You can check it here .
I have to rotate the big red arrow image around the circle. Can anybody help me, How to get the angle of the touched point. Currently I'm using the following code, I found it at somewhere in the net. But it didn't rotate the arrow to the touched place.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *oneTouch = [touches anyObject];
CGPoint currentPoint = [oneTouch locationInView:imgCompass];
double current_angle = [self wheelAngleFromPoint:currentPoint];
imgNeedle.transform = CGAffineTransformMakeRotation( current_angle );
}
- (double) wheelAngleFromPoint:(CGPoint)location
{
double retAngle;
// subtract center of wheel
location.x -= (self.imgNeedle.bounds.size.width ) / 2.0;
location.y = (self.imgNeedle.bounds.size.height ) / 2.0 - location.y;
// normalize vector
double vector_length = sqrt(location.x*location.x + location.y*location.y);
location.x = location.x/vector_length;
location.y = location.y/vector_length;
retAngle = acos(location.y);
float offset = 0.28;
//if (location.x)
// offset = 0.28;
retAngle += offset;
if (location.x<0)
{
retAngle = -retAngle;
}
return retAngle;
}
Can anyone help me in correct angle calculation.
Thanks
Here's the problem:
location.x -= (self.imgNeedle.bounds.size.width ) / 2.0;
location.y = (self.imgNeedle.bounds.size.height ) / 2.0 - location.y;
The values in location.x and location.y after the calculation should represent a vector from the centre of the imgNeedle (or wheel?) to the touch point. try this instead:
location.x = location.x - self.imgNeedle.center.x;
location.y = self.imgNeedle.center.y - location.y;
Note that since you are setting the imgNeedle.transform property, the frame will be invalid, but the center will be ok :) - the imgNeedle will rotate about the center of the image.
Notice that I explicitly stated location.x - self.imgNeedle.center.x to help you understand what's going on - you need to calculate the difference between the two points (a vector between them). You should understand that in mathematics, (0, 0) being the origin, the x-axis is positive to the right and the y-axis is positive upwards. However, on your device's screen, the co-ordinate system you are using (view co-ordinates) (0, 0) is at the top left with the x-axis going positive to the right but the y-axis going positive downwards (this isn't always true, because you can map your screen co-ordinates a number of ways). That is why the location.y subtraction is the other way around from the location.x subtraction - to account for the screen being "flipped" vertically (in terms of mathematically calculating the angle). It's also good to know that in mathematics, a positive rotation represents a rotation in the anti-clockwise direction, and a flip on one axis can hide this and make it appear that a positive angle means a clockwise rotation (like a double negative making a positive), so when you're playing with rotations and vectors, you should take all of this into account. However, for your purposes, it's quite simple, so instead of trying to wrap your head around all the maths you may just prefer to play with the code using trial and error, you might need to flip one of the directions (change the order of subtraction) or even change the direction of rotation (do 2*M_PI - retAngle for example).
Related
I'm kind of a newb in SpriteKit, game dev, as a matter of fact I'm just learning. So I got to a point where I what to move a bunch of nodes towards a users tap location. So far I fought that I might calculate a virtual right triangle and get sin and cos of angles based on the sides. Unfortunately that left me with a very strong impulse that doesn't really consider the user tap location.
Any ideas?
Thanks in advance.
Look up the shooting projectiles section in the tutorial by Ray Wenderlich here:
http://www.raywenderlich.com/42699/spritekit-tutorial-for-beginners
Change the code from the tutorial as follows:
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
// 1 - Choose one of the touches to work with
UITouch * touch = [touches anyObject];
CGPoint location = [touch locationInNode:self];
// 2 - Set up initial location of projectile
SKSpriteNode * projectile = [self childNodeWithName:#"desirednode"];
//make projectile point to your desired node.
// 3- Determine offset of location to projectile
CGPoint offset = rwSub(location, projectile.position);
// 4 - Bail out if you are shooting down or backwards. You can ignore this if required.
if (offset.x <= 0) return;
// 5 - OK to add now - we've double checked position
[self addChild:projectile];
// 6 - Get the direction of where to shoot
CGPoint direction = rwNormalize(offset);
// 7 - Make it shoot far enough to be guaranteed off screen
float forceValue = 200; //Edit this value to get the desired force.
CGPoint shootAmount = rwMult(direction, forceValue);
//8 - Convert the point to a vector
CGVector impulseVector = CGVectorMake(shootAmount.x, shootAmount.y);
//This vector is the impulse you are looking for.
//9 - Apply impulse to node.
[projectile.physicsBody applyImpulse:impulseVector];
}
The projectile object in the code represents your node. Also, you will need to edit the forceValue to get the desired impulse.
I am working on an app that has a rotating image (the user tapps and drags and the image rotates in a circle tracking their finger). What I am trying to keep track of is how many times the user makes a complete circle. An additional "hitch" is that I also need to know if the user is circling clockwise vs counter clockwise.
Here is the Code that is rotating the image... Please feel free to request additional information.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchPoint = [touch locationInView:self.view];
long double rotationNumber = atan2(touchPoint.y - originY, touchPoint.x - originX);
totalRotationCount ++;
schedulingWheel.transform = CGAffineTransformMakeRotation(rotationNumber);
offset = (rotationNumber * 100)/14;
dateRibbon.center = CGPointMake(offset, 24);
}
Thanks for the help!
My solution isn't elegant and there might be a cleaner solution I'm missing but this is what I did recently. The trick is to keep track of the angle from the last time touchesMoved: is called. Then, add the delta of your current angle and the stored angel value to your total.
The problem is the "boundaries" that atan2 creates needed ugly code to overcome. Say your lastAngle is 359 and you cross the origin so your next angle is 1. The difference will not be 2 but -358, so whenever you cross that boundary your total will be reset to 0.
Here is what I did:
CGFloat angle = atan2f(center.y - point.y, point.x - center.x);
//Translate to Unit circle
if (angle > 0) {
angle = (M_PI - angle) + M_PI;
} else {
angle = fabsf(angle);
}
CGFloat delta = angle - lastAngle;
//Adjust for boundaries
if (fabsf(delta) > (2*M_PI)-fabsf(delta)) {
BOOL greaterThanZero = (delta > 0);
delta = (2*M_PI)-fabsf(delta);
if (greaterThanZero) {
delta = -1 * delta;
}
}
totalAngle += delta;
lastAngle = angle;
The big/ugly conditional under "Adjust for boundaries" basically just looks to see if there is a shorter angle to get to the new point (So, 2 instead of -258) & assumes that if there is it probably means you crossed that origin and adjusts the delta accordingly.
I translated the Atan2 results so that it represents a full unit circle from 0 to 2π. Bonus side affect, it then accounts for clockwise/counter clockwise movement better than the standard -π to π of Atan2.
To find out what is the total number of the rotations simply sum all the rotation angles in either directions. For clockwise the value of the rotation angle will be positive and for the counter clockwise it will be negative. Then divide it by a pi (~3.14) to get your total number of rotations.
long double rotationNumber = atan2(touchPoint.y - originY, touchPoint.x - originX);
long double totalRotationsAngle += rotationNumber;
Then whenever you want to get the number of full rotations:
double numberOfRotations = floor(totalRotationsAngle/M_PI);
I want to rotate the image around its center point.The problem i am facing is i need to get the angle to calculate in touch moved event (i dont want to use multi touch).I am current using the below code
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
NSArray *allTouches = [touches allObjects];
gestureStartPoint = gestureMovedPoint;//i am getting the gestureStartPoint on touch began event
gestureMovedPoint = [[allTouches objectAtIndex:0] locationInView:[self superview]];
NSLog(#"gestureMovedPoint = %#",NSStringFromCGPoint(gestureMovedPoint));
}
CGFloat previousAngle = [self angleBetweenPoints:gestureStartPoint second11:gestureMovedPoint]; // atan2(gestureMovedPoint.y - gestureStartPoint.y, gestureMovedPoint.x - gestureStartPoint.x) * 180 / M_PI;
CGFloat currentAngle =atan2(self.transform.b, self.transform.a);//atan2(gestureMovedPoint.y - gestureStartPoint.y,gestureMovedPoint.x - gestureStartPoint.x) * 180 / M_PI;
CGFloat angleToRotate = currentAngle - previousAngle;
float xpoint = (((atan2((gestureMovedPoint.x - gestureStartPoint.x) , (gestureMovedPoint.y - gestureStartPoint.y)))*180)/M_PI);
CGAffineTransform transform = CGAffineTransformMakeRotation(angleToRotate-100);
self.transform = transform;
Kindly help me find the solution as i am stuck here and need to complete this application very soon as there is a dead line.
Thanks in advance
Glad I remember triginometry
-(void)degreesToRotateObjectWithPosition:(CGPoint)objPos andTouchPoint:(CGPoint)touchPoint{
float dX = touchPoint.x-objPos.x; // distance along X
float dY = touchPoint.y-objPos.y; // distance along Y
float radians = atan2(dY, dX); // tan = opp / adj
//Now we have to convert radians to degrees:
float degrees = radians*M_PI/360;
return degrees;
}
Once you have your nice method, just do this in the touch event method. (I forgot what it's called...)
CGAffineTransform current = view.transform;
[view setTransform:CGAffineTransformRotate(current, [self degreesTorotateObjectWithPosition:view.frame.origin andTouchPoint:[touch locationInView:parentView]]
//Note: parentView = The view that your object to rotate is sitting in.
This is pretty much all the code that you'll need.The math is right, but I'm not sure about the setTransform stuff. I'm at school writing this in a browser. You should be able to figure it out from here.
Good luck,
Aurum Aquila
Have to think at this. But I will prefer rotating the view with two touches. It will be much simpler.
I did struggle a bit with how to get a touch driven rotation, even more so because I want 100% understanding of the code I am using. So I ended up, after many failed attempts, with this:
- (CGFloat) pointToAngleFromCenter: (CGPoint) point {
// transform point to a self.center'ed origin based coordinate system
point.x = point.x - self.center.x ;
// ditto for y, but compensate for y going downwards to y going upwards
point.y = self.center.y - point.y ;
return ::atan2(point.y, point.x) ;
}
If anyone has a better name for this method, I'm all ears.
What it does is that it takes a point in parent view coordinates, remaps it relative to the center of the view (which is in parent view coordinate), and computes the angle between this remapped point and the axis [0X]. To do so, it normalizes y to the normal mathematical coordinates (y goes up when its value increases, not down), hence self.center.y - point.y and not the opposite.
Finally, in touchesMoved:
- (void) touchesMoved: (NSSet *) touches withEvent: (UIEvent *) event {
UITouch * touch = [touches anyObject] ;
CGFloat currA = [self pointToAngleFromCenter:[touch locationInView:self.superview]] ;
CGFloat prevA = [self pointToAngleFromCenter:[touch previousLocationInView:self.superview]] ;
// the current value of the rotation angle
CGFloat tranA = ::atan2(self.transform.b, self.transform.a) ;
// the angle difference between last touch and the current touch
CGFloat diffA = currA - prevA ;
// the new angle resulting from applying the difference
CGFloat angle = tranA - diffA ;
CGAffineTransform t = ::CGAffineTransformMakeRotation(angle) ;
self.transform = t ;
[self setNeedsDisplay] ;
}
I have a UIView that I want to rotate when I move my finger across the screen (like in a circle). I want the UIView to rotate so that it faces my touchpoint. I then want to shoot something from my UIView (like a bullet) in the direction that the UIView is facing. Any Ideas???
Glad I remember triginometry
-(void)degreesToRotateObjectWithPosition:(CGPoint)objPos andTouchPoint:(CGPoint)touchPoint{
float dX = touchPoint.x-objPos.x; // distance along X
float dY = touchPoint.y-objPos.y; // distance along Y
float radians = atan2(dY, dX); // tan = opp / adj
//Now we have to convert radians to degrees:
float degrees = radians*M_PI/360;
return degrees;
}
Once you have your nice method, just do this:
CGAffineTransform current = view.transform;
[view setTransform:CGAffineTransformRotate(current, [view degreesTorotateObjectWithPosition:view.frame.origin andTouchPoint:[touch locationInView:parentView]]
//Note: parentView = The view that your object to rotate is sitting in.
This is pretty much all the code that you'll need.The math is right, but I'm not sure about the setTransform stuff. I'm at school writing this in a browser. You should be able to figure it out from here.
Good luck,
Aurum Aquila
On iPhone, how to implement rotating image around the center point using finger touch ?
Just like wheel, if you put finger on the iPhone screen , then move suddenly, then the image becoming rotating around center point just like the wheel, after a while, it becomes more and more slow , finally stop.
Who can help to give some pieces of codes (Object-C) or some suggest ?
I was working with a "spin the bottle"-app yesterday. On the window I have a ImageView with an bottle that's suppose to response to touches and rotate the way the user swipes his finger. I struggled to get my ImageView to rotate during the touch-events (TouchesBegan, Touchesoved, TouchesEnd). I used this code in TouchesMoved to find out the angle in witch to rotate the image.
public override void TouchesMoved (NSSet touches, UIEvent evt)
{
PointF pt = (touches.AnyObject as UITouch).LocationInView(this);
float x = pt.X - this.Center.X;
float y = pt.Y - this.Center.Y;
double ang = Math.Atan2(x,y);
// yada yada, rotate image using this.Transform
}
THIS IS IMPORTANT! When the ImageView rotates, even the x & y-coordinates changes. So touching the same area all the time would give me different values in the pt and prePt-points. After some thinking, googeling and reading I came up with an simple solution to the problem. The "SuperView"-property of the ImageView.
PointF pt = (touches.AnyObject as UITouch).LocationInView(this.SuperView);
Having that small change in place made it alot easier, no i can use the UITouch-metohs LocationInView and PreviousLocationInView and get the right x & y coordinates. Her is parts of my code.
float deltaAngle;
public override void TouchesMoved (NSSet touches, UIEvent evt)
{
PointF pt = (touches.AnyObject as UITouch).LocationInView(this.Superview);
float x = pt.X - this.Center.X;
float y = pt.Y - this.Center.Y;
float ang = float.Parse(Math.Atan2(dx,dy).ToString());
//do the rotation
if (deltaAngle == 0.0) {
deltaAngle = ang;
}
else
{
float angleDif = deltaAngle - ang;
this.Transform = CGAffineTransform.MakeRotation(angleDif);
}
}
Hope that helped someone from spending hours on how to figure out how to freaking rotate a bottle! :)
I would use the affine transformations - yuou can assign a transformation to any layer or UI element using the transform property.
You can create a rotation transform using CGAffineTransform CGAffineTransformMakeRotation( CGFloat angle) which will return a transformation that rotates an element. The default rotation should be around the centerpoint.
Be aware, the rotation is limited to 360 degrees, so if you want to rotate something more than that (say through 720 degrees) - you have to break the rotation into several sequences.
You may find this SO article useful as well.
The transform property of a view or layer can be used to rotate the image displayed within. As far as the spinning part goes, you just track the location and movement of touches in your view with touchesBegan, touchesMoved, and touchesEnded.
Use the distance and time between the touches updates to calculate a speed, and use that to set a rotational velocity. Once you start the image spinning, update the position periodically (with an NSTimer, maybe), and reduce the rotational velocity by some constant.