Discussion :

[SylvainPV]

Un 360° de ta page. Je l'ai testé sur Firefox en dernière version, ça fonctionne.

[Kaamo]

héhé fun
Comme l'easter egg lors d'une recherche "do a barrel roll" Google en somme. Mais je me demande s'il le fait en 139 caractères
D'ailleurs 138 avec le point virgule final en moins

@NoSmoking, excellent ! Mais ça ne semble pas passer sur Chrome

[Kaamo]

Afficher une image en ascii : http://jsfiddle.net/Kaamo/Vv92w/
En 102 caractères. J'aurai peut-être pu inclure les conversions canvas, ça aurait pu passer dedans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function imgToAscii(d,w,h,t,s,i,o){
for(s=i=0;i++<w*h;s+=i%w?'.;1@'[(d[o+3]?(d[o]+d[o+1]+d[o+2])/3:0)*0.0156^0]:'<br>')o=i*4;t.innerHTML=s
})(dataCanvas, w, h, tdResultat)

dataCanvas est un tableau contenant les données rgba de l'image. (on dessine l'image grâce à canvas préalablement puis on récupère les données dudit canvas)
w, h la largeur et la hauteur de l'image d'origine
tdResultat où est affiché l'ascci

Plus de détails et explications dans le fiddle. On est limité par le SOP, du coup j'ai topé une image interne de jsfiddle pour illustrer le propos.
En local, j'ai testé avec le logo de DVP et ça rend plutôt pas mal avec seulement quatre caractères : .;1@. Avec plus de caractères, on peut affiner le rendu final je pense au niveau du contraste.

Je joue pas mal avec les ratio donc ça peut merder sur certains écrans et ça ne semble pas marcher avec les grosses images. On dirait que l'affichage est limité dans la table

[NoSmoking]

Que dire de plus....

ha! si
il te faut démarrer la boucle par un for(s=i=''; pour éviter un disgracieux 0 en haut à gauche et un point de trop sur la première ligne en haut à droite.

Je mets pour les esthètes un copie d'écran sous FireFox
encore

[Kaamo]

Merci ! Mais j'avais déjà réalisé un truc similaire à l'époque en m'étant inspiré de codes existants, c'était donc un simple portage donc c'est pas vraiment un exploit

il te faut démarrer la boucle par un for(s=i=''; pour éviter un disgracieux 0 en haut à gauche

C'était pour sauver un caractère. Vu la taille des caractères me suis dit que ça ne se verrait pas Mais oui, poru 1 de plus on peut se permettre

en fait ça se simplifie encore ... en 97 :
52e-4 : 4 / 255 / 3 (avec 4 : taille du tableau de correspondance, 255 pour la couleur, 3 pour la moyenne rgb)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(s=i='';i++<w*h;s+=i%w?'.;1@'[(d[o=i*4+3]?d[o]+d[o+1]+d[o+2]:0)*52e-4^0]:'<br>');t.innerHTML=s

Du coup, je vais inclure les transformations canvas pour pouvoir passer en paramètres une image carrément

[SylvainPV]

C'est vraiment cool ça

En plus on peut modifier le contraste à la volée en diminuant la constante 52e-4

Au fait, tu peux remplacer <br> par "\n", ça marche aussi et c'est plus propre. Et pourquoi utiliser un tag table avec une seule cellule ?

Tu peux caser le getImageData dans les 140 chars, et passer une fonction d'affichage de sortie plutôt qu'un élément HTML.

Voilà ce que ça donne : http://jsfiddle.net/Vv92w/12/

Enfin, comme caractères je verrais bien ceux là plutôt : ░▒▓█

[Kaamo]

Au fait, tu peux remplacer <br> par "\n",

En faisant ça, l'image se dédouble. Du coup obligé de jouer sur le line-height et le font-size ce qui agrandit l'image d'origine considérablement

Et pourquoi utiliser un tag table avec une seule cellule ?

Le formatage se fait bien dans un td. Je n'ai pas réussi à avoir la même précision que ce soit avec un span ou un div. C'est peu-être possible en jonglant mieux avec le CSS, je suis pas assez calé pour trouver l'astuce

Tu peux caser le getImageData dans les 140 chars, et passer une fonction d'affichage de sortie plutôt qu'un élément HTML.

Ouais ! On peut même caser le drawImage je pense aussi. Ainsi on ne pourra passer à la fonction que l'élément image cible directement

Enfin, comme caractères je verrais bien ceux là plutôt : ░▒▓█

ça fait pas terrible niveau contraste je trouve, chez toi si ?

[Kaamo]

135 caractères avec le canvas à l'intérieur.

Il faut passer à la fonction :
- le contexte canvas
- l'élément image
- la largeur / hauteur
- la fonction de rendu

Au préalable, il faut récupérer un élément image. Lui passer un src, et exécuter la fonction lorsque l'image est bien chargée.

Enfin, il faut écrire le résultat dans un td et bien configurer le CSS pour un affichage optimal (dépendant de l'écran à priori)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var imgHTML  =  document.getElementById('imageBase')
imgHTML.src = '../../../img/initializing.png';
 
imgHTML.onload = function() {
  (function imgToAscii(c,e,w,h,p,s,i,o){
  for(c.drawImage(e,s=i='',0),d=c.getImageData(0,0,w,h).data;i++<w*h;s+=i%w?'.;1@'[(d[o=i*4+3]?d[o]+d[o+1]+d[o+2]:0)*5e-3^0]:'<br>');p(s)
  })(document.createElement('canvas').getContext('2d'), this, this.offsetWidth, this.offsetHeight, function(result){document.getElementById('resultat').innerHTML = result;})
}

http://jsfiddle.net/Kaamo/Vv92w/

Bref, y'a quand même pas mal de "il faut"

[SylvainPV]

En faisant ça, l'image se dédouble. Du coup obligé de jouer sur le line-height et le font-size ce qui agrandit l'image d'origine considérablement

Je ne vois pas ce problème. Sur Google Chrome en tout cas, j'ai exactement le même résultat avec <br> et \n

Le formatage se fait bien dans un td. Je n'ai pas réussi à avoir la même précision que ce soit avec un span ou un div. C'est peu-être possible en jonglant mieux avec le CSS, je suis pas assez calé pour trouver l'astuce

J'ai du mal à comprendre ce que ça change en matière de précision. C'est toujours du texte à chasse fixe dans tous les cas, ça devrait bien se comporter.

ça fait pas terrible niveau contraste je trouve, chez toi si ?

C'est parce que le line-height et le letter-spacing sont trop resserrés, ça se marche dessus et ça fait trop foncé. Je pense qu'on peut apporter une granularité à 8 niveaux de gris plutôt que quatre, et se servir des caractères ombres pour mieux présenter les dégradés foncés.

[Kaamo]

Sur le fiddle tel qu'il est actuellement, si je remplace <br> par \n, ça dédouble l'image ascii finale. Et ceci aussi bien sur le dernier Chrome que le dernier Firefox.

En effet, ça marche bien dans une div par exemple. Il suffisait de retirer display: inline;
J'ai épuré le CSS dans la dernière version du fiddle.

Oui, il faudrait tester avec 8 niveaux, calculer la nouvelle constance en conséquence et adapter le CSS. Un plus grand espacement des lettres, une taille d'écriture réduite :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
div {
    letter-spacing: 2px;
    font-size: 1px;
    line-height: 2px;
    font-family: "courier new";
}

[Auteur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function message()
{
    alert("Vous êtes une bande de cinglés !\nBravo pour ce travail !");
}

je tiens en moins de 140 caractères ?

[SylvainPV]

Ah oui j'ai reproduit l'effet du dédoublement ! Avec des images plus petites, elle s'affiche même 3 voire 4 fois. C'est incompréhensible
En augmentant la font-size ou en mettant letter-spacing:1px, on n'a plus le problème : http://jsfiddle.net/Vv92w/19/

[Kaamo]

En attendant, copier/coller cela dans la console avec votre site web préféré correctement chargé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
for(i=0;img=document.images[i++];)n=new Image(),n.src=img.src,n.onload=function() {
(function imgToAscii(c,e,w,h,p,s,i,o){
for(c.drawImage(e,s=i='',0),d=c.getImageData(0,0,w,h).data;i++<w*h;s+=i%w?'.:1@'[(d[o=i*4+3]?d[o]+d[o+1]+d[o+2]:0)*5e-3^0]:'\n');p(s)
})(document.createElement('canvas').getContext('2d'), this, this.offsetWidth || this.width, this.offsetHeight || this.height, function(result){console.log(result);})
}

edit : la home de DVP par exemple. C'est limité par la SOP aussi

[SpaceFrog]

petit souci d'overflow ...

[Kaamo]

Sur la home de developpez.com par exemple ? ça passe bien chez moi. Mais oui, s'il y a trop de données sur la page

[NoSmoking]

Tu peux régler ton problème de \n en utilisant une balise <pre>.

Par contre je note que ton premier code fonctionnait sous Opéra 12.15 mais plus le dernier, on n'obtient que des points, mais je ne pense pas que cela soit bien grave

[Kaamo]

Bien vu pour <pre>

[SylvainPV]

Je ne comprends pas, si tu utilises document.images sur une page déjà chargée, pourquoi recréer des éléments Image et attendre le onload ? Autant utiliser les éléments de la page directement.


Sinon j'ai un peu dépassé les 140 caractères, mais j'ai voulu ajouter la couleur
D'ailleurs ça m'a permis de voir une erreur dans ton code, la composante rouge est à d[o+1] et non d[o]

http://jsfiddle.net/Vv92w/22/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function onImageLoaded() {
    //... Début des 140bytes ici ...
    (function imgToAscii(c,e,w,h,p,s,i,o){
        for(c.drawImage(e,s=i='',0),d=c.getImageData(0,0,w,h).data;i++<w*h;o=i*4+3,s+=i%w?"<font style='color:rgb("+d[o+1]+','+d[o+2]+','+d[o+3]+")'>"+' ░▒▓'[(d[o]?d[o+1]+d[o+2]+d[o+3]:0)*5e-3^0]+"</font>":'\n');p(s)
})(document.createElement('canvas').getContext('2d'), this, this.offsetWidth, this.offsetHeight, function(result){document.getElementById('resultat').innerHTML = result;})
}

[Kaamo]

Ça ne fonctionne pas en réutilisant le src des éléments de la page. Je dois avouer ne pas avoir pris le temps de creuser le pourquoi du comment ! Ou alors je m'y suis mal pris.

Bonne idée pour les couleurs ! Ça commence à avoir de la gueule ! :-)

[NoSmoking]

Bonne idée pour les couleurs ! Ça commence à avoir de la gueule ! :-)

Cela me rappelle l'époque des demomakers, des 256o ou 4k

Dans un autre registre, manipulation du DOM...

Suppression d'une lettre dans une page WEB (c'est case sensitive sorry!)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function(n,l){
t='nodeType';c='childNodes';d='data';function f(n){if(n[t]==3)n[d]=n[d].split(l).join('');if(n[t]==1)for(var i=0;n[c][i];++i)f(n[c][i])}f(n)
})(document.body, 'e'); // e est la lettre à supprimer

...pile-poil la maille 140 caract., pas réussi à faire moins!

PS: ne pas supprimer le var dans la boucle for la fonction est récursive