Circle Animation

Monkey Forums/Monkey Beginners/Circle Animation

Duke87

(Posted 2015) [#1]

Hey Monkeys,
I'm currently working on a Circle-Loading-Animation.
Maybe you're interested, so I share it to you.

Code Below:

'Importieren der Monkey-Module 
Import mojo

#GLFW_WINDOW_TITLE="Circle Anim"
#GLFW_WINDOW_WIDTH=600
#GLFW_WINDOW_HEIGHT=800

#ANDROID_APP_LABEL="Circle Anim"
#ANDROID_APP_PACKAGE="de.testApps.CircleAnim"
#ANDROID_SCREEN_ORIENTATION="portrait"					'"user", "portrait", "landscape"
#ANDROID_GAMEPAD_ENABLED=False
#ANDROID_VERSION_CODE="1"
#ANDROID_VERSION_NAME="1"

Global lastTime:Int 
Global timeScale:Float 

'##########################   HAUPTFUNKTION DER APPLIKATION   #########################################
Function Main:Int()
	'EnableKeyboard()
	New cGame				'Konstruktor zum erstellen des Spiels 
End Function 

Class cGame Extends App

	Field cAnim:CircleAnimation
	 
	Method OnCreate:Int()
		SetUpdateRate(60)		
  		cAnim = New CircleAnimation(DeviceWidth()/ 2.0,DeviceHeight()/ 2.0,DeviceHeight()/ 20.0,180.0)
		Return True
	End Method
	
	
	Method OnUpdate:Int()
		ll_UpdateSpeeds()
 		
  		cAnim.Update()
  		 
  		If KeyHit(KEY_RIGHT) Or KeyDown(KEY_RIGHT)
  			cAnim.angleSpeed += 1.0
  		Endif 
  		
  		If KeyHit(KEY_LEFT) Or KeyDown(KEY_LEFT)
  			cAnim.angleSpeed -= 1.0
  		Endif 
  		
  		If KeyHit(KEY_UP) Or KeyDown(KEY_UP)
  			cAnim.rad += 0.5
  		Endif 
  		
  		If KeyHit(KEY_DOWN) Or KeyDown(KEY_DOWN)
  			cAnim.rad -= 0.5
  		Endif 
  		
  		If KeyHit(KEY_W) Or KeyDown(KEY_W)
  			cAnim.nrCircles += 1
  		Endif 
  		
  		If KeyHit(KEY_S) Or KeyDown(KEY_S)
  			cAnim.nrCircles -= 1
  		Endif
		Return True
	End Method
	
	
	Method OnRender:Int()
		Cls 
		cAnim.Draw()
		DrawText "Press Left/Right to Speed up/Slow down the Circle-Animation",10,30
		DrawText "Press Up/Down to increse/decrease the Radius",10,50
		DrawText "Press W/S to increase/decrease number of shown circles",10,70
		Return True
	End Method

End Class

Class CircleAnimation
	Field xcenter:Float	'
	Field ycenter:Float '
	Field rad:Float  
	Field angle:Float '     
	Field cX:Float,cY:Float 

	Field currA:Float = 1
	Field angleSpeed:Float 

	Field nrCircles:Int = 100
	Field lCircles:List<cCircle>
		
	Method New(_CenterX:Float,_CenterY:Float,_Radius:Float,_Speed:Float)
		xcenter	= _CenterX
		ycenter	= _CenterY
		rad		= _Radius
		angle	= 0.0
		angleSpeed = _Speed
		lCircles = New List<cCircle>
	End Method 

	Method Draw:Void()
		For Local oC:cCircle = Eachin lCircles
			oC.Draw()
		Next 
		SetAlpha 1
		DrawCircle(cX,cY,9)
		
		DrawText "Circles: " + lCircles.Count() + " / " + nrCircles,10,10
	End Method
	
	Method Update:Void()
		angle += EqToFPS(angleSpeed)					'means, it moves with x-Degrees per Second ; if set to 360, it should do one full round in 1 Second (+/- 1/60 Second, depends on accuracy

 		cX  = xcenter + Cos (angle) * rad	'; 
  		cY  = ycenter + Sin (angle) * rad	';
  		
 		Local oC:cCircle = New cCircle(cX,cY,currA,lCircles.Count())
 		lCircles.AddLast(oC)
 		currA -= EqToFPS(1.0)

 		If lCircles.Count >= nrCircles
 			lCircles.RemoveFirst()
 		Endif
 		
 		For Local oC:cCircle = Eachin lCircles 
 			If oC.id > nrCircles
 				lCircles.RemoveEach(oC)
 			Endif 
 		Next 
	End Method 
End Class 

Class cCircle
	Field X:Float,Y:Float,r:Float,alpha:Float 
	Field id:Int 
	Method New(_X:Float,_Y:Float,_Alpha:Float,_ID:Int,_R:Float= 5)
		X = _X
		Y = _Y
		r = _R
		alpha = _Alpha
		id = _ID
	End Method 
	
	Method Draw:Void()
		SetAlpha alpha
		SetColor 0,0,255
		DrawCircle(X,Y,r)
	End Method 
	
End Class 


Function EqToFPS:Float(unitsPerSecond:Float)

  	'Convert the given units-per-second value to units-per-frame
  	Return unitsPerSecond * timeScale
End Function
 
 
Function ll_UpdateSpeeds()

	Local currentTime = Millisecs()
	local deltaTime = currentTime - lastTime
  	lastTime = currentTime

  	'calculate a scale value to convert -per-second values to -per-frame values
  	timeScale = deltaTime / 1000.0
End Function

When i run it as Desktop Target it's quite ok with performance, but when i try to run as HTML, it stutters a lot.
Is this because of the "DrawCircle Function" ?
Am I doing something extremly the wrong way?

Bye Duke

Duke87

(Posted 2015) [#2]

Bye the way, now i saw my mistake. :P
I should update the Position of each circle, instead of creating/deleting new ones and let them still with each loop.
(what a stupid mistake)