Rotate sprite node with moving touch - ios

I am new to Swift and SpriteKit and am learning to understand the control in the game "Fish & Trip". The sprite node is always at the center of the view and it will rotate according to moving your touch, no matter where you touch and move (hold) it will rotate correspondingly.
The difficulty here is that it is different from the Pan Gesture and simple touch location as I noted in the picture 1 and 2.
For the 1st pic, the touch location is processed by atan2f and then sent to SKAction.rotate and it is done, I can make this working.
For the 2nd pic, I can get this by setup a UIPanGestureRecognizer and it works, but you can only rotate the node when you move your finger around the initial point (touchesBegan).
My question is for the 3rd pic, which is the same as the Fish & Trip game, you can touch anywhere on the screen and then move (hold) to anywhere and the node still rotate as you move, you don't have to move your finger around the initial point to let the node rotate and the rotation is smooth and accurate.
My code is as follow, it doesn't work very well and it is with some jittering, my question is how can I implement this in a better way? and How can I make the rotation smooth?
Is there a way to filter the previousLocation in the touchesMoved function? I always encountered jittering when I use this property, I think it reports too fast. I haven't had any issue when I used UIPanGestureRecoginzer and it is very smooth, so I guess I must did something wrong with the previousLocation.
func mtoRad(x: CGFloat, y: CGFloat) -> CGFloat {
let Radian3 = atan2f(Float(y), Float(x))
return CGFloat(Radian3)
}
func moveplayer(radian: CGFloat){
let rotateaction = SKAction.rotate(toAngle: radian, duration: 0.1, shortestUnitArc: true)
thePlayer.run(rotateaction)
}
var touchpoint = CGPoint.zero
var R2 : CGFloat? = 0.0
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches{
let previousPointOfTouch = t.previousLocation(in: self)
touchpoint = t.location(in: self)
if touchpoint.x != previousPointOfTouch.x && touchpoint.y != previousPointOfTouch.y {
let delta_y = touchpoint.y - previousPointOfTouch.y
let delta_x = touchpoint.x - previousPointOfTouch.x
let R1 = mtoRad(x: delta_x, y: delta_y)
if R2! != R1 {
moveplayer(radiant: R1)
}
R2 = R1
}
}
}

This is not an answer (yet - hoping to post one/edit this into one later), but you can make your code a bit more 'Swifty' by changing the definition for movePlayer() from:
func moveplayer(radian: CGFloat)
to
rotatePlayerTo(angle targetAngle: CGFloat) {
let rotateaction = SKAction.rotate(toAngle: targetAngle, duration: 0.1, shortestUnitArc: true)
thePlayer.run(rotateaction)
}
then, to call it, instead of:
moveplayer(radiant: R1)
use
rotatePlayerTo(angle: R1)
which is more readable as it describes what you are doing better.
Also, your rotation to the new angle is constant at 0.1s - so if the player has to rotate further, it will rotate faster. it would be better to keep the rotational speed constant (in terms of radians per second). we can do this as follows:
Add the following property:
let playerRotationSpeed = CGFloat((2 *Double.pi) / 2.0) //Radian per second; 2 second for full rotation
change your moveShip to:
func rotatePlayerTo(angle targetAngle: CGFloat) {
let angleToRotateBy = abs(targetAngle - thePlayer.zRotation)
let rotationTime = TimeInterval(angleToRotateBy / shipRotationSpeed)
let rotateAction = SKAction.rotate(toAngle: targetAngle, duration: rotationTime , shortestUnitArc: true)
thePlayer.run(rotateAction)
}
this may help smooth the rotation too.

Related

How to rotate a SCNSphere using a pan gesture recognizer

I created an SCNSphere so now it looks like a planet kind of. This is exactly what I want. My next goal is to allow users to rotate the sphere using a pan gesture recognizer. They are allowed to rotate it around the X or Y axis. I was just wondering how I can do that. This is what I have so far.
origin = sceneView.frame.origin
node.geometry = SCNSphere(radius: 1)
node.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "world.jpg")
let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(CategoryViewController.panGlobe(sender:)))
sceneView.addGestureRecognizer(panGestureRecognizer)
func panGlobe(sender: UIPanGestureRecognizer) {
// What should i put inside this method to allow them to rotate the sphere/ball
}
We have a ViewController that contains a node sphereNode that contains our sphere.
To rotate the sphere we could use a UIPanGestureRecognizer.
Since the recognizer reports the total distance our finger has traveled on the screen we cache the last point that was reported to us.
var previousPanPoint: CGPoint?
let pixelToAngleConstant: Float = .pi / 180
func handlePan(_ newPoint: CGPoint) {
if let previousPoint = previousPanPoint {
let dx = Float(newPoint.x - previousPoint.x)
let dy = Float(newPoint.y - previousPoint.y)
rotateUp(by: dy * pixelToAngleConstant)
rotateRight(by: dx * pixelToAngleConstant)
}
previousPanPoint = newPoint
}
We calculate dx and dy with how much pixel our finger has traveled in each direction since we last called the recognizer.
With the pixelToAngleConstant we convert our pixel value in an angle (in randians) to rotate our sphere. Use a bigger constant for a faster rotation.
The gesture recognizer returns a state that we can use to determine if the gesture has started, ended, or the finger has been moved.
When the gesture starts we save the fingers location in previousPanPoint.
When our finger moves we call the function above.
When the gesture is ended or canceled we clear our previousPanPoint.
#objc func handleGesture(_ gestureRecognizer: UIPanGestureRecognizer) {
switch gestureRecognizer.state {
case .began:
previousPanPoint = gestureRecognizer.location(in: view)
case .changed:
handlePan(gestureRecognizer.location(in: view))
default:
previousPanPoint = nil
}
}
How do we rotate our sphere?
The functions rotateUp and rotateRight just call our more general function, rotate(by: around:) which accepts not only the angle but also the axis to rotate around.
rotateUp rotates around the x-axis, rotateRight around the y-axis.
func rotateUp(by angle: Float) {
let axis = SCNVector3(1, 0, 0) // x-axis
rotate(by: angle, around: axis)
}
func rotateRight(by angle: Float) {
let axis = SCNVector3(0, 1, 0) // y-axis
rotate(by: angle, around: axis)
}
The rotate(by:around:) is in this case relative simple because we assume that the node is not translated/ we want to rotate around the origin of the nodes local coordinate system.
Everything is a little more complicated when we look at a general case but this answer is only a small starting point.
func rotate(by angle: Float, around axis: SCNVector3) {
let transform = SCNMatrix4MakeRotation(angle, axis.x, axis.y, axis.z)
sphereNode.transform = SCNMatrix4Mult(sphereNode.transform, transform)
}
We create a rotation matrix from the angle and the axis and multiply the old transform of our sphere with the calculated one to get the new transform.
This is the little demo I created:
This approach has two major downsides.
It only rotates around the nodes coordinate origin and only works properly if the node's position is SCNVector3Zero
It does takes neither the speed of the gesture into account nor does the sphere continue to rotate when the gesture stops.
An effect similar to a table view where you can flip your finger and the table view scrolls fast and then slows down can't be easily achieved with this approach.
One solution would be to use the physics system for that.
Below is what I tried, not sure whether it is accurate with respect to angles but...it sufficed most of my needs....
#objc func handleGesture(_ gestureRecognizer: UIPanGestureRecognizer) {
let translation = gestureRecognizer.translation(in: gestureRecognizer.view!)
let x = Float(translation.x)
let y = Float(-translation.y)
let anglePan = (sqrt(pow(x,2)+pow(y,2)))*(Float)(Double.pi)/180.0
var rotationVector = SCNVector4()
rotationVector.x = x
rotationVector.y = y
rotationVector.z = 0.0
rotationVector.w = anglePan
self.earthNode.rotation = rotationVector
}
Sample Github-EarthRotate

360 degrees spinnable object from a photographed real object

I want to create the ability to spin a photographed object 360 degrees.
It spins endlessly based on the speed you "flick" .
You spin it left or right by flicking the object left or right .
You stop the spin when you touch to stop it if it's spinning.
Similar to the app The Elements by Theodore Grey.
Here's a video of the part of the app I'm trying to recreate. (i.e. the 3D spinner)
https://youtu.be/6T0hE0jGiYY
Here's a video of my finger interacting with it.
https://youtu.be/qjzeewpVN9o
I'm looking to use Swift and likely SpriteKit.
How can I get from a real life object to something high quality and
functional? I'm armed with a Mac , Nikon D810 and a green screen.
I.e I'm guessing that a series of stop motion pictures is the way to
go... but I'm feel that might not be fluid enough.
For the purposes of this question I want to figure out what would make the most sense to program with. E.g. a video I'm rewinding and fast forwarding on
command or a texture atlas of stop motion frames , etc.
Note: Capturing software and photography techniques would be helpful
information as I'm clueless in that department. But, I understand I
can ask that on https://photo.stackexchange.com/ .
What would the basic logic of my code be like for this object? In terms of:
A. The function setting up the object's animation or video or whatever is the best way to have the images prepared for use in my code.
B. The spin() function and
C. The stopSpin() function.
A whole project sample isn't needed (though I guess it'd be nice). But, those 3 functions would be enough to get me going.
Is SpriteKit the wisest choice?
Here is the second draft of my answer that shows off the basic functionality of a simple sprite animation:
class GameScene: SKScene {
// Left spin is ascending indices, right spin is descending indices.
var initialTextures = [SKTexture]()
// Reset then reload this from 0-6 with the correct image sequences from initialTextures:
var nextTextures = [SKTexture]()
var sprite = SKSpriteNode()
// Use gesture recognizer or other means to set how fast the spin should be.
var velocity = TimeInterval(0.1)
enum Direction { case left, right }
func spin(direction: Direction, timePerFrame: TimeInterval) {
nextTextures = []
for _ in 0...6 {
var index = initialTextures.index(of: sprite.texture!)
// Left is ascending, right is descending:
switch direction {
case .left:
if index == (initialTextures.count - 1) { index = 0 } else { index! += 1 }
case .right:
if index == 0 { index = (initialTextures.count - 1) } else { index! -= 1 }
}
let nextTexture = initialTextures[index!]
nextTextures.append(nextTexture)
sprite.texture = nextTexture
}
let action = SKAction.repeatForever(.animate(with: nextTextures, timePerFrame: timePerFrame))
sprite.run(action)
}
override func didMove(to view: SKView) {
removeAllChildren()
// Make our textures for spinning:
for i in 0...6 {
initialTextures.append(SKTexture(imageNamed: "img_\(i)"))
}
nextTextures = initialTextures
sprite.texture = nextTextures.first!
sprite.size = nextTextures.first!.size()
addChild(sprite)
spin(direction: .left, timePerFrame: 0.10)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
spin(direction: .right, timePerFrame: velocity)
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
spin(direction: .left, timePerFrame: velocity)
}
}
Right now you just click / release to alternate right left.
Todo for next draft:
- Implement gesture recognizer for velocity
- Implement decay if wanted (so it will slow down over time)
(Old video, new code does not reset frame to 0):
Image assets are found here for the animation:
https://drive.google.com/open?id=0B3OoSBYuhlkgaGRtbERfbHVWb28

Image Warp in IOS

i am new bie in IOS Image editing work.
I want to make functionality of Image Warp in ios or swift (any one).
I search lots of googling but not getting exact what i want
below link i am searf
How can you apply distortions to a UIImage using OpenGL ES?
https://github.com/BradLarson/GPUImage
https://github.com/Ciechan/BCMeshTransformView
Here is image what i want (When i touch the grid point image should we wrap and if i place the grid point at original place its should be original like wise)
I've written an extension for BCMeshTransformView that allows you to apply warp transform in response to user's touch input.
extension BCMutableMeshTransform {
static func warpTransform(from startPoint:CGPoint,
to endPoint:CGPoint, in size:CGSize) -> BCMutableMeshTransform {
let resolution:UInt = 30
let mesh = BCMutableMeshTransform.identityMeshTransform(withNumberOfRows: resolution,
numberOfColumns: resolution)!
let _startPoint = CGPoint(x: startPoint.x/size.width, y: startPoint.y/size.height)
let _endPoint = CGPoint(x: endPoint.x/size.width, y: endPoint.y/size.height)
let dragDistance = _startPoint.distance(to: _endPoint)
for i in 0..<mesh.vertexCount {
var vertex = mesh.vertex(at: i)
let myDistance = _startPoint.distance(to: vertex.from)
let hEdgeDistance = min(vertex.from.x, 1 - vertex.from.x)
let vEdgeDistance = min(vertex.from.y, 1 - vertex.from.y)
let hProtection = min(100, pow(hEdgeDistance * 100, 1.5))/100
let vProtection = min(100, pow(vEdgeDistance * 100, 1.5))/100
if (myDistance < dragDistance) {
let maxDistort = CGPoint(x:(_endPoint.x - _startPoint.x) / 2,
y:(_endPoint.y - _startPoint.y) / 2)
let normalizedDistance = myDistance/dragDistance
let normalizedImpact = (cos(normalizedDistance * .pi) + 1) / 2
vertex.to.x += maxDistort.x * normalizedImpact * hProtection
vertex.to.y += maxDistort.y * normalizedImpact * vProtection
mesh.replaceVertex(at: i, with: vertex)
}
}
return mesh
}
}
Then just set the property to your transformView.
fileprivate var startPoint:CGPoint?
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { return }
startPoint = touch.location(in: self)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let startPoint_ = startPoint else { return }
guard let touch = touches.first else { return }
let position = touch.location(in: self)
transformView.meshTransform = BCMutableMeshTransform.warpTransform(from: startPoint_,
to: position, in: bounds.size)
}
The warp code is not perfect, but it gets the job done in my case. You can play with it, but the general idea stays the same.
Take a look at my answer to this question:
Warp \ bend effect on a UIView?
You might also look at this git library:
https://github.com/Ciechan/BCMeshTransformView
That might be a good starting point for what you want to do, but you'll need to learn about OpenGL, transformation matrices, at lots of other things.
What you are asking about is fairly straightforward OpenGL. You just need to set up a triangle strip that describes the modified grid points. You'd load your image as a texture, and then render the texture using the triangle strips.
However, "straightforward OpenGL" is sort of like straightforward rocket science. The high-level concepts may be straightforward, but there end up being lots of very fussy details you have to get right in order to make it work.
Take a look at this short video I created with my app Face Dancer
Face Dancer video with grid lines

How do I make an if statement for my rotating circle in Swift?

I have this circle and it can rotate 360 degrees to the left and right when the user has their finger on the node and is rotating. I need to figure out how to make an if statement so when it rotates to the left I can add an action and when it rotates to the right I can add another action. Here is the code I have:
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
for touch in touches {
let location = touch.locationInNode(self)
let node = self.nodeAtPoint(location)
if node.name == "rotatecircle" {
//lets user rotate circle like a knob when there is one finger on node.
let dy = circle.position.y - location.y
let dx = circle.position.x - location.x
let angle2 = atan2(dy, dx)
circle.zRotation = angle2
}
}
}
One approach would be to compare the angle2 value to the angle value from the previous touch. You can then create an if statement that does what you want based on the direction of the rotation.
Some pseudo-code:
In your class:
var previousAngle:Double
In touchesMoved
let delta = (angle2 - previousAngle) mod M_PI
if delta > 0 {
// do action 1
}
else {
// do action 2
}
previousAngle = angle2
You will need some logic to check if this is the first touch. In that case you don't have a previousAngle yet, so you don't want to take an action.

Rotating SKNode to point at touch contact point

Context: I'm using Xcode, Swift, and SpriteKit
I've created a separate class file "Ship.swift" and within it I've got:
let RAD_PER_SEC: CGFloat = 0.1
var direction = 0
//Updates object value for determining how much to rotate object
func spin {
}
Ideally I want to make an app sort of like the old game Astroids. For now, I just a ship that rotates in the center of the screen and points towards the touch-contact point.
If you want to rotate node towards the touch location you need to know the angle to rotate to. Because in Spritekit angles are measured in radians there are some conversions that have to be done:
let Pi = CGFloat(M_PI)
let DegreesToRadians = Pi / 180
After that you have to use atan2() to calculate the angle...Here is simple example which rotates sprite using touchesMoved method:
override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
let curTouch = touches.anyObject() as UITouch
let curPoint = curTouch.locationInNode(self)
let deltaX = self.yourNode.position.x - curPoint.x
let deltaY = self.yourNode.position.y - curPoint.y
let angle = atan2(deltaY, deltaX)
self.yourNode.zRotation = angle + 90 * DegreesToRadians
}
As of iOS8 Apple added SKConstraints which can be added to SKNodes. Here's the documentation: https://developer.apple.com/library/mac/documentation/SpriteKit/Reference/SKConstraint_Ref/index.html#//apple_ref/occ/cl/SKConstraint
In your case you'll want to create the constraint when the user touches the screen - SKConstraint.orientToPoint(touchLocation, offset: SKRange.rangeWithConstantValue(0))
And the add it to your sprite node using the constraints property.

Resources