Real-Time 2D HTML5 Lighting FX

Monkey Archive Forums/Monkey Projects/Real-Time 2D HTML5 Lighting FX

Richard Betson

(Posted 2011) [#1]

Real-Time 2D HTML5 Lighting FX
http://redeyeware.uphero.com/monkey/HTML5_2d_realtime_lighting/html5/MonkeyGame.html

Hi,
This is a 2D real-time lighting effect for HTML5 using 'impixi's' canvas wrapper mod (http://www.monkeycoder.co.nz/Community/posts.php?topic=1885). It uses the radial gradient fill for a poly (the size of the canvas) to simulate a lighting effect over a background. This is a bit of a hack but would work for game lighting perhaps.

Cycles through 4 effects.

* EDIT *
Fixed for IE9 and FireFox

Beaker

(Posted 2011) [#2]

13fps on iPad2.
60fps in Safari.
Doesn't seem to run in Firefox (v8.0.1).

Looks good.

DruggedBunny

(Posted 2011) [#3]

Nice -- 36 FPS in Chrome here, on XP, which looks perfectly smooth.

Goodlookinguy

(Posted 2011) [#4]

Neat effects. I'm getting 60/61 FPS on all tests on Chrome (version 17.0.942.0 dev-m). In FireFox 8.0.1, I'm also not able to get it to run.

Edit/Update: I tested this in FireFox (Aurora) 10.0a2 (2011-12-06) and it also didn't run.

impixi

(Posted 2011) [#5]

Nice. 59/61 FPS Chrome 16. Doesn't do anything in IE9.

therevills

(Posted 2011) [#6]

How long does it take to load? I've left it for a few minutes and all I get is a blank screen with the text: RedEyeWare - Go Back to Monkey Demos

Running FF 8.

slenkar

(Posted 2011) [#7]

I get the blank screen with FF9

NoOdle

(Posted 2011) [#8]

works fine with safari, solid 60fps on my macbook. Very nice :)

therevills

(Posted 2011) [#9]

Blank screen with IE9 too...

Just tried Chrome and works fine there - cool!

Richard Betson

(Posted 2011) [#10]

Yup, this 'does not run' on FireFox or IE9, interesting.. but rocks on Chrome/Safari I will try to get Impixi to see if he can help get it IE9/FF comaptible. I'll poke around a bit too, I am sure it's something I got wrong as impixi's gradient-poly demo works on all browsers.

Here is the source for this:

* EDIT * - Fixed for IE9 and FireFox


'******************************************************************
'*	2D Lighting Example
'*	Author: Richard R Betson
'*	Date: 12/07/11
'*	Language: Monkey
'*  Tagets: HTML5
'*  License - Public Domain							  
'******************************************************************
'   Canvas Wrapper Mod by Impixi - <a href="http://www.monkeycoder.co.nz/Community/posts.php?topic=1885" target="_blank">http://www.monkeycoder.co.nz/Community/posts.php?topic=1885</a>
'******************************************************************

Import monkey
Import mojo
Import mojo.app
Import canvaswrapper

Global fps:Int,fp:Int,fps_t:Int
Global polyArr1:Float[]
Global polyArr2:Float[]
Global zz:Int,zz2:Int
Global zz_sw:Int,fx:Int=-1




Function Main:Int()
	New PolyExperiment
End Function


Class PolyExperiment Extends App
	Field htmlImage:HTMLImageElement
	Field textureCreated:Bool=False
	Field fxttl:Int
	Field myimage:Image
	Field texture:CanvasPattern
	Field gradLinear:CanvasGradient
	Field gradRadial:CanvasGradient

	
	Method OnCreate()
		htmlImage =  loadHTMLImage("bg3.png")
		polyArr2 = [0.0, 0.0, 640.0, 0.0, 640.0, 480.0, 0.0, 480.0, 0.0, 0.0]
		SetUpdateRate(60)
	End Method
	
	Method OnUpdate()
	
	End Method
	
	Method OnRender()
		Local mxx:Int,ms:String
		Local mtime:Int=Millisecs()
		fps=fps+1
		If fps_t<mtime'Millisecs()
		fp=(fps)
		fps_t=1000+mtime'Millisecs()
		fps=0
		Endif
		
		If fxttl<mtime'Millisecs()
			fxttl=mtime+5000'Millisecs+3000
			fx=fx+1
			If fx>3 Then fx=0
		Endif
		
		If (htmlImage.complete) And (Not textureCreated)
			texture = xCanvas.CreatePattern(htmlImage, "repeat")
			textureCreated = True
		Endif 
		Local dx:Int = Sin(mtime*.2)*199
		Local centreXY:Float[] = PolyCentroid(polyArr2)

		If fx=0
		gradRadial = xCanvas.CreateRadialGradient(centreXY[1]+70+dx, centreXY[1], 0, centreXY[1]+70+dx, centreXY[1],200)
		mxx=(  255 + ( 255  Shl 8)   + ( ( (255-dx)) Shl 16 ) + (255 Shl 24)  )
		ms=DecToHex(mxx)
		gradRadial.addColorStop(0.0,"#ffffff")
      	gradRadial.addColorStop(0.2,"#"+ms)
      	gradRadial.addColorStop(1.0, "#000000")
		Else If fx=1
		gradRadial = xCanvas.CreateRadialGradient(centreXY[1]+70-dx, centreXY[1], 0, centreXY[1]+70, centreXY[1],200)
		mxx=(  ( 255  Shl 8)   + ( ( (195)) Shl 16 ) + (195 Shl 24)  )
		ms=DecToHex(mxx)
		gradRadial.addColorStop(0.0,"#8f8fff")
      	gradRadial.addColorStop(0.3,"#"+ms)
     	gradRadial.addColorStop(1.0, "#000000")
		Else If fx=2
		gradRadial = xCanvas.CreateRadialGradient(centreXY[1]+70, centreXY[1], 0, centreXY[1]+70+dx, centreXY[1],200)
		mxx=(  ( 255  Shl 8)   + ( ( (255-dx)) Shl 16 ) + (255 Shl 24)  )
		ms=DecToHex(mxx)
		gradRadial.addColorStop(0.0,"#ffffff")
      	gradRadial.addColorStop(0.2,"#"+ms)
      	gradRadial.addColorStop(1.0, "#000000")
		Else If fx=3
		gradRadial = xCanvas.CreateRadialGradient(centreXY[1]+70, centreXY[1], 0, centreXY[1]+70, centreXY[1],200+dx)      	
		gradRadial.addColorStop(0.0,"#8a8aff")
      	gradRadial.addColorStop(1.0, "#000000")
		Endif

		SetBlend(0)
		xCanvas.SetFillStyle(texture)
		xCanvas.DrawPoly polyArr2, True, True
		SetBlend(1)
		xCanvas.SetFillStyle gradRadial
		xCanvas.DrawPoly polyArr2, True,True
		DrawText("HTML5 Real-Time 2D Lighting FX - Richard Betson - <a href="http://redeyeware.uphero.com" target="_blank">http://redeyeware.uphero.com</a> - FPS:"+fp,10,465)

	End Method
	
	
Function DecToHex:String(v:Int)
	Const hex:String = "0123456789ABCDEF"
	Local n:String
	For Local i:Int = 0 Until 6
		n += String.FromChar(hex[(v Shr (28-(i*4))) & $F])
	Next
	Return n
End Function		


'Get the centre point of a polygon
Function PolyCentroid:Float[](poly:Float[])

	Local result:Float[2]	'i0 = x, i1 = y
    result[0] = 0
    result[1] = 0

    For Local i:Int = 0 Until (poly.Length - 2) Step 2
		
		result[0] += (poly[i] + poly[i+2]) * ((poly[i] * poly[i+3]) - (poly[i+2] * poly[i+1]))
		result[1] += (poly[i+1] + poly[i+3]) * ((poly[i] * poly[i+3]) - (poly[i+2] * poly[i+1]))
    Next

    Local area:Float = PolygonArea(poly)

    result[0] = Abs(result[0] / 6.0 / area)
    result[1] = Abs(result[1] / 6.0 / area)

	Return result

End

'FROM:
'http://www.monkeycoder.co.nz/Community/posts.php?topic=1659
Function PolygonArea:Float(polyPoints:Float[])

	Local accum:Float
	Local  j:Int = polyPoints.Length()-2

	For Local i:Int =0 Until polyPoints.Length() Step 2
		accum += polyPoints[j] * polyPoints[i+1] - polyPoints[i] * polyPoints[j+1]
    	j=i 
	Next

	Return accum / 2

End


End Class

L8r,

Richard Betson

(Posted 2011) [#11]

OK,

I fixed the problem and this should work with IE9 and FireFox. I was passing the Hex string incorrectly.

Let me know if it works for you:)

L8r,
- Rich -

semar

(Posted 2011) [#12]

30-33 FPS on Firefox 4.0b12 (on a openSUSE 11.4 O.S.)

Sergio.

slenkar

(Posted 2011) [#13]

yep it works now, FF9
I got 8FPS with a celeron from 2003

Nice demo

Why0Why

(Posted 2011) [#14]

61 FPS for me in Chrome. I love how it looks.

bruZard

(Posted 2011) [#15]

very cool, 61 FPS in Firefox 8.0.1

jayparker

(Posted 2011) [#16]

32-36 FPS in Firefox 8.0.1 and smooth.

30-61 FPS in Chrome 15.0.874.121

Goodlookinguy

(Posted 2011) [#17]

Main Computer (Stats In Signature)
Firefox 10.0a2 (2011-12-07) : 61 FPS Steady
Chrome (version 17.0.942.0 dev-m) : 61 FPS Steady

Computer 2 (2.7GHz 6-cores, ATI HD 5770, 8GB DDR3 RAM)
Firefox 10.0a2 (2011-12-06)
- Test 1 : 50-52 FPS
- Test 2 : 50-52 FPS
- Test 3 : 48-54 FPS
- Test 4 : 50-51 FPS

Chrome (version 17.0.942.0 dev-m)
- Test 1 : 61 FPS
- Test 2 : 38-39 FPS
- Test 3 : 37-38 FPS
- Test 4 : 61 FPS

iMac (3.4GHz 4 Cores, AMD Radeon HD 6970M, 16GB DDR3)
Chrome (version 17.0.963.2 dev): 61 FPS Steady

It's interesting. Firefox was more consistent overall VS Chrome which was faster at certain parts and quite a bit slower at others. Regardless of the number of frames, to the eye, all tests looked very smooth.

Richard Betson

(Posted 2011) [#18]

^Thanks for testing. :)

Chrome which was faster at certain parts and quite a bit slower at others

I have noticed this too and I have wondered why this happens. I have even tried different canvas sizes, optimization's and alike trying to adapt to it. It feels like it's threading issues, not sure.

dopeyrulz

(Posted 2011) [#19]

Working fine in IE9 - 39 FPS on my laptop