How to find the distance between two CG points? - iphone

When we do multitouch with two fingers in a UIScrollView, we get two CG points. I want to find the distance between them. Then when again we do the pinch(inside or outside), Then we will again get two points. Then after finding the distance again between these two points , I want to decide whether I pinched in or out. If i have pinched in, surely the new distance will be lesser and vice versa.
But don't know how to find an accurate measurement for the distance between 2 points for doing comparison ? Is anyone having idea about this ?

You can use the hypot() or hypotf() function to calculate the hypotenuse. Given two points p1 and p2:
CGFloat distance = hypotf(p1.x - p2.x, p1.y - p2.y);
And that's it.

Distance between p1 and p2:
CGFloat xDist = (p2.x - p1.x);
CGFloat yDist = (p2.y - p1.y);
CGFloat distance = sqrt(xDist * xDist + yDist * yDist);
Put in a function:
func distance(_ a: CGPoint, _ b: CGPoint) -> CGFloat {
let xDist = a.x - b.x
let yDist = a.y - b.y
return CGFloat(sqrt(xDist * xDist + yDist * yDist))
}
Background: Pythagorean theorem
If you only need to calculate if the distance between the points increases or decreases, you can omit the sqrt() which will make it a little faster.

For swift users
extension CGPoint {
func distance(to point: CGPoint) -> CGFloat {
return sqrt(pow(x - point.x, 2) + pow(y - point.y, 2))
}
}

With Swift 4, you may choose one of the 5 following Playground codes in order to get the distance between two CGPoint instances.
1. Using Darwin sqrt(_:) function
import CoreGraphics
func distance(from lhs: CGPoint, to rhs: CGPoint) -> CGFloat {
let xDistance = lhs.x - rhs.x
let yDistance = lhs.y - rhs.y
return sqrt(xDistance * xDistance + yDistance * yDistance)
}
let point1 = CGPoint(x: -10, y: -100)
let point2 = CGPoint(x: 30, y: 600)
distance(from: point1, to: point2) // 701.141925718324
2. Using CGFloat squareRoot() method
import CoreGraphics
func distance(from lhs: CGPoint, to rhs: CGPoint) -> CGFloat {
let xDistance = lhs.x - rhs.x
let yDistance = lhs.y - rhs.y
return (xDistance * xDistance + yDistance * yDistance).squareRoot()
}
let point1 = CGPoint(x: -10, y: -100)
let point2 = CGPoint(x: 30, y: 600)
distance(from: point1, to: point2) // 701.141925718324
3. Using CGFloat squareRoot() method and Core Graphics pow(_:_:) function
import CoreGraphics
func distance(from lhs: CGPoint, to rhs: CGPoint) -> CGFloat {
return (pow(lhs.x - rhs.x, 2) + pow(lhs.y - rhs.y, 2)).squareRoot()
}
let point1 = CGPoint(x: -10, y: -100)
let point2 = CGPoint(x: 30, y: 600)
distance(from: point1, to: point2) // 701.141925718324
4. Using Core Graphics hypot(_:_:) function
import CoreGraphics
func distance(from lhs: CGPoint, to rhs: CGPoint) -> CGFloat {
return hypot(lhs.x - rhs.x, lhs.y - rhs.y)
}
let point1 = CGPoint(x: -10, y: -100)
let point2 = CGPoint(x: 30, y: 600)
distance(from: point1, to: point2) // 701.141925718324
5. Using Core Graphics hypot(_:_:) function and CGFloat distance(to:) method
import CoreGraphics
func distance(from lhs: CGPoint, to rhs: CGPoint) -> CGFloat {
return hypot(lhs.x.distance(to: rhs.x), lhs.y.distance(to: rhs.y))
}
let point1 = CGPoint(x: -10, y: -100)
let point2 = CGPoint(x: 30, y: 600)
distance(from: point1, to: point2) // 701.141925718324

-(float)distanceFrom:(CGPoint)point1 to:(CGPoint)point2
{
CGFloat xDist = (point2.x - point1.x);
CGFloat yDist = (point2.y - point1.y);
return sqrt((xDist * xDist) + (yDist * yDist));
}
If you are using cocos2d
float distance = ccpDistance(point1, point2);

I wrote this, I use it a lot:
- (float) distanceBetween : (CGPoint) p1 and: (CGPoint) p2
{
return sqrt(pow(p2.x-p1.x,2)+pow(p2.y-p1.y,2));
}
Call like this:
float distanceMoved = [self distanceBetween touchStart and: touchEnd];
I normally use cocos2d, but I still use my own function for some things because when I was learning I wrote a bunch of my own functions for simple stuff rather than searching for the "official" higher order functions, and additionally I'm not a big fan of functions(vars, vars), I prefer [self functions vars and: vars]

#define rw_pointOffset(point1, point2) CGPointMake(point2.x - point1.x, point2.y - point1.y)
#define rw_pointDistance(point1, point2) sqrtf( powf(point2.x - point1.x, 2.0f) + powf(point2.y - point1.y, 2.0f))
And that´s how you use it:
CGPoint offset = rw_pointOffset(view1.center, view2.center);
float distance = rw_pointDistance(view1.center, view2.center);

If you want to find the absolute distance value between two points then you can use (for Cocos2d):
float distance = abs(ccpDistance(point1, point2));

Related

UIBelzierpath - path.contains(userTouchPoint) can only detect if userTouchPoint.y is exactly at path Y position

I have a path like this (red middle line), which is created from
func drawALine(point1:CGPoint,point2:CGPoint)->CAShapeLayer{
let path = UIBezierPath()
path.move(to: point1)
path.addLine(to: point2)
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 10
self.layer.addSublayer(shapeLayer)
return shapeLayer
}
Because I have multiple Lines so I have to detect which one I'm touching with this
for each in RulerModelArray{
if (!(each.midPath.path?.contains(touchPoint))!) {
print("not contain")
} else {
print("contained",each.ID)
}
}
Problem is if my point1/point2 y is 450, and my touchPoint.y is 450.00001 then it won't be detected. There is only like 1% that I can't tap on the perfect spot.
Tested with this:
let testPoint:CGPoint = CGPoint(x: touchPoint.x, y: touchPoint.y + 0.0001 )
for each in RulerModelArray{
if (!(each.midPath.contains(testPoint))) {
print("not contain")
} else {
print("contained",each.ID)
}
}
///always return not contain
Is there anyway that I can detect the path within shapeLayer.lineWidth = 10?
this is more universal way
works for any kinds of straight line,
by calculating the distance from touch point to the destination line
extension CGPoint{
// tolerance, should by the lineWidth of a UIBezierPath
func contained(byStraightLine start: CGPoint,to end: CGPoint, tolerance width: CGFloat) -> Bool{
return distance(fromLine: start, to: end) <= width * 0.5
}
func distance(fromLine start: CGPoint,to end: CGPoint) -> CGFloat{
let a = end.y - start.y
let b = start.x - end.x
let c = (start.y - end.y) * start.x + ( end.x - start.x ) * start.y
return abs(a * x + b * y + c)/sqrt(a*a + b*b)
}
}
you can use this
check if the CGPoint is within the bounds of the UIBezierPath
works for horizontal line, because horizontal line's size's height is 0
extension UIBezierPath{
func hasForHorizontalLine(pt point: CGPoint) -> Bool{
let bezierRect = bounds
let origin = bezierRect.origin
let size = bezierRect.size
if origin.x <= point.x , origin.x + size.width >= point.x, origin.y - lineWidth * 0.5 <= point.y , origin.y + lineWidth * 0.5 >= point.y{
return true
}
else{
return false
}
}
}

Rotating a CGPoint around another CGPoint

Okay so I want to rotate CGPoint(A) 50 degrees around CGPoint(B) is there a good way to do that?
CGPoint(A) = CGPoint(x: 50, y: 100)
CGPoint(B) = CGPoint(x: 50, y: 0)
Here's what I want to do:
This is really a maths question. In Swift, you want something like:
func rotatePoint(target: CGPoint, aroundOrigin origin: CGPoint, byDegrees: CGFloat) -> CGPoint {
let dx = target.x - origin.x
let dy = target.y - origin.y
let radius = sqrt(dx * dx + dy * dy)
let azimuth = atan2(dy, dx) // in radians
let newAzimuth = azimuth + byDegrees * CGFloat(M_PI / 180.0) // convert it to radians
let x = origin.x + radius * cos(newAzimuth)
let y = origin.y + radius * sin(newAzimuth)
return CGPoint(x: x, y: y)
}
There are lots of ways to simplify this, and it's a perfect case for an extension to CGPoint, but I've left it verbose for clarity.
public extension CGFloat {
///Returns radians if given degrees
var radians: CGFloat{return self * .pi / 180}
}
public extension CGPoint {
///Rotates point by given degrees
func rotate(origin: CGPoint? = CGPoint(x: 0.5, y: 0.5), _ byDegrees: CGFloat) -> CGPoint {
guard let origin = origin else {return self}
let rotationSin = sin(byDegrees.radians)
let rotationCos = cos(byDegrees.radians)
let x = (self.x * rotationCos - self.y * rotationSin) + origin.x
let y = (self.x * rotationSin + self.y * rotationCos) + origin.y
return CGPoint(x: x, y: y)
}
}
Usage
var myPoint = CGPoint(x: 40, y: 50).rotate(45)
var myPoint = CGPoint(x: 40, y: 50).rotate(origin: CGPoint(x: 0, y: 0), 45)

Spawning multiple nodes in different locations

I'm trying to spawn multiple SKSpriteNodes within the set location, but when I add multiple nodes they just spawn on top of each other? Is there a way to not make this happen?
I'm also having a problem of having to refresh the page in order to get a new location for the node. Is there a way so if the node disappears on the page it will spawn in a new location within the set co-ords?
let rect = CGRectMake(x: 90, y: 360, width: 200, height: 200)
let x = rect.origin.x + CGFloat(arc4random()) % rect.size.width
let y = rect.origin.y + CGFloat(arc4random()) % rect.size.height
let randomPoint = CGPointMake(x, y)
self.redcircle.position = randomPoint
self.addChild(redcircle)
self.bluecircle.position = randomPoint
self.addChild(bluecircle)
You need 2 randomPoint's to put them on a another place.
You use 2 Nodes with one Position cause randomPoint is always the same.
Edit(question in comment):
You have to use min(x, y) and max(x, y)
let x = random(CGRectGetMinX(self.frame), max: CGRectGetMaxX(self.frame))
let y = random(CGRectGetMinY(self.frame), max: CGRectGetMaxY(self.frame))
let randomPoint = CGPointMake(x, y)
self.redcircle.position = randomPoint
self.addChild(red circle)
And here the random function:
func random() -> CGFloat {
return CGFloat(Float(arc4random()) / 0xFFFFFFFF)
}
func random(min: CGFloat, max: CGFloat) -> CGFloat {
return random() * (max - min) + min
}
It would be easier for you to make a method which generates random point based on given rectangle. Or method which spawns sprite within given rectangle, like this:
import SpriteKit
class GameScene: SKScene {
let rect = CGRect(x: 90, y: 360, width: 200, height: 200)
override func didMoveToView(view: SKView) {
let debug = SKSpriteNode(color: SKColor.redColor(), size: rect.size)
debug.alpha = 0.2
debug.position = rect.origin
let origin = SKSpriteNode(color: SKColor.redColor(), size:CGSize(width: 5, height:5))
debug.addChild(origin)
self.addChild(debug)
}
override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
let sprite = spawnSpriteAtRandomPositionWithinRect(rect)
self.addChild(sprite)
println("Sprite spawned at position x,y( \(sprite.position.x), \(sprite.position.y))")
}
func randomBetweenNumbers(firstNum: CGFloat, secondNum: CGFloat) -> CGFloat{
return CGFloat(arc4random()) / CGFloat(UINT32_MAX) * abs(firstNum - secondNum) + min(firstNum, secondNum)
}
func spawnSpriteAtRandomPositionWithinRect(rectangle:CGRect)->SKSpriteNode{
let x = randomBetweenNumbers(rectangle.origin.x - rectangle.size.width / 2.0 , secondNum: rectangle.origin.x + rectangle.size.width/2.0)
let y = randomBetweenNumbers(rectangle.origin.y - rectangle.size.height / 2.0 , secondNum: rectangle.origin.y + rectangle.size.height/2.0)
let sprite = SKSpriteNode(color: SKColor.greenColor(), size:CGSize(width: 30, height: 30))
sprite.position = CGPoint(x: x, y: y)
return sprite
}
}
Sprite named debug is not needed actually, but it shows you visually given rectangle.

How to apply impulse to the node on touch angle

I want the node to move in the right direction but the impulse to be with set strength.
let node: SKSpriteNode!;
node = SKSpriteNode(color: UIColor.greenColor(), size: CGSizeMake(50, 50));
node.physicsBody = SKPhysicsBody(rectangleOfSize: node.size);
node.physicsBody?.affectedByGravity = false;
node.physicsBody?.allowsRotation = false;
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
node.physicsBody?.velocity = CGVectorMake(0, 0);
// ver 1
node.physicsBody?.applyImpulse(CGVectorMake((0.4) * (location.x - node.position.x), (0.4) * (location.y - node.position.y)), atPoint: CGPointMake(position.x,position.y));
// ver 2
let offset:CGPoint = self.vecSub(location, b: ghost.position);
let direction: CGPoint = self.vecNormalize(offset);
var len: CGPoint = self.vecMult(direction, b: 40);
let impulseVector:CGVector = CGVectorMake(len.x, len.y);
ghost.physicsBody?.applyImpulse(impulseVector);
}
func vecAdd(a: CGPoint, b:CGPoint) -> CGPoint {
return CGPointMake(a.x + b.x, a.y + b.y);
}
func vecSub(a: CGPoint, b:CGPoint) -> CGPoint {
return CGPointMake(a.x - b.x, a.y - b.y);
}
func vecMult(a: CGPoint, b:CGFloat) -> CGPoint {
return CGPointMake(a.x * b, a.y * b);
}
func vecLenght(a:CGPoint)->CGFloat{
return CGFloat( sqrtf( CFloat(a.x) * CFloat(a.x) + CFloat(a.y) * CFloat(a.y)));
}
func vecNormalize(a:CGPoint)->CGPoint{
let len : CGFloat = self.vecLenght(a);
return CGPointMake(a.x / len, a.y / len);
}
version 1 is horrible
version 2 is okay, but is too expensive
version 3: something not expensive and to apply impulse with 15-100 strength, because if the touch is at the edges of the screen the node should move only 15-100 of its current possition without reaching the touch position
Both the methods you've detailed above work so I'm not exactly sure what you're problem is. Also, I'm not sure method two is it's too expensive, are you having frame rate drops using it?
But I've got another way you could do what you're after, it's basically the second version but cleaned up. But firstly I just wanted to point out a couple things with your current code:
1. You don't need to ; to the end of each line.
2. Instead of using vecAdd, vecSub etc you could overload the +, -, * and / operators which would make your code cleaner and clearer. This way, the operators would also be global so you could use them anywhere else you need to manipulate vectors.
Anyway, here's my attempt at it:
Firstly, extend CGVector to add the functionality you need. Things like length, which you were defining as functions, could be properties of CGVector:
extension CGVector {
init(p1: CGPoint, p2: CGPoint) {
self.dx = p1.x - p2.x
self.dy = p1.y - p2.y
}
var length: CGFloat {
get { return hypot(dx, dy) }
set {
normalise()
dx *= newValue
dy *= newValue
}
}
mutating func normalise() {
dx /= length
dy /= length
}
}
Secondly, using the new methods:
var vec = CGVector(p1: location, p2: ghost.position)
vec.length = 40
ghost.physicsBody!.applyImpulse(vec)
Alternatively, if you wanted the size of the impulse to relate to how far away from the ghost the user pressed, use the following:
vec.length *= 0.1
Hope that helps!

iPhone iOS Generate star, sunburst or polygon UIBezierPath programmatically

I'm looking for a way to programmatically create stars, sunburst, and other "spiky" effects using UIBezierPath.
UIBezierPath *sunbeamsPath = [UIBezierPath bezierPath];
[sunbeamsPath moveToPoint: CGPointMake(x, y)];
Are there any algorithms that can generate points for sunburst like shapes programmatically, without paths overlapping?
I'm also interested in an irregular shape sunburst like the one below:
I would imagine that such algorithm would take a certain number of rays, then roughly divide the circle in a number of segments and generate points for such segment in a clockwise direction. Does an algorithm like the one I'm describing already exists or will I have to write one by myself?
Thank you!
I know this old, but I was curious about the first part of this question myself, and going off jrturton's post, I created a custom UIView that generates a UIBezierPath from center of the view. Even animated it spinning for bonus points. Here is the result:
The code I used is here:
- (void)drawRect:(CGRect)rect {
CGFloat radius = rect.size.width/2.0f;
[self.fillColor setFill];
[self.strokeColor setStroke];
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
CGPoint centerPoint = CGPointMake(rect.origin.x + radius, rect.origin.y + radius);
CGPoint thisPoint = CGPointMake(centerPoint.x + radius, centerPoint.y);
[bezierPath moveToPoint:centerPoint];
CGFloat thisAngle = 0.0f;
CGFloat sliceDegrees = 360.0f / self.beams / 2.0f;
for (int i = 0; i < self.beams; i++) {
CGFloat x = radius * cosf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.x;
CGFloat y = radius * sinf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.y;
thisPoint = CGPointMake(x, y);
[bezierPath addLineToPoint:thisPoint];
thisAngle += sliceDegrees;
CGFloat x2 = radius * cosf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.x;
CGFloat y2 = radius * sinf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.y;
thisPoint = CGPointMake(x2, y2);
[bezierPath addLineToPoint:thisPoint];
[bezierPath addLineToPoint:centerPoint];
thisAngle += sliceDegrees;
}
[bezierPath closePath];
bezierPath.lineWidth = 1;
[bezierPath fill];
[bezierPath stroke];
}
And you can download a sample project here:
https://github.com/meekapps/Sunburst
I'm not aware of an algorithm to create these but I do have some advice - create your bezier path such that (0,0) is the centre of the sunburst, then define however many points you need to draw one "beam" of your sunburst going upwards, returning to (0,0)
Then, for as many beams as you want, perform a loop: apply a rotation transform (2 pi / number of beams) to your sunbeam points (CGPointApplyTransform), and add them to the path.
Once you are finished, you can translate and scale the path for drawing.
I used a similar process to draw star polygons recently and it was very simple. Credit to Rob Napier's book for the idea.
Swift version for this
import UIKit
extension Int {
var degreesToRadians: Double { return Double(self) * .pi / 180 }
var radiansToDegrees: Double { return Double(self) * 180 / .pi }
}
extension FloatingPoint {
var degreesToRadians: Self { return self * .pi / 180 }
var radiansToDegrees: Self { return self * 180 / .pi }
}
class SunBurstView: UIView {
override func draw(_ rect: CGRect) {
let radius: CGFloat = rect.size.width / 2.0
UIColor.red.setFill()
UIColor.blue.setStroke()
let bezierPath = UIBezierPath()
let centerPoint = CGPoint(x: rect.origin.x + radius, y: rect.origin.y + radius)
var thisPoint = CGPoint(x: centerPoint.x + radius, y: centerPoint.y)
bezierPath.move(to: centerPoint)
var thisAngle: CGFloat = 0.0
let sliceDegrees: CGFloat = 360.0 / self.beams / 2.0
for _ in 0..<self.beams {
let x = radius * CGFloat(cosf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.x
let y = radius * CGFloat(sinf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.y
thisPoint = CGPoint(x: x, y: y)
bezierPath.addLine(to: thisPoint)
thisAngle += sliceDegrees
let x2 = radius * CGFloat(cosf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.x
let y2 = radius * CGFloat(sinf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.y
thisPoint = CGPoint(x: x2, y: y2)
bezierPath.addLine(to: thisPoint)
bezierPath.addLine(to: centerPoint)
thisAngle += sliceDegrees
}
bezierPath.close()
bezierPath.lineWidth = 1
bezierPath.fill()
bezierPath.stroke()
}
}
I noticed that the Swift version didn't compile for me or take up enough of the screen, so here's Reinier's answer in Swift 4 adjusted for a rectangular view.
extension Int {
var degreesToRadians: Double { return Double(self) * .pi / 180 }
var radiansToDegrees: Double { return Double(self) * 180 / .pi }
}
extension FloatingPoint {
var degreesToRadians: Self { return self * .pi / 180 }
var radiansToDegrees: Self { return self * 180 / .pi }
}
class SunBurstView: UIView {
var beams: CGFloat = 20
override func draw(_ rect: CGRect) {
self.clipsToBounds = false
self.layer.masksToBounds = false
let radius: CGFloat = rect.size.width * 1.5
UIColor.orange.withAlphaComponent(0.3).setFill()
UIColor.clear.setStroke()
let bezierPath = UIBezierPath()
let centerPoint = CGPoint(x: rect.origin.x + (radius / 3), y: rect.origin.y + (radius / 1.5))
var thisPoint = CGPoint(x: centerPoint.x + radius, y: centerPoint.y)
bezierPath.move(to: centerPoint)
var thisAngle: CGFloat = 0.0
let sliceDegrees: CGFloat = 360.0 / self.beams / 2.0
for _ in 0...Int(beams) {
let x = radius * CGFloat(cosf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.x
let y = radius * CGFloat(sinf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.y
thisPoint = CGPoint(x: x, y: y)
bezierPath.addLine(to: thisPoint)
thisAngle += sliceDegrees
let x2 = radius * CGFloat(cosf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.x
let y2 = radius * CGFloat(sinf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.y
thisPoint = CGPoint(x: x2, y: y2)
bezierPath.addLine(to: thisPoint)
bezierPath.addLine(to: centerPoint)
thisAngle += sliceDegrees
}
bezierPath.close()
bezierPath.lineWidth = 1
bezierPath.fill()
bezierPath.stroke()
}
}