Android speed vs...well...everything

Monkey Targets Forums/Android/Android speed vs...well...everything

Ken	(Posted 2013) [#1]

Hi All,

I just got around to trying a silly little test on Android to see what the speed of the JVM is like (code at the bottom). It's the warpy->bezier example, but with the control points bouncing around the screen.

I've been using MonkeyPro70b up to now, but on OSX that's broken...the compiles die with a missing symbol. So for Android I went back to 67f.

In all other environments that I've tried (HTML5, iOS (both on iPad 2 and an old iPod), GLFW), it just goes like stink. Easily handles 60 frames per second, and I can click to add more bezier's all day long, and it never seems to slow down before I get tired of adding them.

On Android? Running on a Nexus 4, I get about 5 beziers on the screen, and I notice degraded performance. Put 10 on, and you feel it. 20, and it looks like it's skipping frames. More than that, and we're heading towards seconds per frame rather than frames per second.

On a Nexus 4!?!?

Let that run for a little while and the back of the phone gets hot!

Is there something inherently evil about this code that craters Android? Is there a less naive way to draw bezier curves more quickly on Android? Is there a native client on Android for Monkey?

-Ken

'Draw bezier curves

'A bezier curve is defined by four control points. 
'The first control point is the start of the curve.
'The second control point defines the initial direction of the curve (relative to the start)
'The third control point defines the final direction of the curve (relative to the end point)
'The fourth control point is the end of the curve.

'The curve is parameterised by a variable t. That means, any value of t between 0 and 1 corresponds to a point on the curve.
't=0 corresponds to the start of the curve, and t=1 corresponds to the end of the curve.

'We can only draw an approximation to the bezier curve for various difficult maths reasons.
'There are a few algorithms for drawing bezier curves. 
'This one works by working out the positions of points on the curve for various values of t, and joining them up with straight lines.


Import mojo


'The bezier class represents a single bezier curve.
'It is defined by four control points, which are stored in the points array
'inc is the 'step size' used for drawing - a smaller number means a more accurate curve
Class bezier
	Field points#[]
	Field mx#[]
	Field my#[]
	Field inc#
	
	Method New(points:Float[], mx:Float[], my:Float[], inc:Float = -1)
	
		If True Then
			For Local q:Float = EachIn points
				Self.points = Self.points.Resize(Self.points.Length + 1)
				Self.points[Self.points.Length - 1] = q
			Next		
			For Local q:Float = EachIn mx
				Self.mx = Self.mx.Resize(Self.mx.Length + 1)
				Self.mx[Self.mx.Length - 1] = q
			Next
			For Local q:Float = EachIn my
				Self.my = Self.my.Resize(Self.my.Length + 1)
				Self.my[Self.my.Length - 1] = q
			Next
		Else
			Self.points = points
			Self.mx = mx
			Self.my = my
		EndIf
		
		If inc=-1	'if inc is not given, make a guess based on the distance between the two end points
			Local dx#=points[6]-points[0]
			Local dy:Float = points[7] - points[1]
			Local d#=Sqrt(dx*dx+dy*dy)
			inc = 1 / d
		Endif
		Self.inc = inc
	End
	
	Method xpos#(t#)
		'work out the x co-ordinate of the point on the curve corresponding to the given value of t
		Local nt#=1-t
		Return nt*nt*nt*points[0] + 3*nt*nt*t*points[2] + 3*nt*t*t*points[4] + t*t*t*points[6]
	End Method
	
	Method ypos#(t#)
		'work out the y co-ordinate of the point on the curve corresponding to the given value of t
		Local nt#=1-t
		Return nt*nt*nt*points[1] + 3*nt*nt*t*points[3] + 3*nt*t*t*points[5] + t*t*t*points[7]
	End Method
	
	Method move()
		'Print ("Move with points " + points[1]+","+points[2])
		For Local idx=0 To 3
			Local xidx = idx*2
			Local yidx = xidx+1
			
			Self.points[xidx] += Self.mx[idx]
			
			If Self.points[xidx]<0.0 Then
				Self.points[xidx]=0.0
				Self.mx[idx] *=-1
			Endif
			If Self.points[xidx]>DeviceWidth() Then
				Self.points[xidx]=DeviceWidth()
				Self.mx[idx] *=-1
			Endif
			
			Self.points[yidx] += Self.my[idx]
			If Self.points[yidx]<0.0 Then
				Self.points[yidx]=0.0
				Self.my[idx] *=-1
			Endif
			If Self.points[yidx]>DeviceHeight() Then
				Self.points[yidx]=DeviceHeight()
				Self.my[idx] *=-1
			Endif						
		Next 
	End
	
	Method draw()
	
		Local dx:Float = points[6] - points[0]
		Local dy:Float = points[7] - points[1]
		Local d#=Sqrt(dx*dx+dy*dy)
		Self.inc = 1 / d

		'draw the control points
		SetColor 0,0,255
		DrawPoints points
		'draw lines showing how the second and third control points define the direction of the curve
		SetAlpha .3
		DrawLine points[0],points[1],points[2],points[3]
		DrawLine points[4],points[5],points[6],points[7]
		SetAlpha 1
		
		'draw the curve
		'it will work by increasing t from 0 to 1, 
		'calculating the co-ordinates of the corresponding point on the curve at each step,
		'and drawing a line between it and the previous calculated point 
		SetColor 255,255,255
		Local ox#=points[0], oy#=points[1]	'the first point on the curve is just the first control point
		
		Local x#,y#
		Local t#=0
		
		While t<1
			t+=inc		'add inc to t, so moving along the curve a little bit
			If t>1 t=1
			
			'calculate the position of the corresponding point on the curve
			x=xpos(t)	
			y=ypos(t)
			
			'draw a line between the previous point and the point we just calculated
			DrawLine ox,oy,x,y
			
			'the point we just calculated now becomes the 'previous' point
			ox=x
			oy=y
		Wend
	End
End

'Draw a circle at each of the points in the given array
Function DrawPoints(points#[])
	For Local i=0 To points.Length-1 Step 2
		If points[i]>0
			DrawCircle points[i],points[i+1],3
		Endif
	Next
End

Class BezierApp Extends App
	Field points#[8],i			'This array stores the control points the user is currently placing
	
	Field dx#[4]
	Field dy#[4]
	
	Field beziers:List<bezier>		'This list will store all the beziers that have been drawn
	
	Method OnCreate()
		SetUpdateRate 60
		beziers = New List<bezier>
	End
	
	Method OnUpdate()
	
		If JoyHit( JOY_BACK ) Error ""
		
		For Local bz:=Eachin beziers
			bz.move()
		Next
		
		'when the user clicks, place a control point
		If TouchHit(0)
			points[i]=TouchX()	'store where the user clicked
			points[i+1]=TouchY()
			dx[i/2] = Rnd(-10,10)
			dy[i/2] = Rnd(-10,10)
			i+=2
			If i=8				'if four points have been placed, we can create a bezier
				beziers.AddLast(New bezier(points,dx,dy))
				
				points = New Float[8]	're-initialise the points array
				i=0
			Endif
		Endif
	End
	
	Method OnRender()
		Cls
		
		'draw all the beziers that have been created
		For Local b:bezier=Eachin beziers
			b.draw
		Next
		
		'draw the control points the user is currently placing
		SetColor 255,255,0
		DrawPoints points

		SetColor 255,255,255
		DrawText "Click to place control points",0,0
	End
End

Function Main()
	New BezierApp
End

muddy_shoes

(Posted 2013) [#2]

The code is rendering a shed-load of lines. Over 250 per bezier when I tried it. The simplest thing would be to reduce that number by changing the increment on the bezier. In my own curve rendering I subdivide the curve and stop when the mid-point of a straight line approximation is within a given distance of the actual curve point.

Beyond simply dropping the accuracy there are a bunch of things that could be done to speed things up but the main one is probably to alter mojo to have a DrawLineList function to batch the render calls and avoid the overhead of repeatedly calling its internal Begin method.

Whether that's worth doing or not depends on whether this is more than just a "little test".

Ken	(Posted 2013) [#3]

I'm building an app that will need to be able to have up to 100 bezier curves on screen and live at any one time. I'd like to be able to animate the curves, so I wanted to see maximum speed.

I was just surprised that Android, at least in this test, seemed to be so much slower than on other devices.

That said, for my purposes the curves don't need to be perfect by any stretch (and in fact the fewer points on a bezier the better), so if I limit the number of sub points on a line to 10 (maybe 20) that seems to do fine for the look of the bezier.

Even better, though I like the buttery look of an update rate of 60, it's not even close to necessary. I was exaggerating everything to find where the boundaries are. If I drop that to 30, I'm easily within the requirements of my app.

Your post made me curious about the internals of Mojo...I've just been using Mojo as a black box up to now.

Wow. Just looked at the low level implementation of DrawLine in the native code for Mojo. I /think/ I can see how DrawLine could be extended to be, say, DrawMultiLine(verts#[]), and so the Begin would only get called once (for up to roughly 1600 (or is it 3200?) points)...but I'm a complete OpenGL newbie.

Some platforms make it obvious when the line appears (in .js lineTo(x,y)). but in the case of the raw OpenGL calls, it seems to be adding vertices, but I don't see where those are actually drawn.

It's *cool* to be able to see the source of this stuff!

-Ken

muddy_shoes

(Posted 2013) [#4]

The actual drawing occurs behind the scenes when the vertex data is sent to the GL driver/hardware. The hand-off occurs in the Flush call. Here's a suitable method for the java implementation:

//Expects an array of floats describing the vertex data for a
//continuous set of connected line segments with no duplicated vertices.
//The vertices contain x,y,u,v data, with the u and v components being
//ignored for lines. So a line from 50.0,100.0 to 40.0,30.0 would be in an
//8 element array - [50.0, 100.0, 0.0, 0.0, 40.0, 30.0, 0.0, 0.0]

int DrawLineStrip( float[] verts){
        Begin( GLES11.GL_LINE_STRIP, verts.length/4, null );
		
        java.lang.System.arraycopy(verts,0,vertices,vp,verts.length);
        java.util.Arrays.fill(colors,cp,cp+verts.length/4,colorARGB);
		
        if( tformed ){
            for( int i=vp+verts.length;vp<i;vp+=4 ){
                float x = vertices[vp];
                float y = vertices[vp+1];
                vertices[vp] = x * ix + y * jx + tx;
                vertices[vp+1] = x * iy + y * jy + ty;
	    }
	}
	cp+=verts.length/4;
        Flush();
 	return 0;
}

You could change it to take plain x,y pairs, but at the cost of having to copy all the data over at greater expense than the system call. You could also further alter mojo to avoid that issue at the cost of increasing effort and future pain when updating Monkey.

In addition to this you'll also have to add the references/functions to graphicsdevice.monkey and graphics.monkey.

muddy_shoes

(Posted 2013) [#5]

Here's the draw method altered to use the line strip call. I've micro-optimised a bit by inlining the x and y position calculations and removing the redundant calcs.

Const BEZIER_STEPS:Int = 50 
Field verts:Float[] = New Float[ 4*(BEZIER_STEPS+1) ]
	
Method draw()
	
    Self.inc = 1.0 / BEZIER_STEPS

    'draw the control points
    SetColor 0,0,255
    DrawPoints points
    'draw lines showing how the second and third control points define the direction of the curve
    SetAlpha .3
    DrawLine points[0],points[1],points[2],points[3]
    DrawLine points[4],points[5],points[6],points[7]
    SetAlpha 1
		
    'draw the curve
    'it will work by increasing t from 0 to 1, 
    'calculating the co-ordinates of the corresponding point on the curve at each step
    SetColor 255,255,255
		
    verts[0] = points[0]
    verts[1] = points[1]
		
    Local vertIndex:Int = 4
    Local vertCount:Int = verts.Length()
			
    Local x#,y#
    Local t#=0
		
    While vertIndex < vertCount
        t+=inc	'add inc to t, so moving along the curve a little bit
        If t>1.0 t=1.0
			
        'calculate the position of the corresponding point on the curve
        Local nt:Float = 1.0-t
        Local nt3:Float = nt*nt*nt
        Local nttx3:Float = 3*nt*t
        Local t3:Float = t*t*t
			
        x = nt3*points[0] + nt*nttx3*points[2] + nttx3*t*points[4] + t3*points[6]
        y = nt3*points[1] + nt*nttx3*points[3] + nttx3*t*points[5] + t3*points[7]
	
        'copy point to vert array
        verts[vertIndex] = x
        verts[vertIndex+1] = y
        vertIndex +=4

    End
			
    DrawLineStrip( verts )
End