1.
VOYAGE AU CENTRE DU CERVEAU HUMAINVOYAGE AU CENTRE DU CERVEAU HUMAIN
ou comment manipuler des données binaires en javascriptou comment manipuler des données binaires en javascript

2.
THOMAS, WEB DEVELOPER.THOMAS, WEB DEVELOPER.

3.
SPINESPINE
Université de Bordeaux
×
Harvard Medical School

4.
Analyser des IRM du cerveau
par le grand public sur tablette

5.
IRMIRM
Imagerie par Résonance Magnétique

6.
IMAGE VOXELIMAGE VOXEL

7.
my_brain.nii
Nifti-1

8.
In web we trust

9.
1011010001101011100000110010101010000001010100010

10.
LE BINAIRELE BINAIRE

11.
11 ,, 1 01 0 ,, 1 11 1 ,, 1 0 01 0 0 ,, 1 0 11 0 1

12.
1 BIT1 BIT == 00 || 11
8 BITS8 BITS == 1 OCTET1 OCTET == 1001011010010110
1024 OCTETS1024 OCTETS ==1 KO1 KO == 8192 BITS8192 BITS

13.
536,870,912 OCTETS536,870,912 OCTETS

14.
REPRESENTER L'INFORMATIONREPRESENTER L'INFORMATION

15.
NUMÉRISER VOTRE INFORMATIONNUMÉRISER VOTRE INFORMATION

16.
NUMÉRO DE SÉCURITÉ SOCIALENUMÉRO DE SÉCURITÉ SOCIALE
189103818504886

17.
STOCKER LES NOMBRES EN BINAIRESTOCKER LES NOMBRES EN BINAIRE
base 10 => base 2

18.
REPRÉSENTER UNE IMAGE EN BINAIREREPRÉSENTER UNE IMAGE EN BINAIRE

19.
Une grille de pixel
1 pixel = 1 couleur
1 couleur = 3 valeurs RVB
1 valeur = 1 entier de 0 à 255

20.
ENTIER SUR 8 BITENTIER SUR 8 BIT
00000000 = 0
11111111 = 255
256 valeurs possibles

21.
3 x 8 bits = 24 bits
16,777,216 valeurs possibles

22.
001100100100010100000101010011100101011010101011
506957886171

23.
ENTIER SUR 16 BITENTIER SUR 16 BIT
0000000000000000 = 0
1111111111111111 = 65535
65 536 valeurs possibles

24.
001100100100010100000101010011100101011010101011
12869135822187

25.
Une chaine binaire n'a pas de signi cation en soi.

26.
MANIPULER DU BINAIREMANIPULER DU BINAIRE
EN JAVASCRIPTEN JAVASCRIPT

27.
ARRAYBUFFERARRAYBUFFER
001100100100010100000101010011100101011010101011
const buffer = new ArrayBuffer(byteLength)

28.
TYPEDARRAYSTYPEDARRAYS
00110010 01000101 00000101 01001110 01010110 10101011
const view = new Uint8Array(buffer)
[50, 69, 5, 78, 86, 171]

29.
0011001001000101 0000010101001110 0101011010101011
const view = new Uint16Array(buffer)
[12869, 1358, 22187]

30.
ECRITUREECRITURE
11111111 01000101 00000101 01001110 01010110 10101011
view[0] = 255;

31.
ATTENTION AUX DÉPASSEMENTS !ATTENTION AUX DÉPASSEMENTS !
546 = 1000100010
view[0] = 546;
view[0] === 34;

32.
PLEIN D'UTILITAIRES!PLEIN D'UTILITAIRES!
Int8Array, Float32Array, Uint8ClampedArray, Uint32Array, ...
new Uint8Array(buffer, 2, 4);
ArrayBuffer.slice(0, 352);

33.
RECEVOIR DES DONNÉES EXISTANTESRECEVOIR DES DONNÉES EXISTANTES

34.
XMLHttpRequest
const request = new XMLHttpRequest();
request.responseType = 'arraybuffer';
request.open('GET', 'http://my.brain.com/my_brain.nii');
request.addEventListener('load', () => {
const buffer = request.response;
});
request.send();

35.
FileReader
const file = document.getElementById('my-file').files[0];
const buffer = new FileReader().readAsArrayBuffer(file);

36.
WebSocket
const socket = new WebSocket('ws://localhost');
socket.binaryType = 'arraybuffer';
socket.send(buffer);
// ---
socket.on('message', (event) => { const buffer = event.data; })

37.
LA SPEC NIFTI-1LA SPEC NIFTI-1

38.
HEADER SUR 352 OCTETSHEADER SUR 352 OCTETS
40 Nombre de dimensions: 3 (ou 4 )
42 44 46 Largeur, hauteur et profondeur
70 72 DataType et Nombre de bit par voxel
... Information d'échelles, description, etc.

39.
MANIPULER LE HEADERMANIPULER LE HEADER
const header = new DataView(buffer, 0, 352);
const width = header.getUint16(42); // 256
const height = header.getUint16(44); // 256
const depth = header.getUint16(46); // 176
const dataType = header.getUint16(70); // 16 (Float32Array)
const bitPerVoxel = header.getUint16(72); // 32

40.
BODY À PARTIR DE L'OCTET 352BODY À PARTIR DE L'OCTET 352
Suite de voxel où 1 voxel = 1 entier.

41.
46 137 696 octets
46,1 Mo
const size = 352 + (length * width * depth) * (bitPerVoxel / 8);

42.
MANIPULER LE BODYMANIPULER LE BODY
const body = new Float32Array(buffer, 352);

43.
x
d e m o . t o m 3 2 i . f r

44.
POURQUOI C'EST COOL ?POURQUOI C'EST COOL ?

45.
LE POIDSLE POIDS
JSON:JSON: 54 OCTETS (54 CARACTÈRE)54 OCTETS (54 CARACTÈRE)
BINAIRE:BINAIRE: 6 OCTETS (1 + 1 + 2 + 2)6 OCTETS (1 + 1 + 2 + 2)
{ "event": "position", "id": 19, "x": 125, "y": 158 }
[event sur 1 octet][id sur 1 octet][x sur 2 octets][y sur 2 octets]

46.
⚡⚡
RAPIDITÉ DE L'ENCODAGE / DÉCODAGERAPIDITÉ DE L'ENCODAGE / DÉCODAGE

47.
SUPPORTE TOUT, SUPPORTÉ PARTOUT.SUPPORTE TOUT, SUPPORTÉ PARTOUT.

48.
☠☠
POURQUOI C'EST CHAUD ?POURQUOI C'EST CHAUD ?
Pas lisible
Rigide
Peu de bug

49.
QUELQUES IDÉES D'UTILISATIONQUELQUES IDÉES D'UTILISATION
Lire et écrire un format tiers.
Jeu en temps réel.
Filtres Instagram.

50.
Javascript gère bien le binaire

51.
MERCI !MERCI !
SOURCESSOURCES
QUESTIONS ?QUESTIONS ?
Spec cation nit -1
Tom32i/binary-brain
@Tom32i