diff options
author | Alan Alpert <alan.alpert@nokia.com> | 2011-06-08 13:19:56 +1000 |
---|---|---|
committer | Alan Alpert <alan.alpert@nokia.com> | 2011-06-08 13:28:21 +1000 |
commit | 1f88f2ceedf00f96e2491ecdd1c655b0f12f3632 (patch) | |
tree | 1900da1a3793da99f9601762d337cf82dc4701ce /demos/declarative/flickr/content/ImageDetails.qml | |
parent | 984f21f18d1a3981e7363df467ff2e24e69aa847 (diff) |
Immense Particles Refactor Part C
Demos work again (also, the examples I missed).
Added an example launcher for particles.
Diffstat (limited to 'demos/declarative/flickr/content/ImageDetails.qml')
-rw-r--r-- | demos/declarative/flickr/content/ImageDetails.qml | 182 |
1 files changed, 131 insertions, 51 deletions
diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/content/ImageDetails.qml index 62c3397f08..46827ae3bb 100644 --- a/demos/declarative/flickr/content/ImageDetails.qml +++ b/demos/declarative/flickr/content/ImageDetails.qml @@ -40,7 +40,7 @@ ****************************************************************************/ import QtQuick 2.0 -import Qt.labs.particles 2.0 +import QtQuick.Particles 2.0 Flipable { id: container @@ -57,6 +57,8 @@ Flipable { property int rating: 2 property variant prevScale: 1.0 + property int flipDuration: 1600 + signal closed transform: Rotation { @@ -137,94 +139,172 @@ Flipable { slider.value = prevScale; } if (inBackState && bigImage.status == Image.Ready) - particleBox.imageInAnim(); + effectBox.imageInAnim(); } property bool inBackState: false onInBackStateChanged:{ if(inBackState && bigImage.status == Image.Ready) - particleBox.imageInAnim(); + effectBox.imageInAnim(); else if (!inBackState && bigImage.status == Image.Ready) - particleBox.imageOutAnim(); + effectBox.imageOutAnim(); } } + ShaderEffectSource{ + id: pictureSource + sourceItem: bigImage + smooth: true + //Workaround: Doesn't work below lines + width: bigImage.width + height: bigImage.width + visible: false + } + Turbulence{//only fill visible rect + id: turbulence + system: imageSystem + anchors.fill: parent + frequency: 100 + strength: 250 + active: false + } Item{ - id: particleBox + id: effectBox width: bigImage.width * bigImage.scale height: bigImage.height * bigImage.scale anchors.centerIn: parent - function imageInAnim(){ - cp.visible = true; - pixAffect.onceOff = false; bigImage.visible = false; + noiseIn.visible = true; endEffectTimer.start(); - pixelEmitter.pulse(1); } function imageOutAnim(){ - cp.visible = true; - pixAffect.onceOff = true; bigImage.visible = false; + noiseIn.visible = false; turbulence.active = true; endEffectTimer.start(); pixelEmitter.burst(2048); } Timer{ id: endEffectTimer - interval: 1000 + interval: flipDuration repeat: false running: false onTriggered:{ - bigImage.visible = true; turbulence.active = false; - cp.visible = false; + noiseIn.visible = false; + bigImage.visible = true; } } - ParticleSystem{ - id: imageSystem - } - ColoredParticle{ - id: cp - system: imageSystem - color: "gray" - alpha: 1 - image: "images/squareParticle.png" - colorVariation: 0 - } - Picture{ - id: pixAffect - system: imageSystem + ShaderEffectItem{ + id: noiseIn anchors.fill: parent - image: container.photoUrl; - onceOff: true - } - Turbulence{ - id: turbulence - system: imageSystem - anchors.fill: parent - frequency: 100 - strength: 250 - active: false + property real t: 0 + visible: false + onVisibleChanged: tAnim.start() + NumberAnimation{ + id: tAnim + target: noiseIn + property: "t" + from: 0.0 + to: 1.0 + duration: flipDuration + } + property variant source: pictureSource + property variant noise: ShaderEffectSource{ + sourceItem:Image{ + source: "images/noise.png" + } + hideSource: true + smooth: false + } + fragmentShader:" + uniform sampler2D noise; + uniform sampler2D source; + uniform highp float t; + uniform lowp float qt_Opacity; + varying highp vec2 qt_TexCoord0; + void main(){ + //Want to use noise2, but it always returns (0,0)? + if(texture2D(noise, qt_TexCoord0).w <= t) + gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity; + else + gl_FragColor = vec4(0.,0.,0.,0.); + } + " } - TrailEmitter{ - id: pixelEmitter0 - system: imageSystem - height: parent.height - particleSize: 4 - particleDuration: 1000 - particlesPerSecond: 4096 - speed: PointVector{x: 360; xVariation: 8; yVariation: 4} - emitting: false + ParticleSystem{ + id: imageSystem } - TrailEmitter{ + Emitter{ id: pixelEmitter system: imageSystem - anchors.fill: parent + //anchors.fill: parent + width: Math.min(bigImage.width * bigImage.scale, flickable.width); + height: Math.min(bigImage.height * bigImage.scale, flickable.height); + anchors.centerIn: parent particleSize: 4 - particleDuration: 1000 + particleDuration: flipDuration particlesPerSecond: 2048 emitting: false } + CustomParticle{ + id: blowOut + system: imageSystem + property real maxWidth: effectBox.width + property real maxHeight: effectBox.height + vertexShader:" + attribute highp vec2 vPos; + attribute highp vec2 vTex; + attribute highp vec4 vData; // x = time, y = lifeSpan, z = size, w = endSize + attribute highp vec4 vVec; // x,y = constant speed, z,w = acceleration + attribute highp float r; + + uniform highp float maxWidth; + uniform highp float maxHeight; + + uniform highp mat4 qt_ModelViewProjectionMatrix; + uniform highp float timestamp; + uniform lowp float qt_Opacity; + + varying highp vec2 fTex2; + varying lowp float fFade; + + void main() { + fTex2 = vec2(vPos.x / maxWidth, vPos.y / maxHeight); + highp float size = vData.z; + highp float endSize = vData.w; + + highp float t = (timestamp - vData.x) / vData.y; + + highp float currentSize = mix(size, endSize, t * t); + + if (t < 0. || t > 1.) + currentSize = 0.; + + highp vec2 pos = vPos + - currentSize / 2. + currentSize * vTex // adjust size + + vVec.xy * t * vData.y // apply speed vector.. + + 0.5 * vVec.zw * pow(t * vData.y, 2.); + + gl_Position = qt_ModelViewProjectionMatrix * vec4(pos.x, pos.y, 0, 1); + + highp float fadeIn = min(t * 10., 1.); + highp float fadeOut = 1. - max(0., min((t - 0.75) * 4., 1.)); + + fFade = 1.0;//fadeIn * fadeOut * qt_Opacity; + } + " + property variant pictureTexture: pictureSource + fragmentShader: " + uniform sampler2D pictureTexture; + varying highp vec2 fTex2; + varying highp float fFade; + void main() { + gl_FragColor = texture2D(pictureTexture, fTex2) * fFade; + }" + } + + } } @@ -268,7 +348,7 @@ Flipable { transitions: Transition { SequentialAnimation { PropertyAction { target: bigImage; property: "smooth"; value: false } - NumberAnimation { easing.type: Easing.InOutQuad; properties: "angle"; duration: 1000 } + NumberAnimation { easing.type: Easing.InOutQuad; properties: "angle"; duration: flipDuration } PropertyAction { target: bigImage; property: "smooth"; value: !flickable.movingVertically } } } |