Cube-like animation

task_struct

Hello,

Im trying to create a effect that simulates cube rotation. Ive tried with transformation "Rotation":http://doc.qt.nokia.com/4.7-snapshot/qml-rotation.html but it`s not possible to set origin.z, so I copied "QGraphicsRotation":http://doc.qt.nokia.com/4.7-snapshot/qgraphicsrotation.html and modified

@
void CubeRotation::applyTo(QMatrix4x4 *matrix) const
{
if (m_angle == 0. || m_axis.isNull())
return;

matrix->translate(m_origin);
matrix->rotate(m_angle, m_axis.x(), m_axis.y(), m_axis.z()); // in QGraphicsRotation this line is matrix->projectedRotate(m_angle, m_axis.x(), m_axis.y(), m_axis.z())
matrix->translate(-m_origin);

}
@

because as far as I understand projectedRotate() removes z translation.

In QML:

@
transform: CubeRotation {
angle: 0

            origin.x: grid_view1.width / 2.0
            origin.y: grid_view1.height / 2.0
            origin.z: grid_view1.width / 2.0

            axis { x: 0; y: 1; z: 0 }

            NumberAnimation on angle {
                duration: 5000
                loops: Animation.Infinite
                from: -90
                to: 90
            }
        }

@

but it doesn`t work. What am I missing?

digitalsurgeon

If I was you I would be looking in Qt3D

minimoog77

Should be easy to do with vertex shader program ( ShaderEffectItem qml element ).

task_struct

Hello,

Qt3D does not work for me. I have only two sides not a whole cube.

I`ve tried with ShaderEffectItem but I can figure out how to calculate transformation matrixes.

guatedude2

For those who still are looking for an answer to this here's a simple example in Qt5

@import QtQuick 2.2

Rectangle {
id: root
width: 360
height: 360
property int rotationAngle

MouseArea {
    anchors.fill: parent
    onClicked: {
        Qt.quit();
    }
}

Rectangle{
    id: rectA
    width: 200
    height: 200
    anchors.centerIn: parent
    color: "red"
    scale: 1- Math.abs(Math.sin(rotA.angle/180*Math.PI)*0.075)
    anchors.horizontalCenterOffset: -Math.sin(rotA.angle/180*Math.PI)*rectA.width/2
    transform: Rotation{
        id: rotA
        angle: rotationAngle+90
        axis { x: 0; y: 1; z: 0 }
        origin { x:rectA.width/2; y:rectA.height/2;  }
    }
}

Rectangle{
    id: rectB
    width: 200
    height: 200
    anchors.centerIn: parent
    color: "blue"
    scale: 1- Math.abs(Math.sin(rotB.angle/180*Math.PI)*0.075)
    anchors.horizontalCenterOffset: -Math.sin(rotB.angle/180*Math.PI)*rectB.width/2
    transform: Rotation{
        id: rotB
        angle: rotationAngle
        axis { x: 0; y: 1; z: 0 }
        origin { x:rectB.width/2; y:rectB.height/2; }
    }
}

NumberAnimation{
    property int side
    from: 90
    to: 180
    running: true
    target: root
    properties: "rotationAngle"
    duration: 1000
    onRunningChanged: {
        if (!running){
            restart()
            side = (side +1) % 2
            if (side===1){
                rectA.color = "blue"
                rectB.color = "red"
            }else{
                rectA.color = "red"
                rectB.color = "blue"
            }
        }
    }
}

}

@