Example use cases

[mpizenberg]

Since one of the purposes of this library is to make Web APIs relying on typed arrays available, let's just do that ;)

In this blog post introducing typed arrays, the author list APIs making use of typed arrays, providing some examples. It would be awesome to try to implement one example of each use case with this elm-js-type-array package to improve design.

• WebGL example: examples/WebGL/{Main.elm, index.html, webgl.js}
• Canvas 2D example: examples/CanvasImageData/{Main.elm, index.html}
• XMLHttpRequest: examples/XMLHttpRequest/{Main.elm, index.html, answer.bin}
• File: examples/File/{Main.elm, index.html, answer.bin}
• MediaSource
• WebSocket: examples/WebSocket/{Main.elm, index.html}

Blog Post Examples

WebGL: useful to manipulate buffer data, textures, reading pixels, etc.

gl.bufferData(gl.ARRAY_BUFFER, floatTypedArray); // pass around buffer data
gl.texImage2D(gl.TEXTURE_2D, ..., pixels); // add texture
gl.readPixels(0,0,320,240, ..., pixels); // read context

Canvas 2D: manipulating directly the pixel values in RGBA order.

var imageData = ctx.getImageData(0,0,200,100);
var typedArray = imageData.data; // retrieve a Uint8ClampedArray
ctx.putImageData(imageData, 0, 0); // set some values in canvas

XMLHttpRequest: getting array buffers in http requests

xhr.responseType = 'arraybuffer';

File APIs: reading file as buffers

reader.readAsArrayBuffer(file);

MediaSource API: adding sources to media source buffer

var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
sourceBuffer.appenBuffer(buff);

WebSocket API: exchanging data as raw buffers over network

socket.binaryType = 'arraybuffer';

Endianness

Beware that typed arrays are using native hardware endiannes for maximum efficiency. Therefore the first thing to do when receiving a buffer from an external source (file, network, ...) is to check endianness used by the protocol and convert array buffer to the one with correct endianness on your machine.

Third Party Libraries

Some JavaScript libraries are filling gaps in the API. In particular, I suggest having a look at implementation and APIs of:

• DataStream.js: improve reading of data from array buffers
• text-encoding: ease encoding / decoding of strings

[mpizenberg]

Canvas 2D ImageData example done in 80b8491, in folder examples/CanvasImageData/. It's working fine, but with one main issue for performance: every frame, a new array is created, generating a lot of garbage collection. I wonder if providing a dedicated module clearly marked as Mutable with very few functions would make sense for use cases like this one, or WebGL.

[mpizenberg]

Canvas 2D ImageData example done in 80b8491, in folder examples/CanvasImageData/. It's working fine, but with one main issue for performance: every frame, a new array is created, generating a lot of garbage collection. I wonder if providing a dedicated module clearly marked as Mutable with very few functions would make sense for use cases like this one, or WebGL.

[mpizenberg]

A mutable typed array experimentation done in 7d0d625. It enables Canvas 2D ImageData manipulation without garbage collection. See example code in examples/CanvasImageDataMutable.

[mpizenberg]

A mutable typed array experimentation done in 7d0d625. It enables Canvas 2D ImageData manipulation without garbage collection. See example code in examples/CanvasImageDataMutable.

[mpizenberg]

WebGL example done in 0213ec5. Typed arrays are used to pass the vertices attributes at initialization and projection matrices at each animation frame.

[mpizenberg]

WebGL example done in 0213ec5. Typed arrays are used to pass the vertices attributes at initialization and projection matrices at each animation frame.

[mpizenberg]

File example done in de5d04b. A File input is used to load a file, sent through port to call readAsArrayBuffer(), array buffer result sent back to elm through port.

[mpizenberg]

File example done in de5d04b. A File input is used to load a file, sent through port to call readAsArrayBuffer(), array buffer result sent back to elm through port.

[mpizenberg]

XMLHttpRequest example done in 8b733f4. The request is sent through port in JS since there is no support of ArrayBuffer in the Expect type of elm http package. Once array buffer is received in JS land, it is directly sent back through port to elm.

[mpizenberg]

XMLHttpRequest example done in 8b733f4. The request is sent through port in JS since there is no support of ArrayBuffer in the Expect type of elm http package. Once array buffer is received in JS land, it is directly sent back through port to elm.

[mpizenberg]

WebSocket example done in 1accc47. The exchanged data with WebSocket is done through port in JS since there is no support of ArrayBuffer in the kind of data sendable through elm websocket api. The array buffer is extracted in JS from the Blob received and sent directly back to elm as an ArrayBuffer.

[mpizenberg]

WebSocket example done in 1accc47. The exchanged data with WebSocket is done through port in JS since there is no support of ArrayBuffer in the kind of data sendable through elm websocket api. The array buffer is extracted in JS from the Blob received and sent directly back to elm as an ArrayBuffer.