Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Archived:Animated Bubbles with QPainter

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

This article shows how QPainter can be used to paint a scene rendered using OpenGL in a QGLWidget. Note that this example only runs on Windows Desktop.

Article Metadata
Code Example
Source file:
Tested with
Devices(s): Windows Desktop
Platform(s): Windows Desktop
Keywords: QPainter, QGLWidget
Created: somnathbanik (23 May 2011)
Last edited: hamishwillee (11 Oct 2012)



OpenGL is being integrated in QGLWidget widget. QGLWidget also behaves like other standard Qt widget which supports widget properties also. Usually, QGLWidget is subclassed to display a pure 3D scene. In this example we will create translucent 2D bubbles.


Project File (.pro)

Add opengl to the project file

QT += opengl

Class Definition

#ifndef BUBBLESQT_H 
#include <QMainWindow>
#include <QGLWidget>
#include <QtGui>
#include <QtOpenGL>
#include "bubble.h"
#include <QTimer>
class Bubble;
class QPaintEvent;
class QWidget;
namespace Ui {
class BubblesQt;
class BubblesQt : public QGLWidget
explicit BubblesQt(QWidget *parent = 0);
QSize sizeHint() const;
Ui::BubblesQt *ui;
void paintEvent(QPaintEvent *event);
void showEvent(QShowEvent *event);
void createBubbles(int number);
QList<Bubble*> bubbles;
QTimer animationTimer;
private slots:
void animate();
#endif // BUBBLESQT_H

The BubblesQt class inherits from QGLWidget. We reimplement the paintEvent() function to update the drawing area. showEvent() is used to initialise the 2D graphics used. The animate() slot is called periodically by the animationTimer to update the widget; the createBubbles() function initializes the bubbles.

Class Implementation

BubblesQt::BubblesQt(QWidget *parent) :
QGLWidget( parent)
connect(&animationTimer, SIGNAL(timeout()), this, SLOT(animate()));
setMinimumSize(200, 200);
setWindowTitle(tr("Animated Bubbles"));

In the constructor, a timer is initialize to control the animation. setAutoFillBackground() is set to false to instruct OpenGL not to paint a background for the widget.

    QPainter painter(this);
foreach (Bubble *bubble, bubbles) {
if (bubble->rect().intersects(event->rect()))

We construct a QPainter to paint the widget with 2D graphics; in this case, we will draw a number of translucent bubbles onto the widget. When QPainter::end() is called, suitable OpenGL-specific calls are made to write the scene, and its additional contents, onto the widget.

void BubblesQt::showEvent(QShowEvent *event)

showEvent() can be reimplemented in a subclass to receive widget show events which are passed in the event parameter.

void BubblesQt::animate()
QMutableListIterator<Bubble*> iter(bubbles);
while (iter.hasNext()) {
Bubble *bubble =;

The animate() slot is called every time the widget's animationTimer emits the timeout() signal. This keeps the bubbles moving around.We simply iterate over the bubbles in the bubbles list, updating the widget before and after each of them is moved.

void BubblesQt::createBubbles(int number)
for (int i = 0; i < number; ++i) {
QPointF position(width()*(0.1 + (0.8*qrand()/(RAND_MAX+1.0))),
height()*(0.1 + (0.8*qrand()/(RAND_MAX+1.0))));
qreal radius = qMin(width(), height())*(0.0125 + 0.0875*qrand()/(RAND_MAX+1.0));
QPointF velocity(width()*0.0125*(-0.5 + qrand()/(RAND_MAX+1.0)),
height()*0.0125*(-0.5 + qrand()/(RAND_MAX+1.0)));
bubbles.append(new Bubble(position, radius, velocity));

createBubbles() is used to create number of bubbles in the scene.

Source Code

The full source code presented in this article is available here:

Related Article

OpenGL with Qt

This page was last modified on 11 October 2012, at 01:13.
81 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.