Reactive Extensions(RX) Rotation angle - system.reactive

We have all seen the nice RX handling of mouse drag n drop.
I want something similar but outputting the change in angle to the centre of the screen.
Like if the user hits the mouse button and circles the screen twice I would get values from 0 to 720 degrees.
Essentially rotating the thing on screen.
How would one do that?

This will give you the angle in radians from the center of the object. It will only operate in the range (-Pi, Pi] however. If you rotate three times, you won't get a value higher than a single rotation.
var mousedown = from evt in Observable.FromEventPattern<MouseButtonEventArgs>(this, "MouseDown")
select evt.EventArgs.GetPosition(this);
var mouseup = from evt in Observable.FromEventPattern<MouseEventArgs>(this, "MouseUp")
select evt.EventArgs.GetPosition(this);
var mousemove = from evt in Observable.FromEventPattern<MouseEventArgs>(this, "MouseMove")
select evt.EventArgs.GetPosition(this);
Vector center = new Vector(this.Width / 2, this.Height / 2);
var radian = from start in mousedown
from pos in mousemove.StartWith(start).TakeUntil(mouseup)
select Math.Atan2((pos - center).Y, (pos -center).X);
EDIT
If you are after the change in angle, the following should work:
var angle = from start in mousedown
from pos in mousemove.StartWith(start).TakeUntil(mouseup)
select Vector.AngleBetween(pos - center, start - center);

Thanks for your help. Ive figured out the last bit myself:
var down = Observable.FromEventPattern<MouseButtonEventArgs>(this, "MouseDown").Select(e=>e.EventArgs.GetPosition(this));
var move = Observable.FromEventPattern<MouseEventArgs>(this, "MouseMove").Select(e => e.EventArgs.GetPosition(this));
var up = Observable.FromEventPattern<MouseEventArgs>(this, "MouseUp").Select(e => e.EventArgs.GetPosition(this));
Vector center = new Vector(this.Width / 2, this.Height / 2);
var f = from start in down
from pos in move.StartWith(start).TakeUntil(up).Buffer(2, 1)
where pos.Count == 2
select Vector.AngleBetween(new Vector(pos[0].X, pos[0].Y) - center, new Vector(pos[1].X, pos[1].Y) - center);
f.ObserveOnDispatcher().Subscribe(p => {
game.Player.Angle += p;
});

Related

Math: How to spin a wheel by drag&drop (Canvas, 2D)?

I'm struggling with probably simple math to spin/rotate a wheel using drag&drop.
There is a Radial Layout in a Canvas (Unity UI) and it can already be rotated by setting a property called StartAngle that is in a range from 0-360. In this Radial there are items, so the StartAngle is for the first item and places all the child elements around the layout radius.
I want to implement drag & drop for the items so that you can drag a child around and the Radial will spin accordingly (infinitely).
Right now, I have this as a starting point:
public void OnDrag(PointerEventData eventData)
{
var delta = eventData.delta.x * Time.deltaTime;
var newAngle = radialLayout.StartAngle + delta;
if (newAngle >= 360)
newAngle = newAngle - 360;
else if (newAngle < 0)
newAngle = Mathf.Abs(360 - newAngle);
radialLayout.StartAngle = newAngle;
}
It kind of works but doesn't feel very smooth. This is for mobile/touch, so I want both the X and Y delta of the drag operation to be taken into account. Apparently, the y delta is not considered in my example and I have no idea how to incorporate this correctly. The user might do a linear drag & drop on either axis or he/she might also do like a circular drag movement.
So how can I map mouse movement to a rotation angle from 0-360 so that it feels good?
Edit: Thanks for the help, I did it like this now:
public void OnDrag(PointerEventData eventData)
{
// Note the "Head-Minus-Tale rule for Vector subtraction, see http://www.maths.usyd.edu.au/u/MOW/vectors/vectors-3/v-3-7.html
// vSourceToDestination = vDestination - vSource;
// First, we draw a vector from the center point of the radial to the point where we started dragging
var from = dragStartPoint - (Vector2)radialLayout.transform.position;
// Next, we draw a vector from the center point of the radial to the point we are currently dragging on
var to = eventData.position - (Vector2)radialLayout.transform.position;
// Now, we calculate the angle between these two:
var dragAngle = Vector2.SignedAngle(from, to);
// Lerping makes movement fast at the beginning slow at the end
var lerpedAngle = Mathf.Round(Mathf.LerpAngle(radialLayout.StartAngle, dragAngle, 0.5f));
radialLayout.StartAngle = lerpedAngle;
}
I don't know all of your code and types but I would have an idea. I can't test this right now and can not garant that it even works like this but I hope the idea gets clear.
I would probably rather use something like
// This is the vector from the center of the object to the mouse/touch position
// (in screen pixel space)
var touchDirection = eventData.position - Camera.main.WorldToScreenPoint(transform.position);
// angle between the Up (Y) axis and this touchDirection
// for the angle the length of the up vector doesn't matter so there is
// no need to convert it to pixel space
var targetAngle = Vector2.SignedAngle(Vector2.up, touchDirection);
// since the returned angle might be negative wrap it to get values 0-360
if(targetAngle < 0) targetAngle += 360;
// Now either simply use Lerp
// this would simply interpolate each frame to the middle of both values
// the result is a fast movement at the beginning and a very slow at the end
radialLayout.StartAngle = Mathf.Lerp(radialLayout.StartAngle, targetAngle, 0.5f);
// or maybe use a fixed speed like 30°/second
var difference = targetAngle - radialLayout.StartAngle;
radialLayout.StartAngle += Mathf.Sign(difference) * Mathf.Min(30f * Time.deltaTime, Mathf.Abs(difference));
Typed on smartphone but I hope the idea gets clear

JavaFX 8, how to get center location of Scrollpane's Viewport

The Problem
I'm trying to figure out a way to get at which point in the content node the scroll pane's viewport is centered on.
To elaborate on the picture above, the big rectangle is the content (let's say a large image), and the small rectangle is the portion that is shown by the scroll pane. I'm trying to find x and y which would be coordinates from the top left of the content.
What I've Tried
My first thought was to use the getViewportBounds() method of the scroll pane and use its minX and maxX properties to determine the center x point:
Bounds b = scrollPane.getViewportBounds();
double centerX = (b.getMinX() + b.getMaxX()) / 2;
double centerY = (b.getMinY() + b.getMaxY()) / 2;
However, this doesn't work because these numbers are negative and don't seem to accurately describe the x and y I'm looking for anyways.
My next thought was to use the scroll pane's hValue and vValue to get the top left corner of the viewport relative to the content:
Bounds b = scrollPane.getViewportBounds();
double centerX = scrollPane.getHvalue() + b.getWidth() / 2;
double centerY = scrollPane.getVvalue() + b.getHeight() / 2;
This didn't work either though as the hValue and vValue seem to be way too large (when scrolled in only a few pixels, I'm getting numbers like 1600).
My Questions
I seem to have a fundamental misunderstanding of how the viewport works with a scroll pane.
What am I doing wrong here? Can someone explain where these numbers come from? How do I find x and y like in the picture above?
Let (x, y) be the be coordinates of the top, left point shown in the viewport. You can write this as
((contentWidth - viewportWidth) * hValueRel, (contentHeight - viewportHeight) * vValueRel)
vValueRel = vValue / vMax
hValueRel = hValue / hMax
This means assuming hmin and vmin remain 0 you can keep a circle in the center of like this:
// update circle position to be centered in the viewport
private void update() {
Bounds viewportBounds = scrollPane.getViewportBounds();
Bounds contentBounds = content.getBoundsInLocal();
double hRel = scrollPane.getHvalue() / scrollPane.getHmax();
double vRel = scrollPane.getVvalue() / scrollPane.getVmax();
double x = Math.max(0, (contentBounds.getWidth() - viewportBounds.getWidth()) * hRel) + viewportBounds.getWidth() / 2;
double y = Math.max(0, (contentBounds.getHeight() - viewportBounds.getHeight()) * vRel) + viewportBounds.getHeight() / 2;
Point2D localCoordinates = content.parentToLocal(x, y);
circle.setCenterX(localCoordinates.getX());
circle.setCenterY(localCoordinates.getY());
}
private Circle circle;
private Pane content;
private ScrollPane scrollPane;
#Override
public void start(Stage primaryStage) {
// create ui
circle = new Circle(10);
content = new Pane(circle);
content.setPrefSize(4000, 4000);
scrollPane = new ScrollPane(content);
Scene scene = new Scene(scrollPane, 400, 400);
// add listener to properties that may change
InvalidationListener l = o -> update();
content.layoutBoundsProperty().addListener(l);
scrollPane.viewportBoundsProperty().addListener(l);
scrollPane.hvalueProperty().addListener(l);
scrollPane.vvalueProperty().addListener(l);
scrollPane.hmaxProperty().addListener(l);
scrollPane.vmaxProperty().addListener(l);
scrollPane.hminProperty().addListener(l);
scrollPane.vminProperty().addListener(l);
primaryStage.setScene(scene);
primaryStage.show();
}

Unity, Rigidbody Character keeps falling over

I have a problem with trying to keep my character from rolling over, yet allow it to pitch and yaw. The suggestions I have seen have been to lock different axis, but no matter if I lock the x, y, or z axis I always run into a situation where the character can fall over. The best I can get is to lock both the y and z axis. This allows the character to change pitch to conform to the terrain. But, again, if I turn left or right while going up or down a hill and I can roll the character over.
Here is my current code for movement (in case it helps). I have no other code and my rigid body is all defaults. I have a mesh collier for the character set to convex but defaults otherwise.
Any suggestions on how to make this work?
Here's a live demo of y and z axis being locked. Just waltz up the hill and hang a left or right and you'll fall over. (ASWD controls)
https://dl.dropboxusercontent.com/u/27946381/Builds/builds.html
Thanks so much!
var speed = 3.0;
var rotateSpeed = 3.0;
function FixedUpdate() {
var hAxis = 0;
var vAxis = 0;
if( Input.GetAxis("Horizontal") > 0 ) { hAxis = 1.0; } else if( Input.GetAxis("Horizontal") < 0 ) { hAxis = -1.0; } else { hAxis = 0.0; }
if( Input.GetAxis("Vertical") > 0 ) { vAxis = 1.0; } else if( Input.GetAxis("Vertical") < 0 ) { vAxis = -1.0; } else { vAxis = 0.0; }
var rigidBody: Rigidbody = GetComponent(Rigidbody);
// Rotate around y axis
// transform.Rotate(0, hAxis * rotateSpeed, 0);
var deltaRotation : Quaternion = Quaternion.Euler(0, hAxis * rotateSpeed, 0);
rigidbody.MoveRotation(rigidbody.rotation * deltaRotation);
// Move forward / backward
var forward = transform.TransformDirection(Vector3.forward);
var currSpeed = speed * vAxis;
rigidBody.MovePosition( rigidBody.position + (forward * currSpeed) );
var animatorController: Animator = GetComponent(Animator);
animatorController.SetFloat("Speed", currSpeed);
}
well maybe you should check your rigidbody properties called gravity scale.. set it to 0 and you will never fall
I believe your problem is in these MovePosition and MoveRotation. Take a look into scripting reference - these methods basically ignores collision until body is teleported at the specified pose. I.e. you may place the body into some kind of irresolvable situation, when physics engice unable to find appropriate forces to push the body away from another collider, and therefore the body will fall through. In this case it is better to use AddForce and AddTorque.
Also, you can use CharacterController instead of RigidBody. Though it cannot be rotated at all, there are fine methods for kinematic motion with precise collision detection. And you can attach another body to the character controller and rotate it as you wish.
Changing code will change nothing.
Try changing the hitbox of the player to a big cube
(Better) Try to look into the rigidbody properties, as far as I remember I had the same problem and fixed it that way, it might help

Moving the object up and down - a loop

am very much new in Unity3D. Tried to watch some youtube video tutorials. But am having a doubt. I have an object which is placed at the top-right position using the following code at game startup:
myObject.position = mainCam.ScreenToWorldPoint(new Vector3(Screen.width - 75, Screen.height ,0f));
Based on the docs, the (0,0) position in camera viewport is on the left bottom corner and the (1,1) position is on top right corner. That's why I used the following values in the above line:
x = Screen.width - 75; // to position 75px from right side
y = Screen.height; // at top on y-axis
z = 0; // not needed
What I to do is, myObject should move up and down continuously. ie, it should move from top to bottom and vice versa, as a loop. Something like this(the ball moving from top to bottom and viceversa):
While looking for solution, I found an answer. And was trying to tweak it. The object is moving, but it is not moving correctly. It's going sideways! The following tweaked script is used in myObject:
#pragma strict
var mainCam : Camera;
function Start () {
var pointA : Vector3 = transform.position;
var pointB : Vector3 = mainCam.ScreenToWorldPoint(new Vector3(transform.position.x, transform.localScale.y/2 ,0f));
while (true) {
yield MoveObject(transform, pointA, pointB, 3.0);
yield MoveObject(transform, pointB, pointA, 3.0);
}
}
function MoveObject (thisTransform : Transform, startPos : Vector3, endPos : Vector3, time : float) {
var i = 0.0;
var rate = 1.0/time;
while (i < 1.0) {
i += Time.deltaTime * rate;
thisTransform.position = Vector3.Lerp(startPos, endPos, i);
yield;
}
}
But the movement is towards bottom left corner! I have been trying to figure it out for hours now! Any guess on where it went wrong? Or if you have better solutions, I would really appreciate.
Gonna take a stab at posting this as an answer (heaps easier than doing multiple lines in comments anyway).
So, we grab the top-right and bottom-right corners of the screen in pixel dimensions (using 75 as a margin):
var screenPointA:Vector3 = Vector3(Screen.width-75, Screen.height-75, 0);
var screenPointB:Vector3 = Vector3(Screen.width-75, 75, 0);
Then we get the world positions that the object will loop back and forth between:
var pointA:Vector3 = mainCam.ScreenToWorldPoint(screenPointA);
var pointB:Vector3 = mainCam.ScreenToWorldPoint(screenPointB);
If pointA.z or pointB.z are incorrect, you can change them after if required.
(happy to continue commenting/editing if needed to help you solve this!)

How do I move forward in the direction I am pointing in a 3d world?

I am using Cocos3D. I have a camera (which acts as the first-person viewed player in a world with only a spinning "hello, world" and a spinning earth. I have made it possible for the camera to point in any direction, and I have got it to move, but how do I get the camera/player to move forward in the direction he is pointing? (He does not go up or down, i.e. his y position does not change).
I note this is quite an old question - hopefully this answer helps someone!
You need to get the rotation angle of your camera, convert that to radians and use trigonometry to get the new X-Z coordinates. Tell your camera to move to those coordinates and presto, the player has moved forward!
CC3Camera *cam = self.activeCamera;
CC3Rotator *rotator = cam.rotator;
CC3Vector ro = rotatoooor.rotation;
CC3Vector loc = cam.globalLocation;
// If the -90 is left off, you go left/right and not forward
float roA = rotator.rotationAngle-90;
// Bug in rotationAngle? Need this as 315 angle reports as 45
int roI = ro.y;
int diff = roA+90 - roI;
if (diff == 0 && roI == 45)
roA = 315-90;
double theta = roA * M_PI/180; // Convert to radians
/*
x = d cos a
z = d sin a
*/
double sinA = sin(theta);
double cosA = cos(theta);
double newX = distance*cosA + loc.x;
double newZ = distance*sinA + loc.z;
CC3Vector newTo = cc3v(newX, loc.y, newZ); // Pass this to your camera