![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](https://image.slidesharecdn.com/dd9specialfx-091201053152-phpapp01/85/Special-Effects-with-Qt-Graphics-View-33-320.jpg)
Special Effects with Qt Graphics View
- 1. Special F/X with Graphics View 09/25/09 Ariya Hidayat
- 2. About Myself Open-source Developer Ph.D in EE 2
- 3. Agenda Four Dot Five – What you can do already Four Dot Six – What you can (ab)use soon 3
- 4. Goals Provoke ideas! Incite passion! Engage creativity! 4
- 5. A Word of Caution With great power must come great responsibility. 5
- 6. Spread the Love All examples are available from... labs.qt.nokia.com bit.ly/graphicsdojo 6
- 7. Qt 4.5 7
- 9. Linear Gradient 9
- 10. Radial Gradient 10
- 11. Gradients: Quick Recipe Applies to: QAbstractGraphicsShapeItem QGraphicsEllipseItem, QGraphicsPathItem, QGraphicsPolygonItem, QGraphicsRectItem or your own subclass(es). Classes to use: – QLinearGradient – QRadialGradient – QConicalGradient 11
- 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. 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. Shadow with Gradients magnifier 14
- 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. Translucent Reflection 16
- 17. Flip Vertically QImage::mirrored() 17
- 18. More Natural Look Linear gradient, on the alpha channel 18
- 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. Opacity QPainter::setOpacity(...) 20
- 21. Transformation Scaling Rotation Perspective 21
- 22. Rotation transform.rotate(30, Qt::ZAxis) 22
- 23. Perspective Transformation: The Recipe transform.rotate (60, Qt::XAxis) transform.rotate(60, Qt::YAxis) 23
- 24. Reflection & Transformation 24
- 25. Timeline-based Animation deacceleration acceleration 25
- 26. Linear Motion vs Non-linear Motion Linear EaseInOut deacceleration acceleration 26
- 27. Flick List (or Kinetic Scrolling) 27
- 28. Using FlickCharm QGraphicsView canvas; FlickCharm charm; charm.activateOn(&canvas); 28
- 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. Parallax Effect 30
- 31. Composition Modes 31
- 32. Colorize (or Tint Effect) 32
- 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. 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. Glow Effect 35
- 36. Night Mode 36
- 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. 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. Qt 4.6 39
- 40. Animation Framework State Machine Graphics Effects 40
- 41. Animation Framework 41
- 42. What People Want – (soft) drop shadow – blur – colorize – some other random stuff 42
- 43. Graphics F/X QGraphicsEffect QGraphicsColorizeEffect QGraphicsGrayscaleEffect QGraphicsPixelizeEffect QGraphicsBlurEffect QGraphicsDropShadowEffect QGraphicsOpacityEffect 43
- 44. Challenges – software vs hardware – good API 44
- 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. API One API to rule them all, ... 46
- 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. As Simple As... QGraphicsGrayscaleEffect *effect; effect = new QGraphicsGrayscaleEffect; item->setGraphicsEffect(effect); Effect is applied to the item and its children! 48
- 49. Grayscale Effect 49
- 50. Grayscale Effect with Strength=0.8 50
- 51. Colorize Effect 51
- 52. Colorize Effect with Strength=0.8 52
- 53. Pixelize Effect 53
- 54. Blur Effect 54
- 55. Drop Shadow Effect 55
- 56. Lighting Example 56
- 57. Blur Picker Example blurry sharp 57
- 58. Fade Message Example Something will happen 58
- 59. Scale Effect 59
- 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. Night Mode Effect 61
- 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. Frame Effect 63
- 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. 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. Reflection Effect 66
- 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. 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. Qt 4.7? Future? 69
- 70. Declarative UI 70
- 71. Further Directions – Optimization! – Composite effects – Geometry deformation – Morphing – More physics: force, gravity, ... – Bitmap vs vector 71
- 72. Genie Effect 72
- 73. Deformation 73
- 74. Underwater Effect 74
- 75. That's all, folks... Thank You! 75
- 76. Bleeding-Edge labs.qt.nokia.com bit.ly/graphicsdojo 76