Special F/X with Graphics View
                                 09/25/09
Ariya Hidayat
About Myself




   Open-source Developer




                   Ph.D in EE




                                2
Agenda

Four Dot Five
     – What you can do already
Four Dot Six
     – What you can (ab)use soon




                   ...
Goals


Provoke ideas!
Incite passion!
Engage creativity!




                     4
A Word of Caution
   With great power must come great responsibility.




                                                ...
Spread the Love

        All examples are available from...




             labs.qt.nokia.com
            bit.ly/graphics...
Qt 4.5


         7
Gradients
Transformation
Animation, Kinetic Scrolling
Composition Modes




                               8
Linear Gradient




                  9
Radial Gradient




                  10
Gradients: Quick Recipe

Applies to: QAbstractGraphicsShapeItem
  QGraphicsEllipseItem, QGraphicsPathItem,
  QGraphicsPoly...
Linear Gradient: The Code

QPoint start(0, 0);
QPoint end(0, 20);

QLinearGradient g(start, end);
g.setColorAt(0, Qt::whit...
Radial Gradient: The Code

QRadialGradient gr(100, 100, 100, 60, 60);
gr.setColorAt(0.0, QColor(255, 255, 255, 191));
gr.s...
Shadow with Gradients




                        magnifier




                                    14
Shadow: The Code
QRadialGradient g;
g.setCenter(radius, radius);
g.setFocalPoint(radius, radius);
g.setRadius(radius);
g.s...
Translucent Reflection




                         16
Flip Vertically




             QImage::mirrored()



                                  17
More Natural Look




       Linear gradient, on the alpha channel



                                               18
Reflection: The Code
QPoint start(0, 0);
QPoint end(0, img.height());
QLinearGradient gradient(start, end);
gradient.setCo...
Opacity




          QPainter::setOpacity(...)



                                      20
Transformation



           Scaling   Rotation   Perspective




                                              21
Rotation

           transform.rotate(30, Qt::ZAxis)




                                             22
Perspective Transformation: The Recipe



transform.rotate
(60, Qt::XAxis)




                   transform.rotate(60, Qt:...
Reflection & Transformation




                              24
Timeline-based Animation




                              deacceleration




               acceleration

               ...
Linear Motion vs Non-linear Motion


      Linear    EaseInOut
                                       deacceleration




 ...
Flick List (or Kinetic Scrolling)




                                    27
Using FlickCharm

QGraphicsView canvas;

FlickCharm charm;
charm.activateOn(&canvas);




                             28
Flick Charm & Event Filtering

                                             Mouse move
 Mouse press            Pressed

  ...
Parallax Effect




                  30
Composition Modes




                    31
Colorize (or Tint Effect)




                            32
Grayscale Conversion




int pixels = img.width() * img.height();
unsigned int *data = (unsigned int *)img.bits();
for (in...
Overlay with Color




QPainter painter(&resultImage);
painter.drawImage(0, 0, grayscaled(image));
painter.setCompositionM...
Glow Effect




              35
Night Mode




             36
Night Mode with Color Inversion

QPainter p(this);
p.setCompositionMode
  (QPainter::CompositionMode_Difference);
p.fillRe...
A Friendly Advice: Fast Prototyping


  – avoid long edit-compile-debug cycle
  – use JavaScript, e.g. with Qt Script
  – ...
Qt 4.6


         39
Animation Framework
State Machine
Graphics Effects




                      40
Animation Framework




                      41
What People Want


 – (soft) drop shadow
 – blur
 – colorize
 – some other random stuff




                             42
Graphics F/X

  QGraphicsEffect

  QGraphicsColorizeEffect
  QGraphicsGrayscaleEffect
  QGraphicsPixelizeEffect
  QGraphic...
Challenges


 – software vs hardware
 – good API




                          44
Software vs Hardware


  – software implementation
     • consistent and reliable
     • easy to test
     • cumbersome, (...
API
      One API to rule them all, ...




                                      46
Simple API


  – Effect is a QObject
     • might have property, e.g. Color
     • property change emits a signal
     • c...
As Simple As...

QGraphicsGrayscaleEffect *effect;
effect = new QGraphicsGrayscaleEffect;
item->setGraphicsEffect(effect);...
Grayscale Effect




                   49
Grayscale Effect with Strength=0.8




                                     50
Colorize Effect




                  51
Colorize Effect with Strength=0.8




                                    52
Pixelize Effect




                  53
Blur Effect




              54
Drop Shadow Effect




                     55
Lighting Example




                   56
Blur Picker Example



                      blurry




             sharp


                               57
Fade Message Example




          Something will happen
                                  58
Scale Effect




               59
Scale Effect Implementation
void draw(QPainter *painter,
          QGraphicsEffectSource *source) {

    QPixmap pixmap;
 ...
Night Mode Effect




                    61
Night Mode Effect Implementation

void draw(QPainter *painter,
          QGraphicsEffectSource *source) {

    QPixmap pix...
Frame Effect




               63
Extending the Bounding Box

QRectF boundingRectFor(const QRectF &rect) const {
  return rect.adjusted(-5, -5, 5, 5);
}



...
Frame Effect Implementation

void draw(QPainter *painter,
          QGraphicsEffectSource *source) {

    QPixmap pixmap;
...
Reflection Effect




                    66
Enlarging the Bounding Box (Again)

QRectF boundingRectFor(const QRectF &rect) const {
  return rect.adjusted(0, 0, 0, rec...
Reflection Effect Implementation

void draw(QPainter *painter,
          QGraphicsEffectSource *source) {

    QPixmap pix...
Qt 4.7?
Future?
          69
Declarative UI




                 70
Further Directions


  – Optimization!
  – Composite effects
  – Geometry deformation
  – Morphing
  – More physics: force...
Genie Effect




               72
Deformation




              73
Underwater Effect




                    74
That's all, folks...




        Thank You!


                       75
Bleeding-Edge




           labs.qt.nokia.com
           bit.ly/graphicsdojo




                                 76
Upcoming SlideShare
Loading in...5
×

Special Effects with Qt Graphics View

45,750

Published on

Graphics View becomes one of the prominent features of Qt these days, it also serves as the backbone for next-generation user-interface developments. This talk highlights several tips and tricks which you can employ to beautify your Graphics View-based application, in order to have much more exciting and interesting user interactions. In addition, a new addition in Qt 4.6, namely the graphics effect feature, will be introduced and demonstrated.

Presentation by Ariya Hidayat held during Qt Developer Days 2009.

http://qt.nokia.com/developer/learning/elearning

Published in: Technology, Business
3 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total Views
45,750
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
690
Comments
3
Likes
20
Embeds 0
No embeds

No notes for slide

Special Effects with Qt Graphics View

  1. 1. Special F/X with Graphics View 09/25/09 Ariya Hidayat
  2. 2. About Myself Open-source Developer Ph.D in EE 2
  3. 3. Agenda Four Dot Five – What you can do already Four Dot Six – What you can (ab)use soon 3
  4. 4. Goals Provoke ideas! Incite passion! Engage creativity! 4
  5. 5. A Word of Caution With great power must come great responsibility. 5
  6. 6. Spread the Love All examples are available from... labs.qt.nokia.com bit.ly/graphicsdojo 6
  7. 7. Qt 4.5 7
  8. 8. Gradients Transformation Animation, Kinetic Scrolling Composition Modes 8
  9. 9. Linear Gradient 9
  10. 10. Radial Gradient 10
  11. 11. Gradients: Quick Recipe Applies to: QAbstractGraphicsShapeItem QGraphicsEllipseItem, QGraphicsPathItem, QGraphicsPolygonItem, QGraphicsRectItem or your own subclass(es). Classes to use: – QLinearGradient – QRadialGradient – QConicalGradient 11
  12. 12. Linear Gradient: The Code QPoint start(0, 0); QPoint end(0, 20); QLinearGradient g(start, end); g.setColorAt(0, Qt::white); g.setColorAt(1, Qt::black); item->setBrush(g); 12
  13. 13. Radial Gradient: The Code QRadialGradient gr(100, 100, 100, 60, 60); gr.setColorAt(0.0, QColor(255, 255, 255, 191)); gr.setColorAt(0.2, QColor(255, 255, 127, 191)); gr.setColorAt(0.9, QColor(150, 150, 200, 63)); p.setBrush(gr); p.drawEllipse(0, 0, 200, 200); 13
  14. 14. Shadow with Gradients magnifier 14
  15. 15. Shadow: The Code QRadialGradient g; g.setCenter(radius, radius); g.setFocalPoint(radius, radius); g.setRadius(radius); g.setColorAt(1.0, QColor(255, 255, 255, 0)); g.setColorAt(0.5, QColor(128, 128, 128, 255)); QPainter mask(&maskPixmap); mask.setCompositionMode (QPainter::CompositionMode_Source); mask.setBrush(g); mask.drawRect(maskPixmap.rect()); mask.setBrush(QColor(Qt::transparent)); mask.drawEllipse(g.center(), radius-15, radius-15); mask.end(); 15
  16. 16. Translucent Reflection 16
  17. 17. Flip Vertically QImage::mirrored() 17
  18. 18. More Natural Look Linear gradient, on the alpha channel 18
  19. 19. Reflection: The Code QPoint start(0, 0); QPoint end(0, img.height()); QLinearGradient gradient(start, end); gradient.setColorAt(0.5, Qt::black); gradient.setColorAt(0, Qt::white); QImage mask = img; QPainter painter(&mask); painter.fillRect(img.rect(), gradient); painter.end(); QImage reflection = img.mirrored(); reflection.setAlphaChannel(mask); 19
  20. 20. Opacity QPainter::setOpacity(...) 20
  21. 21. Transformation Scaling Rotation Perspective 21
  22. 22. Rotation transform.rotate(30, Qt::ZAxis) 22
  23. 23. Perspective Transformation: The Recipe transform.rotate (60, Qt::XAxis) transform.rotate(60, Qt::YAxis) 23
  24. 24. Reflection & Transformation 24
  25. 25. Timeline-based Animation deacceleration acceleration 25
  26. 26. Linear Motion vs Non-linear Motion Linear EaseInOut deacceleration acceleration 26
  27. 27. Flick List (or Kinetic Scrolling) 27
  28. 28. Using FlickCharm QGraphicsView canvas; FlickCharm charm; charm.activateOn(&canvas); 28
  29. 29. Flick Charm & Event Filtering Mouse move Mouse press Pressed Manual Scroll Mouse release Steady Mouse release Mouse move Auto Scroll Mouse press Stop Timer tick 29
  30. 30. Parallax Effect 30
  31. 31. Composition Modes 31
  32. 32. Colorize (or Tint Effect) 32
  33. 33. Grayscale Conversion int pixels = img.width() * img.height(); unsigned int *data = (unsigned int *)img.bits(); for (int i = 0; i < pixels; ++i) { int val = qGray(data[i]); data[i] = qRgb(val, val, val); } 33
  34. 34. Overlay with Color QPainter painter(&resultImage); painter.drawImage(0, 0, grayscaled(image)); painter.setCompositionMode (QPainter::CompositionMode_Overlay); painter.fillRect(resultImage.rect(), color); painter.end(); 34
  35. 35. Glow Effect 35
  36. 36. Night Mode 36
  37. 37. Night Mode with Color Inversion QPainter p(this); p.setCompositionMode (QPainter::CompositionMode_Difference); p.fillRect(event->rect(), Qt::white); p.end(); red = 255 – red green = 255 – green blue = 255 - blue 37
  38. 38. A Friendly Advice: Fast Prototyping – avoid long edit-compile-debug cycle – use JavaScript, e.g. with Qt Script – use Python, e.g. with PyQt or PySide – use <insert your favorite dynamic language> 38
  39. 39. Qt 4.6 39
  40. 40. Animation Framework State Machine Graphics Effects 40
  41. 41. Animation Framework 41
  42. 42. What People Want – (soft) drop shadow – blur – colorize – some other random stuff 42
  43. 43. Graphics F/X QGraphicsEffect QGraphicsColorizeEffect QGraphicsGrayscaleEffect QGraphicsPixelizeEffect QGraphicsBlurEffect QGraphicsDropShadowEffect QGraphicsOpacityEffect 43
  44. 44. Challenges – software vs hardware – good API 44
  45. 45. Software vs Hardware – software implementation • consistent and reliable • easy to test • cumbersome, (dog)slow – hardware acceleration • blazing fast • custom effects are easy • silicon/driver dependent 45
  46. 46. API One API to rule them all, ... 46
  47. 47. Simple API – Effect is a QObject • might have property, e.g. Color • property change emits a signal • can be animated easily – Effect applies to QGraphicsItem & QWidget – Custom effect? Subclass QGraphicsEffect 47
  48. 48. As Simple As... QGraphicsGrayscaleEffect *effect; effect = new QGraphicsGrayscaleEffect; item->setGraphicsEffect(effect); Effect is applied to the item and its children! 48
  49. 49. Grayscale Effect 49
  50. 50. Grayscale Effect with Strength=0.8 50
  51. 51. Colorize Effect 51
  52. 52. Colorize Effect with Strength=0.8 52
  53. 53. Pixelize Effect 53
  54. 54. Blur Effect 54
  55. 55. Drop Shadow Effect 55
  56. 56. Lighting Example 56
  57. 57. Blur Picker Example blurry sharp 57
  58. 58. Fade Message Example Something will happen 58
  59. 59. Scale Effect 59
  60. 60. Scale Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); painter->save(); painter->setBrush(Qt::NoBrush); painter->setPen(Qt::red); painter->drawRect(pixmap.rect()); painter->scale(0.5, 0.5); painter->translate(pixmap.rect().bottomRight()/2); painter->drawPixmap(0, 0, pixmap); painter->restore(); } 60
  61. 61. Night Mode Effect 61
  62. 62. Night Mode Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); QPainter p(&pixmap); p.setCompositionMode (QPainter::CompositionMode_Difference); p.fillRect(pixmap.rect(), Qt::white); p.end(); painter->drawPixmap(0, 0, pixmap); } 62
  63. 63. Frame Effect 63
  64. 64. Extending the Bounding Box QRectF boundingRectFor(const QRectF &rect) const { return rect.adjusted(-5, -5, 5, 5); } item bounding box “effective” bounding box 64
  65. 65. Frame Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); QRectF bound = boundingRectFor(pixmap.rect()); painter->save(); painter->setPen(Qt::NoPen); painter->setBrush(Qt::green); painter->drawRoundedRect(bound, 15, 15); painter->drawPixmap(0, 0, pixmap); painter->restore(); } 65
  66. 66. Reflection Effect 66
  67. 67. Enlarging the Bounding Box (Again) QRectF boundingRectFor(const QRectF &rect) const { return rect.adjusted(0, 0, 0, rect.height()); } item bounding box “effective” bounding box 67
  68. 68. Reflection Effect Implementation void draw(QPainter *painter, QGraphicsEffectSource *source) { QPixmap pixmap; pixmap = source->pixmap(Qt::DeviceCoordinates); painter->save(); painter->drawPixmap(0, 0, pixmap); painter->setOpacity(0.2); painter->scale(1, -1); painter->translate(0, -pixmap.height()); painter->drawPixmap(0, 0, pixmap); painter->restore(); } 68
  69. 69. Qt 4.7? Future? 69
  70. 70. Declarative UI 70
  71. 71. Further Directions – Optimization! – Composite effects – Geometry deformation – Morphing – More physics: force, gravity, ... – Bitmap vs vector 71
  72. 72. Genie Effect 72
  73. 73. Deformation 73
  74. 74. Underwater Effect 74
  75. 75. That's all, folks... Thank You! 75
  76. 76. Bleeding-Edge labs.qt.nokia.com bit.ly/graphicsdojo 76
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×