I want to skew (correct me if this is not the correct word) a bitmap so that it appears to have depth. A good way to visualize what I am asking for is how the credits of Star Wars are angled to show depth.
I have tried the following:
canvas.getMatrix().postSkew(kx,ky,px,py);
and
canvas.skew(sx,sy);
But I have not had much success. The above methods seem to always transform the bitmap into a parallelogram. Is there a way to transform the bitmap into a trapezoid instead?
Here is a snippet of code that I took from the examples that Romain pointed me to.
canvas.rotate(-mOrientation[0] + mHeading, mCenterX, mCenterY);
camera.save();
if (mReverse) {
camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}
camera.rotateX(mOrientation[1]);
camera.applyToCanvas(canvas);
canvas.drawPath(mPath, mPaint);
canvas.drawCircle(mCenterX, mCenterY, mRadius - 37, mPaint);
camera.restore();
I spent a lot of time working on this today (ran into the same problem) and came up with the code below.
Key thing to note, you need to set preTranslate() and postTranslate() to the center (or somewhere else) of your Canvas area. It seems to mean that it uses the center of the image to apply the transformation from, instead of the upper left corner (x=0,y=0) by default. This is why you would get a parallelogram instead of what you would expect, a trapezoid (Thanks for teaching me the names of those).
The other important thing that I picked up is the Save/Restore functions on the Canvas/Camera. Basically, if you call the Rotate functions consecutively three times without restoring the state back each time, you would keep rotating your object around and around each time you draw. That might be what you want, but I certainly didn't in my case. Same applies to the canvas as you are basically applying the Matrix from the Camera object to the Canvas and it needs to be reset otherwise the same thing occurs.
Hope this helps someone, this is not well documented for beginners. Tip to anyone reading this, check out the APIDemos folder in the SDK Samples. There is a Rotate3dAnimation.java file which demonstrates this as well.
//Snippet from a function used to handle a draw
mCanvas.save(); //save a 'clean' matrix that doesn't have any camera rotation in it's matrix
ApplyMatrix(); //apply rotated matrix to canvas
Draw(); //Does drawing
mCanvas.restore(); //restore clean matrix
//
public void ApplyMatrix() {
mCamera.save();
mCamera.rotateX(-66);
mCamera.rotateY(0);
mCamera.rotateZ(0);
mCamera.getMatrix(mMatrix);
int CenterX = mWidth / 2;
int CenterY = mHeight / 2;
mMatrix.preTranslate(-CenterX, -CenterY); //This is the key to getting the correct viewing perspective
mMatrix.postTranslate(CenterX, CenterY);
mCanvas.concat(mMatrix);
mCamera.restore();
}
You cannot achieve the effect you want with skew(). However, you can use a Camera object and 3D rotations to achieve this effect. The Camera will generate a Matrix for you that you can then apply on the Canvas. Note that the result will not be perspective correct, but good enough for your purpose. This how 3D rotations are done in Honeycomb's Launcher for instance (and many other apps.)
I don't think the "Star Wars effect" is an affine transformation, which I think are the only operations supported by Matrix.
Related
I wonder if it is be possible to animate Google Maps markers rotations along x- and y-axis like how we'd rotate an ImageView using ObjectAnimator around x-axis and/or y-axis. Apparently, one can rotate (change) the orientation of a marker clockwise, which is along z-axis (in X-Y plane), but I seem to be unable to find something similar for even rotating a marker (bitmap) around x- or y-axis. I have found few discussions like this which might be somehow related to what I'm looking for but I am rather confused on how to go about this. Any help is greatly appreciated!
UPDATE I
I did further research and came up with a proposal on how to tackle this problem:
Google Map Marker has a setter method for setting its icon, referred to as setIcon. Not only through the MarkerOption but also as an standalone method to reset the Marker icon. This method expects a BitmapDescriptor to be passed in in order to update the icon. Using BitmapDescriptorFactory one can easily get a BitmapDescriptor from a given Bitmap object.
Since Google Maps Marker doesn't support 3D rotations, we need to somehow rotate the Bitmap which goes in place of the Marker icon outside of the Marker itself. One way to do this, as far as my findings go, to create a Canvas and a Camera objects, while former is linked to the Drawable to be 3D rotated, the latter is used to actually perform the 3D rotations.
Using Camera helper methods like rotateX, rotateY, and rotateZ, in addition to any necessary translations, one can obtain a customized Matrix instance. By applying this Matrix to Canvas using, for example, concat or setMatrix method, we enforce the the rotations.
The drawable can be linked to Canvas, that is, we may use Drawable.draw(Canvas canvas) method to actually draw into the Bitmap while 3D transformations are applied. Assuming that the Canvas object is linked to the Bitmap. This way the transformed version of the drawable should now be held by the Bitmap instance.
Using Marker setter method setIcon, we first recycle the older BitmapDescriptor and then create a new one, and pass that object to setIcon.
Questions: I wonder if this is the best way to accomplish what I'm looking for. Moreover, how to actually accomplish an animation. I am certain an approach like the one using Animation and overriding it applyTransformation(float interpolatedTime, Transformation t) won't work as it is only applicable to View objects. I further believe I'm better off using ValueAnimator which provides the necessary timing engine for running animations, that is calculating the animated values and set them on target object, in this case the rotation value.
UPDATE II
I have come up with the following snippet which is pretty much self-explanatory. Unfortunately, once the animation starts, the icon is removed and nothing else. I captured the logs to make sure the ValueAnimator actually works and it turns out that it does indeed. I also removed all transformations and made sure the Matrix is identity but that didn't help. Getting the Drawable and attempting to draw that into Bitmap instance via Canvas still doesn't work. In fact, when the animation begins, the icon is simply removed. To verify if bitmap file is really created to be replaced, I tried to sample and save the bitmap into SDCARD as PNG format. It's confirmed that the saved PNGs are all blank and that's why the icon is seen to be removed. Any thought?
private void animateMarker() {
if (mCamera == null) {
mCamera = new Camera();
}
ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
animator.setDuration(300);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// float interpolatedTime = ((Float) (animation.getAnimatedValue())).floatValue();
// final double radians = Math.PI * interpolatedTime;
// float degrees = (float) (180.0 * radians / Math.PI);
final Matrix matrix = new Matrix();
// mCamera.translate(0.0f, 0.0f, (float) (150.0 * Math.sin(radians)));
// mCamera.rotateX(degrees);
// mCamera.rotateY(degrees);
// mCamera.rotateZ(degrees);
// mCamera.getMatrix(matrix);
Resources resources = mContext.getResources();
Drawable drawable = resources.getDrawable(R.drawable.custom_pin);
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
// mCamera.applyToCanvas(canvas);
// canvas.setMatrix(matrix);
// drawable.draw(canvas);
canvas.drawBitmap(bitmap, matrix, null);
mMarkerSetLocation.setIcon(mBitmapDescriptorFactory.fromBitmap(bitmap));
}
});
animator.start();
}
I have a custom view that extends SurfaceView. I am drawing an image on the canvas. When the user touches a point on the canvas, i want to show a magnified view of the area around the touched co-ordinates. And preferably, as the finger moves around, i would like to update the magnified view's content accordingly.
I was wondering if the android platform supports such a functionality natively. If not, can one of you point me to a good example that can get me started or share ideas on how to implement it. I don't do much 2D or 3D graphics of this sort and am still trying to understand the Canvas and Matrix Classes to see what i can be use.
I searched the forum for a similar question but could not find any. So, pls don't flag me for asking a question that already exists.
And no - i am not using OpenGL-ES or any such 3rd party library (yet).
Thanks All.
To zoom the image you're drawing on the canvas:
Create a BitmapShader (using the bitmap of the image you're drawing), a Matrix and a Paint:
shader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
matrix = new Matrix();
shaderPaint = new Paint();
shaderPaint.setShader(shader);
On a touch event record the touch position (e.g. in a PointF):
zoomPos.x = event.getX();
zoomPos.y = event.getY();
...and set up the shader's matrix (I do this on each touch, there's probably a better way):
matrix.reset();
matrix.postScale(2f, 2f);
matrix.postTranslate(-zoomPos.x, -zoomPos.y);
shader.setLocalMatrix(matrix);
Then in the drawing code, draw a circle using the shader Paint.
canvas.drawCircle(zoomPos.x, zoomPos.y, size_of_the_circle, shaderPaint);
Edit
The two lines:
matrix.postScale(2f, 2f);
matrix.postTranslate(-zoomPos.x, -zoomPos.y);
Can be replaced with one:
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
This allows the scale factor to be changed without breaking the offset.
I have a Opengl ES 1.x ANdroid 1.5 app that shows a Square with Perspective projection, on the center of the screen.
I need to move the camera (NOT THE SQUARE) when the user moves the finger on the screen, for example, if the user moves the finger to the right, the camera must be moved to the left, it must be shown like if the user is moving the square.
I need to do it without translating the square. The square must be on the opengl position 0,0,-1 allways.
I DONT WANT to rotate the camera arround the square, no, what i want is to move the camera side to side. Code examples are welcome, my opengl skills are very low, and i can't find good examples for this in google
I know that i must use this function: public static void gluLookAt (GL10 gl, float eyeX, float eyeY, float eyeZ, float centerX, float centerY, float centerZ, float upX, float upY, float upZ), but i dont understand where and how to get the values for the parameters. Because this, i will apreciate code examples for doing this.
for example:
I have a cube on the position 0,0,-1. I want that my camera points the cube. I tryed with this: GLU.gluLookAt(gl, 0, 0, 2, 0, 0, 0, 0, 0, 1);, but the cube is not in the screen, i just donmt understand what im doing wrong
First of all, you have to understand that in OpenGL there are not distinct model and view matrices. There is only a combined modelview matrix. So OpenGL doesn't care (or even know) if you translate the camera (what is a camera anyway?) or the object, so your requirement not to move the square is entirely artificial. Though it may be that this is a valid requirement and the distinction between model and view transformation often is very practical, just don't think that translating the square is any different from translating the camera from OpenGL's point of view.
Likewise don't you neccessarily need to use gluLookAt. Like glOrtho, glFrustum or gluPerspective this function just modifies the currently selected matrix (usually the modelview matrix), nothing different from the glTranslate, glRotate or glScale functions. The gluLookAt function comes in handy when you want to position a classical camera, but its functionality can also be achieved by calls to glTranslate and glRotate without problems and sometimes (depending on your requirements) this is even easier than artificially mapping your view parameters to gluLookAt parameters.
Now to your problem, which is indeed solvable quite easily without gluLookAt: What you want to do is move the camera in a direction parallel to the screen plane and this in turn is equivalent to moving the camera in the x-y-plane in view space (or camera space, if you want). And this in turn is equivalent to moving the scene in opposite direction in the x-y-plane in view space.
So all that needs to be done is
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(x, y, 0.0f);
//camera setup...
Where (x, y) is the movement vector determined from the touch events, appropriately scaled (try dividing the touch coords you get by the screen dimensions or something similar for example). After this glTranslate comes whatever other camera or scene transformations you already have (be it gluLookAt or just some glTranslate/glRotate/glScale calls). Just make sure that the glTranslate(x, y, ...) is the first transformation you do on the modelview matrix after setting it to identity, since we want to move in view space.
So you don't even need gluLookAt. From your other questions I know your code already looks something like
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(x, y, z);
glRotatef(...);
...
So everything you need to do is plug the x and y values determined from the touch movement into the first glTranslate call (or add them to already existing x and y values), since multiple translations are perfectly commutative.
For more insight into OpenGL's transformation pipeline (which is definitely needed before progressing further), you may also look at the asnwers to this question.
EDIT: If you indeed want to use gluLookAt (be it instead or after the above mentioned translation), here some small words about its workings. It defines a camera using three 3d vectors (passed in as 3 consecutive values each). First the camera's position (in your case (0, 0, 2)), then the point at which the camera looks (in your case (0, 0, 0), but (0, 0, 1) or (0, 0, -42) would result in the same camera, the direction matters). And last comes an up-vector, defining the approximate up-direction of the camera (which is further orthogonalized by gluLookAt to make an appropriate orthogonal camera frame).
But since the up-vector in your case is the z-axis, which is also the negative viewing direction, this results in a singular matrix. You probably want the y-axis as up-direction, which would mean a call to
gluLookAt(0,0,2, 0,0,0, 0,1,0);
which is in turn equivalent to a simple
glTranslate(0, 0, -2);
since you use the negative z-axis as viewing direction, which is also OpenGL's default.
Good day,
I have weird problem with drawing image. Code and pictures say more then words.
mCamera.save();
mCamera.rotateX(rotateX);
mCamera.getMatrix(mMatrix);
mCamera.restore();
canvas.save();
canvas.setMatrix(mMatrix);
// here I draw images
...
canvas.restore();
and results are at images below. First picture have angle 0, second around 45 degree and last something more. It depend on size of area (number of bitmaps) I want to draw. I notice that when I draw bitmaps that whole fits canvas bounds, it works fine. But problem is mainly when I draw images with something like (so with part outside of canvas)
canvas.drawBitmap(image, -100, -100, null)
and images (hmm, because I'm new here, I cannot post images directly ...)
ttp://locus.asamm.cz/data/_temp/1311873666794.png
http://locus.asamm.cz/data/_temp/1311873695945.png
http://locus.asamm.cz/data/_temp/1311873782054.png
So question is, if there is any working solution or at least any tip. Also if anyone experienced can tell if drawing with OpenGL can help with this and if so, please point me to any information source that can help me with drawing bitmaps that change a lot (it's map application so user move with map), because I still cannot find any simple and clear source of info.
Thanks to all very much
It's a limitation of the 2D drawing API. To do true 3D you should use OpenGL.
I expect you are trying to produce a google maps tilt/rotate effect which I have successfull done for google maps since they don't think we need an update ;-) and I needed it for my application, even if you are using your own tiles it's basically the same thing.
One thing that helps is realize that the rotations for the Camera Matrix are performed in the upper left corner.
So you should transform to the appropriate location (dependent on axis of rotation and your expected results) and then back, something like ... the effects you are getting were very similar to mine before I read the docs and figured that out.
camera.save();
camera.rotateX(tilt); // tilt forward or backward
camera.rotateY(0);
camera.rotateZ(angle); // Rotate around Z access (similar to canvas.rotate)
camera.getMatrix(cameraMatrix);
// This moves the center of the view into the upper left corner (0,0)
// which is necessary because Matrix always uses 0,0, as it's transform point
// use the center of the canvas, or the bottom center dependent on your results
cameraMatrix.preTranslate(-centerX, -centerY);
// NOTE: Camera Rotations logically happen here when the canvas has the matrix applied
// This happens after the camera rotations are applied, moving the view back to
// where it belongs, allowing us to rotate around the center or any point we choose
// Move it back after the rotations are applied
cameraMatrix.postTranslate(centerX, centerY);
camera.restore();
canvas.concat(cameraMatrix);
The other thing to do is to oversize the container so you don't have empty space (or at least limit it) after your tilt/rotate operations, you can do that by calculating the needed oversize, the diagonal of your display works for basic rotation, + a percentage based on tilt if you are using that.
Playing around with the pre/postTranslate can can give you some interesting results.
As to moving the bitmap I am not really sure why you are doing this, probably panning, but as long as the canvas is getting filled it shouldn't matter
Update
Here is how I oversize the canvas, I tried to use the LayoutParams to do this but didn't have much luck with it so on Measure was the way to go for me.
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
if (!isInEditMode())
super.onMeasure(View.MeasureSpec.makeMeasureSpec(scaledDimensionsW,
View.MeasureSpec.EXACTLY),
View.MeasureSpec.makeMeasureSpec(scaledDimensionsH,
View.MeasureSpec.EXACTLY));
else
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
I'm am working on a basic augmented reality application on Android. What I did so far is detect a square with opencv and then using cvFindExtrinsicCameraParams2() I calculated a rotation and translation vector. For this I used 4 object points, which are just the corners of a square around (0,0,0) and the 4 corners of the square in the image.
This yields me a pretty good rotation and translation matrix. I also calculated the rotation matrix with cvRodrigues2() since using this is easier than the rotation vector. As long as I use these to draw some points in the image everything works fine. My next step is however to pass these vectors and the matrix back to java and then use them with OpenGL to draw a square in an OpenGLView. The square should be exactly around the square in the image which is displayed behind the OpenGLView.
My problem is that I cannot find the correct way of using the rotation matrix and translation vector in OpenGL. I started of with exactly the same object points as used for the openCV functions. Then I applied the rotation matrix and translation vector in pretty much any possible way I could think of. Sadly none of these approaches produce a result which is anyway near what I hoped for. Can anyone tell me how to use them correctly?
So far the "closest" results I have gotten, was when randomly multiplying the whole matrix with -1. But most of the time the squares still look mirror inverted or rotated for 180 degrees. So I guess it was just a lucky hit, but not the right approach.
Okay after some more testing I finally managed to get it to work. While I don't understand it... it does 'work'. For anyone who will need to do this in the future here is my solution.
float rv[3]; // the rotation vector
float rotMat[9]; // rotation matrix
float tv[3]; // translation vector.
rv[1]=-1.0f * rv[1]; rv[2]=-1.0f * rv[2];
//Convert the rotation vector into a matrix here.
//Complete matrix ready to use for OpenGL
float RTMat[] = {rotMat[0], rotMat[3], rotMat[6], 0.0f,
rotMat[1], rotMat[4], rotMat[7], 0.0f,
rotMat[2], rotMat[5], rotMat[8], 0.0f,
tv[0], -tv[1], -tv[2], 1.0f};
As genpfault said in his comment everything needs to be transposed since OpenGL since OpenGL needs a column-major order. (Thanks for the comment, I saw that page earlier already.) Furthermore the y and z rotation angle as well as the y and z translation need to be multiplied by -1. This is what I find a bit weird. Why only those and not the x values too?
This works as it should I guess. But corners the don't match exactly. I guess this is caused by some wrong openGLView configurations. So even though I am still not a 100% happy with my solution I guess it is the answer to my question.
Pandoro's method really works! In case someone wondering "how to convert the rotation vector into a rotation matrix" here's how I did it. By the way, I've used these in OpenGL 2, not ES.
// use the rotation vector generated from OpenCV's cvFindExtrinsicCameraParams2()
float rv[] = {rotation->data.fl[0], rotation->data.fl[1], rotation->data.fl[2] };
// use the translation vector generated from OpenCV's cvFindExtrinsicCameraParams2()
float tv[] = {translation->data.fl[0], translation->data.fl[1], translation->data.fl[2]} ;
float rm[9];
// rotation matrix
CvMat* rotMat = cvCreateMat (3, 3, CV_32FC1);
// rotation vectors can be converted to a 3-by-3 rotation matrix
// by calling cvRodrigues2() - Source: O'Reilly Learning OpenCV
cvRodrigues2(rotation, rotMat, NULL);
for(int i=0; i<9; i++){
rm[i] = rotMat->data.fl[i];
}
rv[1]=-1.0f * rv[1]; rv[2]=-1.0f * rv[2];
//Convert the rotation vector into a matrix here.
//Complete matrix ready to use for OpenGL
float RTMat[] = {rm[0], rm[3], rm[6], 0.0f,
rm[1], rm[4], rm[7], 0.0f,
rm[2], rm[5], rm[8], 0.0f,
tv[0], -tv[1], -tv[2], 1.0f};
Good luck!