I would like to know how to flip a vertical PageTurn3D

cocos2d-x
#1

I want to from bottom to top turning the page.
Please refer to page. is as follows.

URL : http://www.istockphoto.com/video/grunge-page-turn-vertical-8986857?st=455e1c71

How do I fix this?

void PageTurn3D::update(float time)
{
    float tt = MAX(0, time - 0.25f);
    float deltaAy = (tt * tt * 500);
    float ay = -100 - deltaAy;
    float deltaTheta = - (float) M_PI_2 * sqrtf( time);
    float theta = /*0.01f */ + (float) M_PI_2 +deltaTheta;

    float sinTheta = sinf(theta);
    float cosTheta = cosf(theta);

    for (int i = 0; i <= _gridSize.width; ++i)
    {
        for (int j = 0; j <= _gridSize.height; ++j)
        {
            // Get original vertex
            Vec3 p = getOriginalVertex(Vec2(i ,j));

            float R = sqrtf((p.x * p.x) + ((p.y - ay) * (p.y - ay)));
            float r = R * sinTheta;
            float alpha = asinf( p.x / R );
            float beta = alpha / sinTheta;
            float cosBeta = cosf( beta );

            // If beta > PI then we've wrapped around the cone
            // Reduce the radius to stop these points interfering with others
            if (beta <= M_PI)
            {
                p.x = ( r * sinf(beta));
            }
            else
            {
                // Force X = 0 to stop wrapped
                // points
                p.x = 0;
            }

            p.y = ( R + ay - ( r * (1 - cosBeta) * sinTheta));

            // We scale z here to avoid the animation being
            // too much bigger than the screen due to perspective transform
            p.z = (r * ( 1 - cosBeta ) * cosTheta) / 7;// "100" didn't work for

            //    Stop z coord from dropping beneath underlying page in a transition
            // issue #751
            if( p.z < 0.5f )
            {
                p.z = 0.5f;
            }

            // Set new coords
            setVertex(Vec2(i, j), p);
        }
    }
}
#2 
float tt = MAX(0, time - 0.25f);
    float deltaAx = (tt * tt * 500);
    float ax = -100 - deltaAx;
    
    float deltaTheta = - (float) M_PI_2 * sqrtf( time) ;
    float theta = /*0.01f */ + (float) M_PI_2 +deltaTheta;
    
    float sinTheta = sinf(theta);
    float cosTheta = cosf(theta);
    
    for (int i = 0; i <= m_sGridSize.width; ++i)
    {
        for (int j = 0; j <= m_sGridSize.height; ++j)
        {
            // Get original vertex
            ccVertex3F p = originalVertex(ccp(i ,j));
            
            float R = sqrtf(((p.x - ax) * (p.x - ax)) + ((SCREEN.height - p.y)*(SCREEN.height - p.y)));
            float r = R * sinTheta;
            float alpha = asinf( (SCREEN.height - p.y) / R );
            float beta = alpha / sinTheta;
            float cosBeta = cosf( beta );
            
            // If beta > PI then we've wrapped around the cone
            // Reduce the radius to stop these points interfering with others
            if (beta <= M_PI)
            {
                p.y = SCREEN.height - ( r * sinf(beta));
            }
            else
            {
                // Force X = 0 to stop wrapped
                // points
                p.y = SCREEN.height - 0;
            }
            
            p.x =  ( R + ax - ( r * (1 - cosBeta) * sinTheta));
            
            // We scale z here to avoid the animation being
            // too much bigger than the screen due to perspective transform
            p.z = (r * ( 1 - cosBeta ) * cosTheta) / 7;// "100" didn't work for
            
            //    Stop z coord from dropping beneath underlying page in a transition
            // issue #751
            if( p.z < 0.5f )
            {
                p.z = 0.5f;
            }
            
            // Set new coords
            setVertex(ccp(i, j), p);
            
        }
    }

hope this help!!! :smile:

1 Like
#3

Thank you.
there ever any other way ?
bottom right to top left turning the page.

#4

Hi
You can read detail how to turning page in this link:

http://www.parc.com/content/attachments/turning-pages-3D.pdf

Hope this help! :slight_smile:

#5

I really appreciate it .
Has been a great help .
You are awesome .

#6

@sjm0229 do you have the shadow under the page like the video ?

#7

Not . Simply processing page .