Pseudo-3D effect with gyroscope

Search This thread
Aug 10, 2014
27
11
Ulm
I want to share some codes of a small effect that I implemented in my Android app called Arithmetic Puzzles. This is also a chance for me to listen to other people and make improvements. At the end of this post there is a link to the app so that you can see the code in action.

It is a pseudo-3D effect of the playing board items which are looking like rotating slightly based on your viewing angle when you move the device. The effect is not something of very visible but this small non-disturbing animations usually please the user and make the app look cooler.

Why I call it "pseudo"? Because there is no 3D animation behind, and not even a View animation like rotation around some axis or so. The solution is really simple - I just change the border of the item on gyroscope events which somehow fakes the viewing angle change.

The board item is a simple round rectangle and its border is drawn with a gradient of white color going to transparent. This creates the "fake viewing angle" effect.

So here is our BoardItemView class which is just a simple View:

Code:
public class BoardItemView extends View {

    // the color of the board itself (blue)
    private int mBoardBack;
    // the color of the border (white)
    private int mBorderColor;
    // the color of the gradient end (transparent)
    private int mGradientEndColor;

    // constructors
    public ToolboxItemView(Context context) {
        super(context);
        init(context);
    }

    public ToolboxItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        // initialize the colors
        Resources r = context.getResources();
        mBorderColor = r.getColor(R.color.item_border);
        mBoardBack = r.getColor(R.color.item_background);
        int transparent = r.getColor(android.R.color.transparent);
        setBackgroundColor(transparent);
        mGradientEndColor = transparent;
    }

As you see, there is nothing special about its initialization. I skipped the other member variables so that it doesn't have any info that is not yet needed for understanding, I will add them later.

Let's go to the onDraw() function:

Code:
    ...
    private static final float RECT_PADDING_PERCENTAGE = 0.05f;
    private static final float RECT_RADIUS_PERCENTAGE = 0.1f;

    private RectF mRoundRect = new RectF();
    private Rect mBounds = new Rect();
    private float mRadius = 0.0f;
    ...

    @Override
    protected void onDraw(Canvas canvas) {
        // step 1: collect information needed for drawing
        canvas.getClipBounds(mBounds);
        float padding = mBounds.height() * RECT_PADDING_PERCENTAGE;
        mRoundRect.set(mBounds);
        mRoundRect.inset(padding, padding);
        mRadius = RECT_RADIUS_PERCENTAGE * mBounds.height();
        ...

In the first lines of onDraw() I am taking the clip bounds with getClipBounds() function - I need it to understand where I should do my drawing. My experience showed that it is a good idea to get clip bounds, usually you draw between (0, 0) and (width, height), but I have seen some ugly cases (when I was dealing with Android's Launcher codes) where this is not true.

Then I calculate the round rect parameters, like size and corner radius. As you noticed, no "new" calls in onDraw(), all the needed variables are kept as data members and created when this View is instantiated.

Next comes the drawing of the board itself, nothing special:

Code:
    ...
    private Paint mRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    ...

    @Override
    protected void onDraw(Canvas canvas) {

        ...

        // step 2: draw the background fill
        mRectPaint.setShader(null);
        mRectPaint.setDither(false);
        mRectPaint.setStyle(Paint.Style.FILL);
        mRectPaint.setColor(mBoardBack);
        canvas.drawRoundRect(mRoundRect, mRadius, mRadius, mRectPaint);

        ...

As you can see, I am just drawing a board item as a round rectangle. Before drawing I am setting up the Paint: setting shader to null, dither to false, style to FILL and color to mBoardBack (blue). I will explain the shader and dither in the next step where they are being set. Here I just need to reset (disable) them back. Style is set to FILL so that any shape I paint is also filled with the color of the Paint.

Let's go to the border part, which is interesting:

Code:
    ...
    private LinearGradient mBorderGradient;
    ...

    @Override
    protected void onDraw(Canvas canvas) {

        ...

        // step 3: draw the background border
        mRectPaint.setStyle(Paint.Style.STROKE);
        mRectPaint.setColor(mBorderColor);
        createGradient();
        mRectPaint.setDither(true);
        mRectPaint.setShader(mBorderGradient);
        canvas.drawRoundRect(mRoundRect, mRadius, mRadius, mRectPaint);

        // step 4: draw the content of a board item here, like text, image, etc...
    }

First of all, I am setting the paint style to STROKE. This means that any shape I draw will not be filled with the color, only the border will be drawn. There is also FILL_AND_STROKE style which both draws the border of the shape and fills it with the paint (remember that in previous step we just filled the round rectangle). Since I am not setting the width of the border stroking it will be just one pixel wide. This is enough to see the effect and not big enough for eyes to see the "pseudo"-ness of the 3D effect.

After that I am setting the color of the Paint and then calling a createGradient() function. We will come to that function in a few minutes. Then I am enabling the dither mode on the Paint and setting a shader on it to be the gradient that I just created with that createGradient() function call.

What does all that mean and what is a Shader in Android's Paint system? Its basically quite simple - a Shader is an object from where the Paint gets color information during drawing any shape (except drawing bitmaps). When the shader is null then the Paint object uses the color it was set, otherwise it asks the Shader object what color to use when painting a pixel at some coordinate. As an example you can see a picture acting as a shader and what will happen if a Paint will draw letter 'R' using that shader.

android_shader.png


Seems like there are fixed number of shaders in Android, although BitmapShader is covering almost all of the possibilities. In my case I use LinearGradient class which extends Shader class.

TO BE CONTINUED in the thread, seems there is limit on post size...
 
Aug 10, 2014
27
11
Ulm
...CONTINUATION of the original post.

We also set dither to 'true'. It is always a good idea to set dither to true when you are drawing gradients. For more information you can go here where this famous Android Guy is showing some examples of dithering.

Lets go to the createGradient() function:

Code:
    ...
    private Float mXAngle = null;
    private Float mYAngle = null;
    ...

    private void createGradient() {
        if (mBounds.height() == 0) {
            return;
        }
        int startColor = mBorderColor;
        float x0 = mBounds.left;
        float y0 = mBounds.bottom;
        float x1 = mBounds.right;
        float y1 = mBounds.top;
        if (mXAngle != null && mYAngle != null) {
            if (mXAngle == 0 && mYAngle == 0) {
                startColor = mGradientEndColor;
            } else {
                float h = mBounds.height();
                float w = mBounds.width();
                float radius = (float) Math.sqrt(h * h + w * w) / 2.0f;
                float norm = radius / (float) Math.sqrt(mXAngle * mXAngle + mYAngle * mYAngle);
                x0 = mBounds.centerX() + mXAngle * norm;
                y0 = mBounds.centerY() + mYAngle * norm;
                x1 = mBounds.centerX() - mXAngle * norm;
                y1 = mBounds.centerY() - mYAngle * norm;
            }
        }
        mBorderGradient = new LinearGradient(x0, y0, x1, y1,
                startColor, mGradientEndColor, Shader.TileMode.CLAMP);
    }

The variables mXAngle and mYAngle are set from outside using gyroscope data. We will come to that later. Now think of them as of a vector - they are showing a direction. We are using this direction as a direction of our gradient.

In order to fully define a linear gradient we need 2 (x,y) points on the plane - a start point and end point as shown in the picture below.

android_gradient.png


Note that these points should be in the coordinate system of the view, that is why are using mBounds variable. The shader mode is set to CLAMP so that outside these bounds the color of the corresponding point is used.

Then comes some math. We set the default "view angle" to the direction from left-bottom to top-right. After that, if there is a direction set, we calculate these 2 gradient points as an intersection of the rectangle's outer circle and the direction line passing through the center of the rectangle. If the direction vector is zero then both gradient colors are set to transparent and no border is drawn (view angle "from top"). First we calculate the radius of rectangle's outer circle - the distance from the center of the rectangle to its corners. Then we calculate a normalization factor and finally put the view direction vector in the center of the rectangle and multiply by normalization factor in order to put its endpoint on the outer circle. The gradient is ready.

In the picture below you can see the result of drawing a round rectangle border with a linear gradient shader:

android_rect_3d.png


The final step is to set the "view angle" based on gyroscope values:

Code:
    public void onGyroChanged(float xAngle, float yAngle) {
        mXAngle = xAngle;
        mYAngle = yAngle;
        invalidate();
    }

This function sets the new angle values and calls invalidate() to redraw self.

The gyroscope processing is out of the scope of this post, so I will just paste the code here. It is mostly copied from Android documentation:

Code:
public class GyroHelper implements SensorEventListener {

    private static final float NS2S = 1.0f / 1000000000.0f;
    private Display mDisplay;
    private boolean mStarted = false;
    private SensorManager mManager;
    private long mLastTime = 0;
    private float mAngleX = 0.0f;
    private float mAngleY = 0.0f;

    public GyroHelper(Context c) {
        mManager = (SensorManager) c.getSystemService(Context.SENSOR_SERVICE);
        WindowManager wm = (WindowManager) c.getSystemService(Context.WINDOW_SERVICE);
        mDisplay = wm.getDefaultDisplay();
    }

    public static boolean canBeStarted(Context c) {
        SensorManager manager = (SensorManager) c.getSystemService(Context.SENSOR_SERVICE);
        return manager.getDefaultSensor(Sensor.TYPE_GYROSCOPE) != null;
    }

    public void start() {
        mStarted = false;
        Sensor sensor = mManager.getDefaultSensor(Sensor.TYPE_GYROSCOPE);
        if (sensor == null) {
            return;
        }
        mStarted = true;
        reset();
        mManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_UI);
    }

    public void stop() {
        mStarted = false;
        reset();
        mManager.unregisterListener(this);
    }

    public boolean isStarted() {
        return mStarted;
    }

    public float getXAngle() {
        switch (mDisplay.getRotation()) {
        case Surface.ROTATION_0: return -mAngleY;
        case Surface.ROTATION_90: return -mAngleX;
        case Surface.ROTATION_180: return mAngleY;
        case Surface.ROTATION_270: return mAngleX;
        }
        return mAngleX;
    }

    public float getYAngle() {
        switch (mDisplay.getRotation()) {
        case Surface.ROTATION_0: return -mAngleX;
        case Surface.ROTATION_90: return mAngleY;
        case Surface.ROTATION_180: return mAngleX;
        case Surface.ROTATION_270: return -mAngleY;
        }
        return mAngleY;
    }

    @Override
    public void onSensorChanged(SensorEvent event) {
        if (mLastTime != 0) {
            final float dT = (event.timestamp - mLastTime) * NS2S;
            mAngleX += event.values[0] * dT;
            mAngleY += event.values[1] * dT;
        }
        mLastTime = event.timestamp;
    }

    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {
    }

    private void reset() {
        mLastTime = 0;
        mAngleX = 0.0f;
        mAngleY = 0.0f;
    }

}

Somebody needs to start this GyroHelper and periodically call BorderItemView.onGyroChanged(GyroHelper.getXAngle(), GyroHelper.getYHelper()). That can be done right when onSensorChanged() is fired, but it is not a good idea since that can be too often, you might want to have your own timer controlling your frame rate, sensor updates can come 200 times in a second.

Finally, to see this code in action, you can have a look at the app itself, its free:

Google Play:


Direct link:
Download

It would be nice to get some comments and suggestions, let me know your thoughts!