Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Voyage au centre du cerveau humain ou comment manipuler des données binaires en Javascript par Thomas JARRAND

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Examen on line
Examen on line
Chargement dans…3
×

Consultez-les par la suite

1 sur 58 Publicité

Voyage au centre du cerveau humain ou comment manipuler des données binaires en Javascript par Thomas JARRAND

Télécharger pour lire hors ligne

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 ! ⚡️

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 ! ⚡️

Publicité
Publicité

Plus De Contenu Connexe

Plus par La Cuisine du Web (20)

Plus récents (20)

Publicité

Voyage au centre du cerveau humain ou comment manipuler des données binaires en Javascript par Thomas JARRAND

  1. 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. 2. THOMAS, WEB DEVELOPER.THOMAS, WEB DEVELOPER.
  3. 3. SPINESPINE Université de Bordeaux × Harvard Medical School
  4. 4. Analyser des IRM du cerveau par le grand public sur tablette
  5. 5. IRMIRM Imagerie par Résonance Magnétique
  6. 6. IMAGE VOXELIMAGE VOXEL
  7. 7. my_brain.nii Nifti-1
  8. 8. In web we trust
  9. 9. 1011010001101011100000110010101010000001010100010
  10. 10. LE BINAIRELE BINAIRE
  11. 11. 11 ,, 1 01 0 ,, 1 11 1 ,, 1 0 01 0 0 ,, 1 0 11 0 1
  12. 12. 1 BIT1 BIT == 00 || 11 8 BITS8 BITS == 1 OCTET1 OCTET == 1001011010010110 1024 OCTETS1024 OCTETS ==1 KO1 KO == 8192 BITS8192 BITS
  13. 13. 536,870,912 OCTETS536,870,912 OCTETS
  14. 14. REPRESENTER L'INFORMATIONREPRESENTER L'INFORMATION
  15. 15. NUMÉRISER VOTRE INFORMATIONNUMÉRISER VOTRE INFORMATION
  16. 16. NUMÉRO DE SÉCURITÉ SOCIALENUMÉRO DE SÉCURITÉ SOCIALE 189103818504886
  17. 17. STOCKER LES NOMBRES EN BINAIRESTOCKER LES NOMBRES EN BINAIRE base 10 => base 2
  18. 18. REPRÉSENTER UNE IMAGE EN BINAIREREPRÉSENTER UNE IMAGE EN BINAIRE
  19. 19. Une grille de pixel 1 pixel = 1 couleur 1 couleur = 3 valeurs RVB 1 valeur = 1 entier de 0 à 255
  20. 20. ENTIER SUR 8 BITENTIER SUR 8 BIT 00000000 = 0 11111111 = 255 256 valeurs possibles
  21. 21. 3 x 8 bits = 24 bits 16,777,216 valeurs possibles
  22. 22. 001100100100010100000101010011100101011010101011 506957886171
  23. 23. ENTIER SUR 16 BITENTIER SUR 16 BIT 0000000000000000 = 0 1111111111111111 = 65535 65 536 valeurs possibles
  24. 24. 001100100100010100000101010011100101011010101011 12869135822187
  25. 25. Une chaine binaire n'a pas de signi cation en soi.
  26. 26. MANIPULER DU BINAIREMANIPULER DU BINAIRE EN JAVASCRIPTEN JAVASCRIPT
  27. 27. ARRAYBUFFERARRAYBUFFER 001100100100010100000101010011100101011010101011 const buffer = new ArrayBuffer(byteLength)
  28. 28. TYPEDARRAYSTYPEDARRAYS 00110010 01000101 00000101 01001110 01010110 10101011 const view = new Uint8Array(buffer) [50, 69, 5, 78, 86, 171]
  29. 29. 0011001001000101 0000010101001110 0101011010101011 const view = new Uint16Array(buffer) [12869, 1358, 22187]
  30. 30. ECRITUREECRITURE 11111111 01000101 00000101 01001110 01010110 10101011 view[0] = 255;
  31. 31. ATTENTION AUX DÉPASSEMENTS !ATTENTION AUX DÉPASSEMENTS ! 546 = 1000100010 view[0] = 546; view[0] === 34;
  32. 32. PLEIN D'UTILITAIRES!PLEIN D'UTILITAIRES! Int8Array, Float32Array, Uint8ClampedArray, Uint32Array, ... new Uint8Array(buffer, 2, 4); ArrayBuffer.slice(0, 352);
  33. 33. RECEVOIR DES DONNÉES EXISTANTESRECEVOIR DES DONNÉES EXISTANTES
  34. 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. 35. FileReader const file = document.getElementById('my-file').files[0]; const buffer = new FileReader().readAsArrayBuffer(file);
  36. 36. WebSocket const socket = new WebSocket('ws://localhost'); socket.binaryType = 'arraybuffer'; socket.send(buffer); // --- socket.on('message', (event) => { const buffer = event.data; })
  37. 37. LA SPEC NIFTI-1LA SPEC NIFTI-1
  38. 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. 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. 40. BODY À PARTIR DE L'OCTET 352BODY À PARTIR DE L'OCTET 352 Suite de voxel où 1 voxel = 1 entier.
  41. 41. 46 137 696 octets 46,1 Mo const size = 352 + (length * width * depth) * (bitPerVoxel / 8);
  42. 42. MANIPULER LE BODYMANIPULER LE BODY const body = new Float32Array(buffer, 352);
  43. 43. x d e m o . t o m 3 2 i . f r
  44. 44. POURQUOI C'EST COOL ?POURQUOI C'EST COOL ?
  45. 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. 46. ⚡⚡ RAPIDITÉ DE L'ENCODAGE / DÉCODAGERAPIDITÉ DE L'ENCODAGE / DÉCODAGE
  47. 47. SUPPORTE TOUT, SUPPORTÉ PARTOUT.SUPPORTE TOUT, SUPPORTÉ PARTOUT.
  48. 48. ☠☠ POURQUOI C'EST CHAUD ?POURQUOI C'EST CHAUD ? Pas lisible Rigide Peu de bug
  49. 49. QUELQUES IDÉES D'UTILISATIONQUELQUES IDÉES D'UTILISATION Lire et écrire un format tiers. Jeu en temps réel. Filtres Instagram.
  50. 50. Javascript gère bien le binaire
  51. 51. MERCI !MERCI ! SOURCESSOURCES QUESTIONS ?QUESTIONS ? Spec cation nit -1 Tom32i/binary-brain @Tom32i

×