Does javascript have a blit or memcpy command?

Question

I created my own flip team and, well, its slow and takes forever. I would like to know if javascript has blit or memcpy style blit . Right now I am looping through item by item so that the loops make a copy and it takes "forever."

Here is an example of using my flip function. I run 3 layers, only 1 if full height, with 3 simple animations and fps, which it exceeded by about 35 FPS. Ideally, 3 levels should be held at a much higher FPS level, in the 200+ range that I would expect.

v: 36.8 l0: 36.8 l1: 57.8 l2: 36.8 The FPS layer is the rendering of their buffers, v is the rendering on the canvas using the flip function. (These are FPS from Chrome on Mac)

 v = the screen update, the main flip function listed below. l0 = The bottom fire, its a full height layer l2 = The static noise, its a 1/2 height layer l3 = The top fire, its a 1/4 height layet 

Imagine that you have 9 or 10 layers, the FPS will fall like a stone. In version FF 12 its already unusable ... even the double-digit FPS speed. Opera is at least a double set.

 v:4.2 l0:4.2 l1:4.2 l2:4.2 (FF 12 OSX) v:15.5 l0:15.5 l1:15.5 l2:15.5 (Opera latest OSX) 

My flip function

 flip : function() { var fps = ''; // Combine the layers onto the back buffer for (var l = 0; l < this.layers.length; l++) { fps += 'l' + l + ':' + this.layers[l].fps.toFixed(1) + ' '; var layerWidth = this.layers[l].options.width; var layerHeight = this.layers[l].options.height; for (var x = 0; x < layerWidth; x++) { for (var y = 0; y < layerHeight; y++) { var index = (y*this.layers[l].options.width + x)*4; var r = this.layers[l].buffer[index+0]; var g = this.layers[l].buffer[index+1]; var b = this.layers[l].buffer[index+2]; var a = this.layers[l].buffer[index+3]; if (r|g|b|a != 0) { this.buffer.data[index+0] = r; this.buffer.data[index+1] = g; this.buffer.data[index+2] = b; this.buffer.data[index+3] = a; } } } } fps = 'v:' + this.fps.toFixed(1) + ' ' + fps; this.$fps.html(fps); // blit the buffer this.context.putImageData(this.buffer, 0, 0); // Calculate fps var now = new Date; var thisFrameFPS = 1000 / (now - this.last); this.fps += (thisFrameFPS - this.fps) / 50; this.last = now; var t = this; setTimeout(function() {t.flip.apply(t);}, this.speed); } 

Answer 1

Your code may be improved, but I doubt the speedup will be significant.

That's what I came up with, we note that it is unverified. I suggested that the order in which the layers are processed is not significant if it replaces the first cycle of the cycle with your version.

 function flip () { var fps = ''; // Combine the layers onto the back buffer for (var l = this.layers.length; l--;) { fps += 'l' + l + ':' + this.layers[l].fps.toFixed (1) + ' '; var layerWidth = this.layers[l].options.width; var layerHeight = this.layers[l].options.height; for (var index = 0, x = layerWidth; x--;) { for (var y = layerHeight; y--; index += 4) { var r = this.layers[l].buffer[index+0]; var g = this.layers[l].buffer[index+1]; var b = this.layers[l].buffer[index+2]; var a = this.layers[l].buffer[index+3]; if (r|g|b|a != 0) { this.buffer.data[index+0] = r; this.buffer.data[index+1] = g; this.buffer.data[index+2] = b; this.buffer.data[index+3] = a; } } } } }; 

Assuming that r, g, b, and a are all 8-bit quanta, you might consider packing them into a single int. This will reduce processing in the inner loop. It would be even more efficient to use new arrayBuffer objects