I am building an android application similar to x-ray scanner (Play Store Link), which moves images smoothly on screen by moving the device left,right top and bottom.
I am using accelerometer for this, but problem is that image is not moving smoothly.
My code is below
int x1 = (int) sensorEvent.values[0]*(screenW/10);
int y1 = (int) sensorEvent.values[1]*(screenH/14);
and then in on Draw
canvas.drawBitmap(bmp, x, y, mPaint);
This is not how you use them. You should take current value and ADD to current position instead of setting position from value directly. The more you tilt - the bigger values you will get and hence the faster the image will appear to move.
You can then also apply some linear interpolation to the movement so that it appears smoother.
Here is a link to learn more about lerp (linear interpolation) in code: http://en.wikipedia.org/wiki/Linear_interpolation#Programming_language_support
Related
I'm trying to make a small circle move in another bigger circle as a ball moving in circle relative to Android phone tilting. I'm doing this in Godot but I think the principle is the same in all game engines probably. I make a scene in Godot and add two sprites as the two circles as the following picture. I get the accelerometer 3D vector, use x and y values and calculate the angle in x and y plate (relative to y axis i.e Vector2(0, 1) ) and rotate the mentioned scene to that degree using an animation, using this code
func _process(delta: float) -> void:
var vec3 = Input.get_accelerometer()
accelVec = Vector2(-stepify(vec3.x, 0.1), -stepify(vec3.y, 0.1))
var angle = accelVec.angle_to(Vector2(0, 1))
rotateTween.interpolate_property(self, "rotation", rotation, angle, 0.2,
Tween.TRANS_LINEAR)
rotateTween.start()
return
But the problem lies in here that when the x value of accelerometer 3D vector changes from a positive to negative value i.e when the ball is at top of the circle and is going to go to the other half of the circle, it actually moves from bottom of the circle to the desired point rather than from top of the circle.
I hope I explained the problem well, though I doubt it.
I added the Gif that shows actual test on an android phone here Testing in Android.
Any idea how to solve this problem?
Thanks in advance.
This is because Tween is interpolating linear values. It doesn't know it's working with angles, or that they should wrap around.
So when you're at -179 degrees and you tween to 179--a difference of 2 degrees--Tween just sees -179 -> 179 and goes through the whole circle.
You probably don't need a Tween here at all because _process() happens every frame.
Ohh.. damm Math !! once again stuck. It seems to be easy but i think its not that easy,
Problem Statement: I want to rotate the 3 fixed points which lies on a fixed circle.
1.when 1 point is selected remaining 2 points should be static mode and only selected point should move/rotate on circumference of circle.
2.And all 3 points are connected via 3 lines as shown in images..when we select a point and rotate it,connected lines also increase and decrease..
I already tried to solve this problem finding angle at each instant after touch.but its not quite working as per my need..
something like this
I hope the following explanation enable you to put the steps into your coding language.
Presumption is that the vertex to be moved has already selected and so the calculation of (xcnd,ycnd) as defined below is used to set the selected vertex of the triangle.
Let the constraining circle have centre at (cx,cy) and radius r.
Let the coordinates of where the screen is touched be (xtch,ytch)
Let the coordinates of where the screen is touched relative to the centre be (xrel,yrel)
then xrel = xtch - cx and yrel = ytch - cy
Let the coordinates of the point on the constraining circle when the screen is touched at (xtch,ytch) be (xcnd,ycnd).
xcndrel = xcnd - cx, and ycndrel = ycnd - cy give the coordinates on the constraining circle relative to its centre,
Note that
xrel and xcndrel will have the same signs (ie both positive or both negative)
and yrel and ycndrel will also have the same signs.
the function abs(x) = x if x>=0 and -x if x<0 should be available in whatever language you are using
the function sign(x) may or may not be available, sign(x) =1 if x>0 and -1 if x<0 and undefined for x=0
If not available then sign(x)=x/abs(x)
Check if xrel=0
if xrel=0 xcndrel=0, ycndrel=r*sign(yrel)
Otherwise work in first quadrant ie where x>0 and y>0 using abs(xrel) and abs(yrel)
find angle where screen is touched relative to centre of circle using
theta=arctan(abs(yrel)/abs(xrel))
find the coordinates (xcndrel, ycndrel) by using theta in the first quadrant and then placing in the correct quadrant using the signs of xrel and yrel
xcndrel = sign(xrel)*r*COS(theta)
ycndrel = sign(yrel)*r*SIN(theta)
Screen coordinates can now be found
xcnd = xcndrel +cx
ycnd = ycndrel + cy
I have a custom drawn rectangle which i want to move in a circular path based on touch events.
It follows the direction of the touch for clockwise or anticlockwise movement but basically move in circular motion, as if moving on the edge of the circle.
My current thought process is as follows:
Based on the users current and previous x,y i shall find the angle in degrees and then move this rectangle by the same angle by re-drawing in the new position, just making sure that it moves on the edge of a circle.
But this leads to some confusion on the following:
1. how do i decide whether angle movement is clockwise or anti-clockwise.
2. I am not being able to figure out the math for this properly.
Would this be the best approach or is there a better idea for doing this?
Also, if this is the best approach, could someone please tell me the formula for calculating the angle by which i should move it while taking care of the clocking and anticlockwise ?
could someone please help?
please let me know if any more details are required.
Thanks
Steps
Here are a few steps in order to move your rectangle along a circle's rim when the user taps and holds to the side of the circle:
1. Obtain direction desired.
2. Obtain angle from current x and y coordinates.
3. Add direction (+1 if counterclockwise, -1 if clockwise) to angle.
4. Calculate new x and y coordinates.
5. Update/display rectangle.
Details
1. In pseudocode, direction = sign(Rectangle1.x - UsersFingerPosition.x). Here sign is a function returning -1 if the number was negative, 0 if it is 0, and 1 if it is positive. Note that sign(0) will only result when the user is on the exact x and y of your rectangle's location. In that case, the rectangle would not move (which should be good). In Java, the sign function is Math.signum().
2. To obtain the current angle use the following java code:
double angle = Math.toDegrees(Math.atan2(Circle.y-Rectangle1.y, Rectangle1.x-Circle.x));
Note the order of Circle.y-Rectangle.y and Rectangle.x...Circle.x. This is a result of the coordinate (0, 0) being in the top left corner instead of the center of the screen.
3. Simple enough, just add direction to angle. If desired, do something like
angle += direction*2; //So it will move more quickly
4. To get the new x and y coordinates of your rectangle, use the trigonometric functions sine and cosine:
Rectangle1.x = Math.cos(Math.toRadians(angle))*Circle.radius + Circle.x - Rectangle1.width;
Rectangle1.y = Math.sin(Math.toRadians(angle))*Circle.radius + Circle.y - Rectangle1.height;
(where Circle.x and Circle.y are the coordinates of the center of your circle and Circle.radius is naturally it's radius).
5. This one you'll have to take care of (or have already) :)!
Hope this helps you!
Steps
Here are a few steps in order to move your rectangle along a circle's rim:
1. Obtain finger position/Check that it's still dragging the rectangle.
2. Obtain angle from current x and y coordinates.
3. Calculate new x and y coordinates.
4. Update/display rectangle.
Details
1. This one is probably specific to your code, however, make sure that when the user starts dragging the rectangle, you set a variable like rectangleDragging to true. Before you run the next steps (in the code), check that rectangleDragging == true. Set it to false once the user lets go.
2. To obtain the current angle use the following java code:
double angle = Math.toDegrees(Math.atan2(Circle.y-Finger.y, Finger.x-Circle.x));
Note the order of Circle.y-Finger.y and Finger.x...Circle.x. This is a result of the coordinate (0, 0) being in the top left corner instead of the center of the screen.
3. To get the new x and y coordinates of your rectangle, use the trigonometric functions sine and cosine:
Rectangle1.x = Math.cos(Math.toRadians(angle))*Circle.radius + Circle.x - Rectangle1.width;
Rectangle1.y = Math.sin(Math.toRadians(angle))*Circle.radius + Circle.y - Rectangle1.height;
(where Circle.x and Circle.y are the coordinates of the center of your circle and Circle.radius is naturally it's radius). Subtracting the width and height of the rectangle should center it on the circle's border instead of placing the left, upper corner on the circle.
4. This one you'll have to take care of (or have already) :)!
Hope this helps you!
I want to achieve a tilt effect when a button is clicked, on Android OS.
Tilt Effect: Not the whole button will be seen as pressed. Only the part that touch event occured should seem to be pressed.
Is this easily possible on Android?
A simple way would be to use canvas draws to draw 4 sided shapes.
Consider each 4 corners. The "untouched" rectangle would be full size the touched rectangle would be smaller.
You just need to draw your four sided shape using a point you calculate for each part of the rectangle. You can get the touch position, then figure out how much "weight" to give each point.
to calculate each corner, you need to figure out how much "weight" to give the touched coordinate, and how much "weight" to give the untouched coordinate. If you touch the top left corner, that corner would use 100% of the touched coordinate, and the other three corners would all use the untouched coordinate.
If you touched the top middle, you would get a shape like this:
We can calculate the corners for any touch spot, by calculating how far from the corner your touch is
float untouchedXWeight1 = Math.abs(xt - x1)/width;
//maximum of 1, minimum of 0
float untouchedYWeight1 = Math.abs(yt - y1)/height;
float untouchedWeight1 = (untouchedXWeight1 + untouchedYWeight1)/2;
//also maximum of 1, minimum of 0
float touchedWeight1 = 1 - untouchedWeight1;
so with those weights, you can calculate your x and y positions for that corner:
x1 = xUntouched1 * untouchedWeight + xTouched1 * touchedWeight1;
y1 = yUntouched1 * untouchedWeight + yTouched1 * touchedWeight1;
Then do similarly for the other 3 corners.
I've created a first draft here : https://github.com/flavienlaurent/TiltEffect
In a second step, I will make it usable with Button etc.
Unfortunatly, I didn't use the very good (but too mathematical for me) answer of HalR
Right now, I am trying to create a simple app where a square follows where your finger touches as you move it along the screen. I would like to do this using opengl-es. I am fairly new to it and right now I am stuck on mapping the window coordinates reported by the touch event to the cartesian plane coordinate system that the opengl-es has. Right now, to get the x and y translation, I am using:
final int x = (e.getX()-(getWidth()/2))/(getWidth()/2) * SOME_SCALING_FACTOR;
final int y = ((getHeight()/2)-e.getY())/(getHeight()/2) * SOME_SCALING_FACTOR;
The logic behind this is that I think the cartesian plane is centered around the screen so I am trying to re-map my touch event coordinates in that way. However, my results are very inaccurate.
Is there another way I should be doing this?
I wouldn't use a SOME_SCALING_FACTOR there. It's better to configure OpenGL for it.
You may use code below to configure camera, then do your drawing.
gl.glMatrixMode(gl.GL_PROJECTION);
gl.glLoadIdentity();
GLU.gluOrtho2D(gl, 0, WINDOWx, 0, WINDOWy);
gl.glMatrixMode(gl.GL_MODELVIEW);
gl.glLoadIdentity();
The lower left point of screen will be origin, upper left is (0,WINDOWy) etc..