Page curling effect: OpenGL?

Monkey Forums/Monkey Programming/Page curling effect: OpenGL?

Anatol (Posted 2012) [#1]

Hi, I'm working on an interactive book in Monkey and I'm just playing with some different page turning effects. I'm still very undecided if it would be worth the effort to redo parts of the code with the OpenGL module just to get a page curling effect (in fact I'm not even sure if that's doable - I don't have experience with OpenGL). Any opinions from more experienced Monkeycoders would be highly appreciated. I could probably find some 2D workaround such as http://www.youtube.com/watch?v=aVZHN_o45sg (but for that example I'd need a scissor that's not limited to a rectangular shape). Cheers! Anatol

JIM (Posted 2012) [#2]

I think there's an "easy" way to solve your scissor problem. Not sure if diddy has anything like this, but you could probably hack monkey to do it: Instead of a rectangle, you should draw a polygon. That polygon should be the page rectangle sliced by the page curling effect. For the UV coordinates just use position / size and it should be good. It probably would be easier with OpenGL shaders (at least for me). As for the effect itself, there's a bunch of source code on google code on that video's description. That could help you draw the backside of the page. Good luck ;)

MonkeyPig (Posted 2012) [#3]

I did this FB landing page for a friend. http://www.facebook.com/Peelzone/app_230224260356929 Works in HTML5 and Flash (as a fallback). I think it looks pretty decent - with no need for any OpenGL calls. I did it before the GL module was added. If I was only targeting consoles I'd probably use OpenGL now and allow for more interesting corner peels.

Anatol (Posted 2012) [#4]

Thank you very much for your replies. I'll do some tests to see if I can get my head around OpenGL. Just a quick question beforehand, is there any way that the graphics module and openGL can coexist? But I guess when I use pages I basically need to have 2 canvases (for current, next/previous page), so it wouldn't really work?

MonkeyPig (Posted 2012) [#5]

As I understand it - OpenGL 1.1 will happily co-exist with mojo graphics. OpenGL 2.0 won't. You only need one canvas (or drawing surface) and then draw your pages in the the correct order. Draw Page n+1 first (but only if you're page turning). Draw Page n. Once your turn is complete page n advances to n+1.

NoOdle (Posted 2012) [#6]

Had an idea to hack this. It uses SetScissor to draw one line at a time, clipping as necessary. To test the idea I quickly threw this together, please forgive the hideous code (its only to prove a point). I did the scissor in the wrong direction, I should have drawn the lines vertically and done a test to draw as many columns at once as possible, could have saved alot of expensive draw calls. Use Left/Right keys to turn Import mojo Class MyApp Extends App Field x1 : Float = 1120 Field x2 : Float = 560 Field x3 : Float = 1120 Field x4 : Float = 560 Field cx1 : Float = 560 Field cy1 : Float = 415 Field cx2 : Float = 560 Field cy2 : Float = 415 Field mu : Float = 0.0 Method OnCreate() SetUpdateRate 60 End Method Method OnUpdate() If KeyDown( KEY_LEFT ) If mu < 1.0 mu = mu + 0.01 x3 = Linear_Interpolate( x1, DeviceWidth() / 2.0, mu ) x4 = Linear_Interpolate( x2, DeviceWidth() / 2.0, mu ) cx2 = Linear_Interpolate( cx1, ( DeviceWidth() / 2.0 ) - 150, mu ) cy2 = Linear_Interpolate( cy1, DeviceHeight(), mu ) Else If x3 > 0.0 x3 = x3 - 5.0 x4 = x4 - 5.0 cx2 = cx2 - 10.0 Endif Endif Endif If KeyDown( KEY_RIGHT ) If x3 < DeviceWidth() / 2.0 Or x4 < DeviceWidth() / 2.0 x3 = x3 + 5.0 x4 = x4 + 5.0 cx2 = cx2 + 10.0 Else If mu > 0.0 mu = mu - 0.01 x3 = Linear_Interpolate( x1, DeviceWidth() / 2.0, mu ) x4 = Linear_Interpolate( x2, DeviceWidth() / 2.0, mu ) cx2 = Linear_Interpolate( cx1, ( DeviceWidth() / 2.0 ) - 150, mu ) cy2 = Linear_Interpolate( cy1, DeviceHeight(), mu ) Endif Endif Endif End Method Method OnRender() Cls 255, 255, 255 DrawSceneOne() Local intersect : Int = 0 For Local i : Int = 0 Until 480 Local dx : Float = Self.x4 - Self.x3 Local d : Float = Sqrt(( dx * dx ) + ( 480.0 * 480.0 )) Local vx : Float = dx / d Local ix : Float = Linear_Interpolate( x3, x4, i / 480.0 ) If ix > 640 Then intersect = i SetScissor( 0, i, ix, 1 ) DrawSceneTwo() Next SetScissor 0, 0, 640, 480 Local cx3 : Float SetColor 255, 255, 255 If x3 > 640 DrawPoly([ x4, 480.0, cx2, cy2, 640.0, intersect ]) Else Local cmu : Float = ( 640 - x3 ) / 640.0 cx3 = Linear_Interpolate( DeviceWidth(), -200, cmu * 1.15 ) DrawPoly([ x4, 480.0, cx2, cy2, x3, intersect ]) DrawPoly([ cx2, cy2, cx3, 0, x3, intersect ]) Endif End Method End Class Function Main() New MyApp() End Function 'Function For normal Line Function Linear_Interpolate : Float( Y1 : Float, Y2 : Float, MU : Float) Return Y1 * ( 1 - MU ) + Y2 * MU End Function Function DrawSceneOne() SetColor 0, 150, 0 DrawRect 0, 0, 640, 480 SetColor 0, 50, 0 For Local x : Float = 0 To 640 Step 64 For Local y : Float = 0 To 480 Step 48 DrawRect x - 6, y - 6, 12, 12 Next Next End Function Function DrawSceneTwo() SetColor 150, 0, 0 DrawRect 0, 0, 640, 480 End Function

Anatol (Posted 2012) [#7]

Wow, even with full working code! I just tested it, the transition looks really good and smooth! Thanks, that's a really good idea! I'll definitely test this and see how it runs with pages that are not 'static'. There's quite a lot going on on some of the pages of my interactive book project (particle effects, etc.), so drawing the scene many times during page turns may slow things down. I'll test this - I don't know how smart the scissor is and if it just renders the part it needs or if it renders all and then crops it. I may not be able to do this today, but I will post here again once I tested it. Also, I'll still try to use OpenGL. Regardless if I'll use it eventually or not, I can still learn something in the process... My ideal case would be to use different page turn effects and page turn triggers for different platforms or even device sizes, whichever is supported or works best. Thanks a lot, NoOdle! This is very helpful.

NoOdle (Posted 2012) [#8]

ok, below is a much much better version. The pageMu is the completed amount of the effect in the range of 0 - 1. All you need to do is draw some AA lines (code snippet on the forum) along the white shape edges to create a fairly realistic shadow effect. Further speed can probably be gained by optimising the draw scene function; only drawing stuff thats inside the scissor, not sure if thats done automatically or not. Import mojo 'size of page corner Global pageTabSize : Float = 80 Global pageTopX : Float = 0.0 Global pageTopY : Float = 0.0 Global pageBottomX : Float = 0.0 Global pageBottomY : Float = 0.0 Global pageBottomCornerX : Float Global pageBottomCornerY : Float Global pageTopCornerX : Float Global pageTopCornerY : Float Global pageMu : Float = 0.0 Class MyApp Extends App Method OnCreate() SetUpdateRate 60 'top page marker pageTopX = DeviceWidth() pageTopY = DeviceHeight() - pageTabSize 'bottom page marker pageBottomX = DeviceWidth() - pageTabSize pageBottomY = DeviceHeight() 'white corner point bottom pageBottomCornerX = pageBottomX pageBottomCornerY = pageTopY 'white corner point top (appears after a while) pageTopCornerX = DeviceWidth() pageTopCornerY = 0 End Method Method OnUpdate() 'controls page effect, mu = 0.0 -> 1.0 If KeyDown( KEY_LEFT ) pageMu = pageMu + 0.01 If pageMu > 1.0 Then pageMu = 1.0 Endif If KeyDown( KEY_RIGHT ) pageMu = pageMu - 0.01 If pageMu < 0.0 Then pageMu = 0.0 Endif If pageMu <= 0.25 'raises edge top corner to top of screen pageTopX = DeviceWidth() pageTopY = Linear_Interpolate( DeviceHeight() - pageTabSize, 0, pageMu * 4.0 ) 'make bottom white corner move left pageBottomCornerX = Linear_Interpolate( DeviceWidth() - pageTabSize, DeviceWidth() * ( 5.0 / 8.0 ), pageMu * 4.0 ) Endif If pageMu >= 0.25 And pageMu <= 0.5 'once page edge is at the top, chase bottom edge x location pageTopY = 0 pageTopX = Linear_Interpolate( DeviceWidth(), DeviceWidth() * ( 3.0 / 4.0 ), ( pageMu - 0.25 ) * 4.0 ) 'make white bottom corner reach max pageBottomCornerY = Linear_Interpolate( DeviceHeight() - pageTabSize, DeviceHeight(), ( pageMu - 0.25 ) * 4.0 ) Endif 'make bottom corner chase DeviceWidth() * ( 3.0 / 4.0 ), top corner will chase this until vertical If pageMu <= 0.5 pageBottomX = Linear_Interpolate( DeviceWidth() - pageTabSize, DeviceWidth() * ( 3.0 / 4.0 ), pageMu * 2.0 ) Endif 'if turn effect completed, make page keep moving off to the side If pageMu >= 0.5 pageBottomX = Linear_Interpolate( DeviceWidth() * ( 3.0 / 4.0 ), 0, ( pageMu - 0.5 ) * 2.0 ) pageTopX = pageBottomX pageBottomCornerY = DeviceHeight() Endif 'make white corners keep moving along If pageMu >= 0.25 And pageMu <= 1.0 pageBottomCornerX = Linear_Interpolate( DeviceWidth() * ( 5.0 / 8.0 ), 0 - DeviceWidth(), ( pageMu - 0.25 )) pageTopCornerX = Linear_Interpolate( DeviceWidth(), 0 - DeviceWidth() * 1.5, ( pageMu - 0.25 )) Endif End Method Method OnRender() Cls 255, 255, 255 'Draws bottom scene DrawSceneOne() 'Draw top scene From x = 0 to x = start of page effect (x4) SetScissor( 0, 0, pageBottomX, 480 ) DrawSceneTwo() 'Draw remaining columns If pageBottomX <> pageTopX For Local x : Int = pageBottomX Until pageTopX Local y : Float = Linear_Interpolate( pageBottomY, pageTopY, ( x - pageBottomX ) / ( pageTopX - pageBottomX )) SetScissor( x, 0, 1, y ) DrawSceneTwo() Next Endif 'reset scissor SetScissor 0, 0, 640, 480 'draws white page curl SetColor 255, 255, 255 DrawPoly([ pageBottomX, pageBottomY, pageBottomCornerX, pageBottomCornerY, pageTopX, pageTopY ]) If pageTopY = 0 DrawPoly([ pageBottomCornerX, pageBottomCornerY, pageTopCornerX, pageTopCornerY, pageTopX, pageTopY ]) Endif End Method End Class Function Main() New MyApp() End Function 'Function For normal Line Function Linear_Interpolate : Float( Y1 : Float, Y2 : Float, MU : Float) Return Y1 * ( 1 - MU ) + Y2 * MU End Function 'Draws Bottom Scene Function DrawSceneOne() SetColor 0, 150, 0 DrawRect 0, 0, 640, 480 SetColor 0, 50, 0 For Local x : Float = 0 To 640 Step 64 For Local y : Float = 0 To 480 Step 48 DrawCircle x - 6, y - 6, 12 Next Next End Function 'Draws Top Scene Function DrawSceneTwo() SetColor 150, 0, 0 DrawRect 0, 0, 640, 480 SetColor 50, 0, 0 For Local x : Float = 0 To 640 Step 64 For Local y : Float = 0 To 480 Step 48 DrawRect x - 6, y - 6, 12, 12 Next Next End Function

Anatol (Posted 2012) [#9]

Fantastic! That looks really good! I'll test and see how it runs with more complex content and some shadows. Thanks also for the code comments! I'll post here again, but give me a few days. Time is a bit tight right now :(