This is not-so-technical presentation and main info about engine will come later as separate post.

What is parallax effect? There are some more complex definitions but i would define as simple as the following – you move your phone/device in space and some objects inside your application are shifting accordingly to compensate this movement. This allows to create some strong feeling of 3d interface as well as nice interaction effect.

As good example you can check out my live wallpaper (link on market), which is using this effect while rendering particle system of moving objects. More information about this application can be found here.

To create parallax effect we need to grab data from accelerometer sensor (as i found out gyroscope is not present at majority of phones while accelerometer gives enough of data to be happy with it), convert sensor data to relative rotation angles and shift some parts of application interface accordingly. 3 steps:

1. Get data from accelerometer

You can read here about usage of motion sensor inside android sdk. (I provide some code here for Android just as sample – approach should be same for iOS)

sensorManager = (SensorManager)context.getSystemService(Context.SENSOR_SERVICE);

gravitySensor = sensorManager.getDefaultSensor(Sensor.TYPE_GRAVITY);

sensorManager.registerListener(this, gravitySensor, SensorManager.SENSOR_DELAY_FASTEST);

As any measurement system sensor has noise and you can filter input data using one of signal filters such as low-pass filter – but the most simple way to do it is the following:

static double gravityFilterK = 0.8;

gravityVector[0] = gravityVector[0] * gravityFilterK + (1 – gravityFilterK) * x;

gravityVector[1] = gravityVector[1] * gravityFilterK + (1 – gravityFilterK) * y;

gravityVector[2] = gravityVector[2] * gravityFilterK + (1 – gravityFilterK) * z;

Filtering constant can depend on sensor frequency, but the tricky part is that you cant get frequency as some property and have to measure it directly. Speed can vary from device to device considerably from 7 Hz to 100Hz (source). I found that under 25Hz effect becomes less entertaining and should be disabled, unless you make prediction approximation and perform heavy smooth on input data.

2. Convert accelerometer data to rotation angles

Second task is to get device orientation angles from gravity vector. I use the following formula to get roll and pitch values (desired angles):

roll = atan2(gX, gZ) * 180/M_PI;

pitch = atan2(gY, sqrt(gX*gX + gZ*gZ)) * 180/M_PI;

Note that if device orientation was changed to landscape mode you need to swap roll and pitch values. Also atan2 function can produce 2pi jumps and we can just ignore such events. We dont need absolute angle values – only difference with previous device state (dgX, dgY):

// normalize gravity vector at first

double gSum = sqrt(gX*gX + gY*gY + gZ*gZ);

if (gSum != 0)

{

    gX /= gSum;

    gY /= gSum;

    gZ /= gSum;

}

if (gZ != 0)

    roll = atan2(gX, gZ) * 180/M_PI;

pitch = sqrt(gX*gX + gZ*gZ);

if (pitch != 0)

    pitch = atan2(gY, pitch) * 180/M_PI;

dgX = (roll – lastGravity[0]);

dgY = (pitch – lastGravity[1]);

// if device orientation is close to vertical – rotation around x is almost undefined – skip!

if (gY > 0.99) dgX = 0;

// if rotation was too intensive – more than 180 degrees – skip it

if (dgX > 180) dgX = 0;

if (dgX < -180) dgX = 0;

if (dgY > 180) dgY = 0;

if (dgY < -180) dgY = 0;

if (!screen->isPortrait())

{

    // Its landscape mode – swap dgX and dgY

    double temp = dgY;

    dgY = dgX;    

    dgX = temp;

}

lastGravity[0] = roll;

lastGravity[1] = pitch;

So we have angle shifts inside dgX, dgY variables and can proceed to final step.

3. Perform interface shift 

And as final step we need to shift some elements inside application to compensate device rotation. In my case that was particle system – for each particle we perform x/y shift proportionally current particle depth (if it’s 3d environment you can also perform some rotations to make ideal compensation) .

// Parallax effect – if gravity vector was changed we shift particles

if ((dgX != 0) || (dgY != 0))

{

    p->x += dgX * (1. + 10. * p->z);

    p->y -= dgY * (1. + 10. * p->z);

}

Only practice can help to find optimal coefficients for such shifts which are different for every application. You can shift background details or foreground decorations.

Couple of small details: sensor events and rendering should be done in separate threads. And when device goes to sleep you should unregister sensor listener (and so dont waste battery).

Any feedback is welcome in comments.

It can be found by name ‘Alive numbers 2’ or here: https://play.google.com/store/apps/details?id=com.calibvr.minimal

This topic contains screens and details…

Live wallpaper contains several animations. Default background animation is particle system of flying numbers with tricky blur algorithm. All particles are rendered in single pass. This gives only 3% cpu load under Samsung Galaxy Note 2. Wallpaper do not consume battery resources when is not visible – so power loss is not an issue. Count of particles, speed, color, fade options, desaturation can be adjusted in options.

Particle system is also coupled with Parallax effect based on accelerometer sensor. Intensity of this effect can be adjusted at animation options (or be completely disabled). You can watch the following video to see how the effect looks like:

Application is powered by my cross-platform engine based on OpenGl ES 2.0. Advantages that comes with it are theme of big separate topic but here are several the most handy:

You can switch interface language at any time from options and this does not correlate with device locale settings.

If details or text are too small you can set global screen scale as you like it (at engine options). Everything will become bigger or smaller as you like it.

You can enjoy rich custom controls which make options easy to handle:

You can change the values and see the results immediately through the transparent layer.

Live wallpaper has the list of widgets you can customize – and more are planned in future. Custom clock, battery indicator, current date indicator, current day of week, weather data based on current gps position with hourly/daily forecast, currency exchange rates based on ECB data, etc…

Each widget has several styles and options. Screen layout can be adjusted very fast. Widgets can be positioned on the screen using drag-drop method – so you can customize your layout as you like:

Clicking on widgets launches default applications from system – like calendar, clock, battery consumption info, etc. This behaviour can be disabled in options ( for every widget separately ).

From options you can switch base background animation.

Example of settings with sweet hearts animation:

Animation which is very similar to iOS7 alive wallpaper:

Video of customization process:

Some five-stars-responses from market:

Great app I absolutely love it. Made my home screen a lot less cluttered and uniform.

Incredibly neat and beautiful!!! I love this live wallpaper, love the fact that it comes with in built widget, 5 stars straight!!

Excellent New parralax effect is great.

My Kind Of Wallpaper Alive numbers was my default wallpaper for the last 6 mos. This one, the newer version is so much better. Configuration is a breeze. Keep up the good work!

INSTALL

The wallpaper can be found by name ‘Alive numbers 2‘ or here: https://play.google.com/store/apps/details?id=com.calibvr.minimal

LOCALIZATION

I created special tool for online localization available here: http://vitiy.info/localization/alivenumbers2/

There you can make Alive Numbers 2 to support your native language. The list of languages – Bulgarian, Danish, German, Spanish, Finnish, Franch, Croatian, Hungarian, Indonesian, Italian, Lithuanian, Latvian, Norwegian, Dutch, Polish, Portuguese, Romanian, Russian, Slovak, Slovenian, Serbian, Swedish, Turkish, Ukrainian, Vietnamese.

Please note – localization tool is in beta state – please contact me in case of any errors, bugs, etc.

Alive numbers 2 Promo 2

UPDATES

Next section contains information about updates and should be updated when new versions will come at market. Main upper text will be fixed to reflect changes, but lower part can contain additional images and details.

UPDATE (v.2.005):

Clicking on widgets launches default applications from system – like calendar, clock, battery consumption info, etc. Weather widget now has weekly/hourly forecast.

UPDATE (v.2.007)

Brand new Parallax effect using accelerometer for inner particle system.

UPDATE (v.2.008)

New widget: Currency Rates. Exchange reference rates from official European Central Bank feed (daily updated). You can select your local currency as the base and monitor the list of rates (up to 28 items).

UPDATE (v.2.009)

Two new animations for background – snowflakes and sweet hearts. New global widget settings section was added. You can set default font for widgets. Clock has separate option for font.

UPDATE (v2.010)

Some urgent fix for weather provider

UPDATE (v2.011)

New animation background was added – circles. Its very similar to iOS7 live wallpaper.

New clock styles for clock widget were added and old styles were improved a bit. PM/AM label was added for 12h format clock.

Tower style (one on one) :

Clock style as minimal text:

Weather widget now has manual refresh button located on forecast panel. Also location now is displayed as city name – not local area of city (there is new option for that).

UPDATE (v2.013)

– spanish localization

– new background animation called “Lasers”

– clock widget now shows current alarm (can be disabled in properties)

– new hi-res xxhdpi icon

– when you switch animation particles are filled instantly

UPDATE (v2.014)

– new stripes animation
– support for ART runtime (Android 4.4)
– fix for clock widget dragging
– minor fixes for parallax effect
– fix of widget dragging bug on high dpi devices
– fps limit was increased for more smooth animation

Screenshot of new STRIPES animation:

UPDATE (v2.015)

New animation for St.Valentine day – FLOWERS:

– New localization – Swedish (thanks to Marcus Sundman)

– New more high-res fonts and 2 new fonts for widgets

– New performance settings

UPDATE (v2.016)

– Support for german and polish languages

UPDATE (v2.017)

+ New animation – COFFEE
+ Currency widget now supports a lot more currencies
+ GPS sensor fixes and new location provider for weather widget
+ Support for timely as custom app for clock widget

UPDATE (v2.018)

+ New option for weather widget – disable GPS data sensor for location (to preserve battery)

+ Minor fixes for GPS implementation

UPDATE (v2.019)

+ NEW ANIMATION: Contains new long-awaited animation – custom user image (which you can pick from device gallery) combined with parallax and blur effects

UPDATE (v2.020-2.021)

+ fixes for weather widget

+ FR language support

Any suggestions are welcome at comments. 

Current implementation of WebGL is using GL ES 2.0 – the same as all mordern android / iOS phones/tablets. So i decided to test if i can use these shaders at mobile applications – and tested their performance on Sumsung Galaxy Note II. Of course i tested only relatively simple shaders expecting them to run slow…

The results were quite disappointing to me. Only very very simple shaders were working fine. More complex shaders (which were the point of interest) were running at 1 fps or less. Looks like even such modern phone as Note II has no driver optimization for such shaders and even more – some shaders became corrupted – see next picture:

So today unfortunately we cant use such shaders at mobile production. But i hope situation will change in future.

UPD (28.12.20013): I performed some tests on Google Nexus 5 phone and got slightly more positive results. Not trivial (but not so complex) shaders began to work – not so smooth as it should be but fps is above 20. I even added 2 example experimental effects to Alive numbers 2 alive wallpaper on Android (they are visible in elite mode as bonus experimental content). Under Samsung Note 2 these animations do not work at all, but under Nexus 5 they run more or less.

Later i will perform some test on new IPad mini with retina screen. May be it will show even better results. I expect tablets to show better results.

Android live wallpaper is not a general Activity application – it is special WallpaperService. And you cant implement it in pure C++ using NativeActivity. All my core is cross-platform C++ so i implemented two-way communication between C++ and JAVA. From C++ NativeActivity you can call JAVA classes through JNI and from java service you can call native (c++) methods of engine core.

The tricky part that all this communication involves a lot of different threads. Wallpaper service has its own thread, but rendering should be performed in another one. My native C++ core is launched as third thread and spawns other async threads which could call some java methods. But i got through all this nightmare using mutexed queues of events. As result i got full functionality of my engine at the background of android launcher.

When i only started working with android i wrote small live wallpaper in pure java (with no OpenGL). Wasted only couple of evenings and even lost the source code. But recently i was surprised when discovered that it has more than 100.000 downloads (https://play.google.com/store/apps/details?id=back.livenumbers). It does not even work properly on my Note 2 now.

But the point is that now i have smooth OpenGl ES 2.0 animations/effects in couple with engine functionality. Probably, i will create couple of stylish backs fused with some in-code widgets (like battery indicator, weather forecast, clock, calendar date or something else) as implementation will be relatively easy now using my engine. Any suggestions on this matter are welcome.

Давно я не писал в блог – но есть хороший повод! Чтобы качественно поздравить всех с новым годом, я написал новогодний скринсейвер-открытку (QT OpenGl). Для запуска необходима не древняя видеокарта и монитор побольше. Happy new year 2012!

Скачать ~4Mb