Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
wiki:tutoriels:ascii-camera-html:accueil [2020/10/15 18:24] bonnetja [Scripts JavaScript] |
wiki:tutoriels:ascii-camera-html:accueil [2020/10/16 11:44] (Version actuelle) bonnetja [Débogage et Infos supplémentaires] |
||
---|---|---|---|
Ligne 25: | Ligne 25: | ||
===== Présentation de l' | ===== Présentation de l' | ||
- | On peut changer la couleur de la typographie et du fond d' | + | On peut changer la couleur de la typographie et du fond d' |
=== Version classique | === Version classique | ||
Ligne 39: | Ligne 39: | ||
Vous pouvez retrouver l' | Vous pouvez retrouver l' | ||
- | Vous pouvez également télécharger les 4 styles d' | + | Vous pouvez également télécharger les 4 styles d' |
+ | * {{ : | ||
+ | * ou en {{ : | ||
+ | |||
+ | ==== Structure du dossier et site ==== | ||
+ | |||
+ | Dézipper votre téléchargement, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Ouvrez un des un des 4 dossiers d' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Ouvrez la page web " | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Autoriser l' | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | |||
====== Explication du programme | ====== Explication du programme | ||
- | Le programme se compose de plusieurs parties, un fichier " | + | Le programme se compose de plusieurs parties, un fichier " |
==== Structure Html ==== | ==== Structure Html ==== | ||
Ligne 194: | Ligne 217: | ||
==== Scripts JavaScript ==== | ==== Scripts JavaScript ==== | ||
- | Les commentaires/ | + | Les commentaires/ |
**__camera.js__** | **__camera.js__** | ||
Ligne 312: | Ligne 335: | ||
**__ascii.js__** | **__ascii.js__** | ||
< | < | ||
+ | // Code de Jacob Seidelin (https:// | ||
+ | //Modifié par Andrei Gheorghe (https:// | ||
+ | // | ||
+ | var ascii = (function() { //créer variable ascii | ||
+ | function asciiFromCanvas(canvas, | ||
+ | |||
+ | |||
+ | var characters = (" .: | ||
+ | |||
+ | var context = canvas.getContext(" | ||
+ | var canvasWidth = canvas.width; | ||
+ | var canvasHeight = canvas.height;// | ||
+ | |||
+ | var asciiCharacters = ""; | ||
+ | |||
+ | // Variable calculant le contraste / tuto: | ||
+ | // https:// | ||
+ | var contrastFactor = (259 * (options.contrast + 255)) / (255 * (259 - options.contrast)); | ||
+ | |||
+ | var imageData = context.getImageData(0, | ||
+ | for (var y = 0; y < canvasHeight; | ||
+ | for (var x = 0; x < canvasWidth; | ||
+ | // obtenir la luminosité de chaque pixel et afficher le caractère correspondant | ||
+ | |||
+ | var offset = (y * canvasWidth + x) * 4; | ||
+ | |||
+ | var color = getColorAtOffset(imageData.data, | ||
+ | |||
+ | // Variable accentuant le contraste de l' | ||
+ | // https:// | ||
+ | var contrastedColor = { | ||
+ | red: bound(Math.floor((color.red - 128) * contrastFactor) + 128, [0, 255]), | ||
+ | green: bound(Math.floor((color.green - 128) * contrastFactor) + 128, [0, 255]), | ||
+ | blue: bound(Math.floor((color.blue - 128) * contrastFactor) + 128, [0, 255]), | ||
+ | alpha: color.alpha | ||
+ | }; | ||
+ | |||
+ | // Calculer la luminosité de chaque pixels / question tuto : | ||
+ | // https:// | ||
+ | var brightness = (0.299 * contrastedColor.red + 0.587 * contrastedColor.green + 0.114 * contrastedColor.blue) / 255; | ||
+ | |||
+ | var character = characters[(characters.length - 1) - Math.round(brightness * (characters.length - 1))]; | ||
+ | |||
+ | asciiCharacters += character; | ||
+ | } | ||
+ | |||
+ | asciiCharacters += " | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | options.callback(asciiCharacters); | ||
+ | } | ||
+ | |||
+ | function getColorAtOffset(data, | ||
+ | return { | ||
+ | red: data[offset], | ||
+ | green: data[offset + 1], | ||
+ | blue: data[offset + 2], | ||
+ | alpha: data[offset + 3] | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | function bound(value, | ||
+ | return Math.max(interval[0], | ||
+ | } | ||
+ | |||
+ | return { | ||
+ | fromCanvas: | ||
+ | options = options || {}; | ||
+ | options.contrast = (typeof options.contrast === " | ||
+ | options.callback = options.callback || doNothing; | ||
+ | |||
+ | return asciiFromCanvas(canvas, | ||
+ | } | ||
+ | }; | ||
+ | })(); | ||
</ | </ | ||
Ligne 318: | Ligne 418: | ||
**__app.js__** | **__app.js__** | ||
< | < | ||
+ | // Code de Jacob Seidelin (https:// | ||
+ | //Modifié par Andrei Gheorghe (https:// | ||
+ | // | ||
+ | //variable fenetre taille | ||
+ | var w = window.innerWidth | ||
+ | || document.documentElement.clientWidth //faire appel à la mesure écran de l' | ||
+ | || document.body.clientWidth; | ||
+ | |||
+ | var h = window.innerHeight | ||
+ | || document.documentElement.clientHeight //faire appel à la mesure écran de l' | ||
+ | || document.body.clientHeight; | ||
+ | |||
+ | (function() { | ||
+ | var asciiContainer = document.getElementById(" | ||
+ | var capturing = false; | ||
+ | |||
+ | camera.init({ //faire démarer la camera | ||
+ | width: (w/7), //utilise variable taille | ||
+ | height: (h/5.2), //utilise variable taille | ||
+ | fps: 25,//nombre image par seconde | ||
+ | mirror: true, //fonction mirroir dans camera, changer par false pour une rotation verticale | ||
+ | |||
+ | onFrame: function(canvas) { | ||
+ | ascii.fromCanvas(canvas, | ||
+ | // contraste: 128, | ||
+ | callback: | ||
+ | asciiContainer.innerHTML = asciiString; | ||
+ | } | ||
+ | }); | ||
+ | }, | ||
+ | |||
+ | onSuccess: | ||
+ | document.getElementById(" | ||
+ | |||
+ | const button = document.getElementById(" | ||
+ | button.style.display = " | ||
+ | button.onclick = function() { | ||
+ | if (capturing) { | ||
+ | camera.pause(); | ||
+ | button.innerText = ' | ||
+ | } else { | ||
+ | camera.start(); | ||
+ | button.innerText = ' | ||
+ | } | ||
+ | capturing = !capturing; | ||
+ | }; | ||
+ | }, | ||
+ | |||
+ | onError: function(error) { | ||
+ | // TO DO: Envoi un message d' | ||
+ | }, | ||
+ | |||
+ | onNotSupported: | ||
+ | document.getElementById(" | ||
+ | asciiContainer.style.display = " | ||
+ | document.getElementById(" | ||
+ | } | ||
+ | }); | ||
+ | })(); | ||
</ | </ | ||
+ | ====== Débogage et Infos supplémentaires ====== | ||
+ | |||
+ | ☛ ATTENTION : ne changez pas l' | ||
+ | |||
+ | ☛ Si vous souhaitez héberger ce fichier sur votre propre site internet, il ne fonctionnera que si vous utilisez un protocole HTTPS (sécurisé) et non http, c'est la norme depuis 2018 pour pouvoir accéder à la caméra, le micro, la localisation, | ||
+ | |||
+ | ☛ Ne fonctionne visiblement pas sur Safari, mais fonctionne sur téléphone. | ||