Page Curl Effect

Monkey Forums/Monkey Code/Page Curl Effect
NoOdle
(Posted 2012) [#1]
Anatol needed a page curl effect so I hacked about and made this.

All it needs is AA lines to be drawn around the white edges below the shape and it should look like a pretty nice shadow effect. http://monkeycoder.co.nz/Community/posts.php?topic=987

Controls: Left / Right keys to advance effect
 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
Beaker
(Posted 2012) [#2]
Saw this yesterday. Really nice job NoOdle.