Bonjour à tous,

je dois encoder des caractères pour les insérer dans une image. mon objectif est de transformer les séquences d'entiers en séquences binaires en vue de créer des loops qui permettront de manager la pixelisation d'une image, ainsi, l'apparition des caractères.

Ici un exemple du type de caractère ainsi que d'encodage que je dois réaliser :

// 0x00 est encodé par 00000000 ce qui donne le patron ........
// 0x00 est encodé par 00000000 ce qui donne le patron ........
// 0x7c est encodé par 01111100 ce qui donne le patron .#####..
// 0x22 est encodé par 00100010 ce qui donne le patron ..#...#.
// 0x22 est encodé par 00100010 ce qui donne le patron ..#...#.
// 0x22 est encodé par 00100010 ce qui donne le patron ..#...#.
// 0x3c est encodé par 00111100 ce qui donne le patron ..####..
// 0x22 est encodé par 00100010 ce qui donne le patron ..#...#.
// 0x22 est encodé par 00100010 ce qui donne le patron ..#...#.
// 0x22 est encodé par 00100010 ce qui donne le patron ..#...#.
// 0x7c est encodé par 01111100 ce qui donne le patron .#####..
// 0x00 est encodé par 00000000 ce qui donne le patron ........
// 0x00 est encodé par 00000000 ce qui donne le patron ........

savez comment passer des lignes d'entiers au binaire comme présenté ci-dessus (exemple : 0x7c est encodé par 01111100). 

J'ai tenté la loop ci-dessous mais c'est un echec complet : 

function convert(text){
  output.value = "";
  for (var i = 0; i < input.length; i++) {

      output.value += input[i].charCodeAt(0).toString(2) + " ";
  }
}

bien à vous,

Laurent

Salut ! 

Tu dois utiliser des décalages binaires ( opérateurs >>, >>>, << ) pour réussir facilement : 

function convert(text){
  for(var i=0; i<8;i++){ // Attention, ici la boucle ne marche que pour de l'hexa, si tu dépasses 8 bits, il faut changer le 8
  	console.log((text >> i) & 1 );
  }
}

0x7c donne 01111100, à chaque tour de boucle on passe au bit suivant en partant de la gauche en gros ça donne : 

i=0 => 0, i=1 => 0, i=2 => 1 ... 

le & 1 te sert à te focaliser sur le dernier bit de ta chaîne observée :

01111100 & 1 => 0

0111110 &1 => 0

011111 & 1 => 1

...

T'as plus qu'à faire if(index==0) afficher(".") if(index==1) afficher("#")

salut

ais-je bien compris ta demande ? https://jsfiddle.net/koha9uzr/ 

EDIT : ha oui ! j'avais pas pensé au décalage binaire : https://jsfiddle.net/koha9uzr/1/ 

-
Edité par LCaba 14 décembre 2017 à 17:12:11

merci à vous JésusDieu et LCaba pour votre accompagnement, comme dirait les états-uniens "he makes it very simple" (y), je teste ça dans la foulée,

bien à vous,

Laurent

-
Edité par Laurent_dchtl 14 décembre 2017 à 21:36:29

LCaba a écrit:

salut

ais-je bien compris ta demande ? https://jsfiddle.net/koha9uzr/ 

EDIT : ha oui ! j'avais pas pensé au décalage binaire : https://jsfiddle.net/koha9uzr/1/ 

-
Edité par LCaba about 7 hours ago

Merci pour les liens.

edit : faille trouvée, j'avais laissé le "i" de la loop au lieu de remplacer par mon "j". deux jours de "headHashe" x'p.

j'ai testé la loop mais malheureusement elle coince dans mon code,

la loop tombe comme en panne et répète les mêmes résultats, je me retrouve donc avec deux lignes au lieu d'un "B". 

vous pouvez faire tourner mon code sur codeboot.org

Ici mon code : 

/* var noir = {r: 0, g:0, b:0}; 


var blanc = {r:255, g: 255, b: 255}; 


var gris = {r: 128, g: 128, b: 128}; 


var rouge = {r:255, g: 0, b: 0}; 


var vert = {r:0, g: 255, b: 0};


var bleu = {r:0, g: 0, b: 255}; */


/* var noir = {r: 0, g:0, b:0}; 


var blanc = {r:255, g: 255, b: 255}; 


var gris = {r: 128, g: 128, b: 128}; 


var rouge = {r:255, g: 0, b: 0}; 


var vert = {r:0, g: 255, b: 0};


var bleu = {r:0, g: 0, b: 255}; */


var jaune = {r:255, g: 255, b: 0}; 


var dessinerTexte = function (x,y,texte,couleur,police,facteur){

	setScreenMode (100, 100) ; 
    
	var horizontal = x ; 
    
	var vertical = y ; 
    
    

	var counter = 0 ; 


	var binaryChecker = [] ; 

	var computed = 1 ; 	

	var locker = 0 ;
  
			var startPointHex = 0 ;
	
			var achievementPointHex = 4 ; 	
    
			var computedHex = texte.substr(startPointHex , achievementPointHex) ;

for (i = 0 ; i < 13 ; i ++ ) {


	    vertical++; 
    	horizontal = x; 
					if(locker == 1) {

                        var computedHex = "" ;
                        startPointHex += 4;
				      	computedHex = texte.substr(startPointHex , achievementPointHex) ;
		 
					}
	
    				locker = 1 ;
    		 
				 	
            for ( j = 0 ; j < 8 ; j++) {
		
                binaryChecker += ((computedHex >> i) & 1 );
                
			if(binaryChecker[counter]  == 1) {

				
			    for (k = 0 ; k < facteur ; k++) {

					
				setPixel(horizontal, vertical, couleur); 		


				horizontal++; 

				
 			     }	counter++;	}  
	
                
             else { horizontal++; 
             
                   counter++;};
                
				
			 }

				
      

				
	
            	
            	
            
				
		}


	};
    
            





    


var hexText = "0x000x000x7c0x220x220x220x3c0x220x220x220x7c0x000x00"  ;

 dessinerTexte (40,40,hexText,jaune,1,3) ; 

bien  à vous,

vous retrouverez deux lignes jaunes, 

Laurent

-
Edité par Laurent_dchtl 16 décembre 2017 à 2:59:02

L'utilisation d'un canvas devrait permettre de construire les images des lettres sans trop de difficultés.

<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
html,body {margin:0;padding:0;text-align:center;background-color:#000;color:#fff;font-family:Courier,monospace}
div {display:block;position:absolute;}
  </style>
</head>
<body>
<div id="pge"></div>
<script>
var wdt=8,hgh=12;
	cnx=document.createElement('canvas');
 	cnx.width=wdt;
	cnx.height=hgh;
	cnt=cnx.getContext('2d');
 	// Cas de la lettre B
		fontSze=Math.floor(hgh);
  		cnt.fillStyle='#000';
   	cnt.fillRect(0,0,wdt,hgh);
   	cnt.fillStyle='#fff';
		cnt.textAlign='left';
   	cnt.textBaseline='top';
    	cnt.font=fontSze+"px monospace";
   	cnt.fillText(String.fromCharCode(66),0,0);

   	pxl=cnt.getImageData(0,0,wdt,hgh).data;
		var str="";
  		for (i=0;i<pxl.length;i+=4) {
        if (!(i%32)) str+="<br>";
		  str+=!pxl[i]?'.':'#';}

		cnt=document.createElement("div");
  		document.body.appendChild(cnt);
      cnt.innerHTML=str;



</script>
</body>
</html>

niquel, 

merci à vous,

Laurent