Parcourir l’intérieur de votre cerveau, sur votre téléphone, uniquement avec des technologies web : c’est possible ! Et si je vous montrais comment on fait ? On en profitera pour se demander : – Une IRM c’est quoi au juste ? – Comment on stocke une image dans un fichier ? – Comment ça marche le binaire pour un humain ? – Javascript sait faire ça !? – À quoi tout cela peut-il nous servir dans nos quotidiens de dev ? Un talk avec des vrais morceaux de science, des 0, des 1, des exemples concrets et une démo live ! ⚡️

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

8. IRMIRM
Imagerie par Résonance Magnétique

11. IMAGE VOXELIMAGE VOXEL

12. my_brain.nii
Nifti-1

13. In web we trust

14. 1011010001101011100000110010101010000001010100010

15. LE BINAIRELE BINAIRE

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

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

18. 536,870,912 OCTETS536,870,912 OCTETS

19. REPRESENTER L'INFORMATIONREPRESENTER L'INFORMATION

20. NUMÉRISER VOTRE INFORMATIONNUMÉRISER VOTRE INFORMATION

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

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

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

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

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

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

27. 001100100100010100000101010011100101011010101011
506957886171

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

29. 001100100100010100000101010011100101011010101011
12869135822187

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

32. MANIPULER DU BINAIREMANIPULER DU BINAIRE
EN JAVASCRIPTEN JAVASCRIPT

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

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

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

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

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

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

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

41. 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();

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

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

44. LA SPEC NIFTI-1LA SPEC NIFTI-1

45. 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.

46. 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

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

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

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

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

51. POURQUOI C'EST COOL ?POURQUOI C'EST COOL ?

52. 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]

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

54. SUPPORTE TOUT, SUPPORTÉ PARTOUT.SUPPORTE TOUT, SUPPORTÉ PARTOUT.

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

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

57. Javascript gère bien le binaire

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