Plasma drawing impossibly slow?

Monkey Targets Forums/HTML5/Plasma drawing impossibly slow?

frank (Posted 2011) [#1]

I have the following plasma code: http://pastebin.com/tvjaL6mT graphically / conceptually it's fine, but it's mindbogglingly slow and CPU intensive; this same code (in c) is fluent on quite ancient computers, but here it just stands still, so I imagine i'm doing something very wrong :) Anyone can explain what that would be?

Volker (Posted 2011) [#2]

SetColor is incredible slow in html5.

frank (Posted 2011) [#3]

Ah didn't know that, but what can I do about it? Any workarounds? Hmmm. If I comment SetColor out, it doesn't get much faster.

Volker (Posted 2011) [#4]

No. See first post here: www.monkeycoder.co.nz/Community/posts.php?topic=782#6427

Volker (Posted 2011) [#5]

Sorry, was just a guess. Then I dont know atm.

frank (Posted 2011) [#6]

I'm trying to profile the JS code node :) Not too easy either :) If anyone has an idea... I'll continue trying anyway :)

therevills (Posted 2011) [#7]

Wow that is slow... even in GLFW! By reducing the size of the FOR loops you can get it to a decent FPS: Import mojo Const SCREEN_WIDTH = 640 Const SCREEN_HEIGHT = 480 Class Color Public Field r,g,b Method New() End Method New(r,g,b) Self.r = r Self.g = g Self.b = b End End Class Plasma Extends App Field colors:Color[256] Field asin:Int[512] Field pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, tpos1, tpos2, tpos3, tpos4 Field x,index Field fpsCount:Int Field startTime:Int Field totalFPS:Int Const STEP_SIZE:Int = 6 Method OnCreate() For Local i=0 Until 512 Local rad:Float = (i * 0.703125) * 0.0174532 asin[i] = Sinr(rad) * 1024 End For Local i=0 Until 64 colors[i] = New Color colors[i].r = i Shl 2; colors[i].g = 255 - ((i Shl 2) + 1); colors[i+64] = New Color colors[i+64].r = 255; colors[i+64].g = (i Shl 2) + 1; colors[i+128] = New Color colors[i+128].r = 255 - ((i Shl 2) + 1); colors[i+128].g = 255 - ((i Shl 2) + 1); colors[i+192] = New Color colors[i+192].g = (i Shl 2) + 1; End SetUpdateRate 60 End Method OnRender() CountFPS() 'Cls 0,0,0 tpos4 = pos4 tpos3 = pos3 For Local i=0 Until SCREEN_HEIGHT Step STEP_SIZE tpos1 = pos1 + 5 tpos2 = pos2 + 3 tpos3 = tpos3 & 511 tpos4 = tpos3 & 511 For Local j=0 Until SCREEN_WIDTH Step STEP_SIZE tpos1 = tpos1 & 511 tpos2 = tpos2 & 511 x = asin[tpos1] + asin[tpos2] + asin[tpos3] + asin[tpos4] index = 128 + (x Shr 4) ' index is 8 bit, so need to overflow If index > 255 Then index = index - 255 Else If index < 0 Then index = 255 + index End SetColor colors[index].r, colors[index].g, colors[index].b DrawRect j, i, STEP_SIZE, STEP_SIZE tpos1 = tpos1 + 5 tpos2 = tpos2 + 3 End tpos4 = tpos4 + 3 tpos3 = tpos3 + 1 End pos1 = pos1 + 9 pos3 = pos3 + 8 SetColor 255, 255, 255 DrawText totalFPS, 10, 10 End Method OnUpdate() End Method CountFPS:Void() If Millisecs()>startTime+1000 totalFPS = fpsCount fpsCount = 0 startTime = Millisecs() Endif fpsCount+=1 End End Function Main() New Plasma End

impixi (Posted 2011) [#8]

You'll need to directly manipulate the html5 canvas pixels for decent performance. You can use the HTML5 canvas wrapper code from the code archives to do this. And here's your modified code: Strict Import mojo Import canvaswrapper Class Color Field r:Int, g:Int, b:Int Method New(r:Int, g:Int, b:Int) Self.r = r Self.g = g Self.b = b End End Class Plasma Extends App Field colors:Color[256] Field asin:Int[512] Field pos1:Int = 0, pos2:Int = 0, pos3:Int = 0, pos4:Int = 0, tpos1:Int, tpos2:Int, tpos3:Int, tpos4:Int Field x:Int, index:Int Field imd:ImageData Field width:Int, height:Int Method OnCreate:Int() width = DeviceWidth() height = DeviceHeight() For Local i:Int = 0 Until asin.Length Local rad:Float = (i * 0.703125) * 0.0174532 asin[i] = Sinr(rad) * 1024 End For Local i:Int = 0 Until Floor(colors.Length / 4) colors[i] = New Color colors[i].r = i Shl 2; colors[i].g = 255 - ((i Shl 2) + 1); colors[i+64] = New Color colors[i+64].r = 255; colors[i+64].g = (i Shl 2) + 1; colors[i+128] = New Color colors[i+128].r = 255 - ((i Shl 2) + 1); colors[i+128].g = 255 - ((i Shl 2) + 1); colors[i+192] = New Color colors[i+192].g = (i Shl 2) + 1; End imd = xCanvas.CreateImageData(width, height) SetUpdateRate 60 Return 0 End Method OnRender:Int() tpos4 = pos4 tpos3 = pos3 For Local i:Int = 0 Until height tpos1 = pos1 + 5 tpos2 = pos2 + 3 tpos3 = tpos3 & 511 tpos4 = tpos3 & 511 For Local j:Int = 0 Until width tpos1 = tpos1 & 511 tpos2 = tpos2 & 511 x = asin[tpos1] + asin[tpos2] + asin[tpos3] + asin[tpos4] index = 128 + (x Shr 4) ' index is 8 bit, so need to overflow If index > 255 Then index = index - 255 Else If index < 0 Then index = 255 + index End xCanvas.SetImageDataPixel(imd, j, i, colors[index].r, colors[index].g, colors[index].b, 255) tpos1 = tpos1 + 5 tpos2 = tpos2 + 3 End tpos4 = tpos4 + 3 tpos3 = tpos3 + 1 End pos1 = pos1 + 9 pos3 = pos3 + 8 Cls 0, 0, 0 xCanvas.DrawImageData imd, 0, 0 Return 0 End End Function Main:Int() New Plasma Return 0 End This works very well on my system in Chrome 16 (not so good in IE9). Don't forget to disable "debug" in monk's build options.

frank (Posted 2011) [#9]

Ah! fantastic, the canvas method is good. That's why I asked for 'direct framebuffer access' in Monkey; is that not possible cross platform? Because it's kind of depressing that this kind of thing doesn't work? It's not possible? :)

Richard Betson (Posted 2011) [#10]

hmmmm. I get a blank page after compiling the above example as well as the examples for the HTML5 canvas wrapper. No compile errors. Monkey .48 Chrome 15.0.874.121 m

impixi (Posted 2011) [#11]

Any browser errors? In Chrome press F12 and select the 'console' tab.

Richard Betson (Posted 2011) [#12]

Indeed there is an error in the browser console. This is the only error it list compiling the text example. "Uncaught SyntaxError: Unexpected identifier" It seems to occur in this function: in main.js Function initRenderContext(id) main.js:287 Uncaught SyntaxError: Unexpected identifier { var GCanvas = document.getElementById(id); GCanvasRC = GCanvas.getContext("2d"); Return GCanvasRC; } I get no errors in Monkey and it all seems to compile fine. I'll try it it FireFox and see what it does there, but yesterday I think it was also a blank page there as well. EDIT- FireFox give this console error: [18:29:06.471] missing ; before statement @ http://localhost:53580/main.js:287" FireFox version 8.0 Which is also in the same function as above. EDIT- Same error for the plasma example.

impixi (Posted 2011) [#13]

Thanks. There's a little bug in my JavaScript code. I declared the GCanvas variable inside AND outside the function, probably causing scope confusion. Strange how IE9 and Chrome 16 don't flag the error. Replace the canvasmods.js file with this one: var GCanvas, GCanvasRC; function initRenderContext(id) { GCanvas = document.getElementById(id); GCanvasRC = GCanvas.getContext("2d"); return GCanvasRC; } function setFillGradient(grad) { GCanvasRC.fillStyle = grad; } function setFillPattern(patt) { GCanvasRC.fillStyle = patt; } function setStrokeGradient(grad) { GCanvasRC.strokeStyle = grad; } function setStrokePattern(patt) { GCanvasRC.strokeStyle = patt; } function loadHTMLImage(url) { var img = new Image(); img.src = url; return img; } Let me know if that fixes the problem.

Richard Betson (Posted 2011) [#14]

Success! That really is pretty impressive. I will now proceed to making a cool demo.:) The plasma example was humming on Chrome and FireFox. Your examples all worked on both browsers. The only difference was the textured poly had a red color (the color in the poly) in FireFox and white in Chrome. But, this really rocks and I am amazed by the speed.:p Thanks!