https://pixelmonkeys.org/wp-content/themes/pixelmonkeys/p5/binary.js

1var widthCells = 48;
2var heightCells = 48;
3var cellSize = 2;
4var go = 1;
5var colorType = 4; //0 is color, //1 is bw, //2 is custom
6 
7var radix = 0;
8
9let img;
10
11var d = 0;
12
13function setup() {
14  
15  var canvas = createCanvas(400, 400);
16  canvas.parent('sketch-holder');
17
18  input = createFileInput(handleFile);
19  //input.position(542, 1410);
20  input.parent('file-holder');
21
22
23  //https://p5js.org/reference/#/p5/createFileInput
24	
25	
26	noSmooth();
27  
28  
29 
30	
31  
32  //createCanvas(400, 400);
33  
34  //var myNum = 9007199254740992;
35  //alert(myNum.toString(2).length);
36}
37
38function draw() {
39	
40background(200);	
41
42  colorType = $("input[name='colorType']:checked").val();	
43  
44  radix = parseInt($("#radix").val());
45  if(colorType==2){
46	  radix = 8;
47  }
48
49
50  if(d==2){
51	img.resize(parseInt(widthCells),parseInt(heightCells));
52	if(colorType==1){
53		img.filter(GRAY);
54	}
55	img = makeDithered(img, 1);
56	var str = getDitherString();
57	
58	var mine = bigInt(str,radix);
59	
60	
61	$("textarea#myNumber").val(mine);
62	
63	//alert(mine);
64	//alert(str);
65	//image(img,0,0);
66	d = 3;
67  }	
68	
69  if(d==1){
70	  d = 2;
71  }
72		
73  
74  if(d==4){
75	  //console.log(img.width);
76	  //console.log(img.height);
77	 image(img,0,0,width,height);
78  }
79	
80  
81  //ellipse(mouseX,mouseY,100,100);
82  //radix = parseInt($("#radix").val());
83  //var myNumber = parseInt($("#myNumber").val());
84  var myNumber = $("#myNumber").val();
85  var str = getBinary(myNumber,parseInt(widthCells),parseInt(heightCells),radix);
86 
87  
88  var xCount = 0;
89  var yCount = 0;
90  
91  var res = str.split("");
92  
93  for(var i=0;i<res.length;i++){
94	
95	var col = getColor(res[i]);
96	
97	noStroke();
98	fill(col);
99	rect(xCount*cellSize,yCount*cellSize,cellSize,cellSize);
100	
101	xCount+=1;
102	if(xCount>=widthCells){
103		xCount = 0;
104		yCount += 1;
105	}
106  }
107  
108  if(d==3){
109	  d=4;
110  }
111  //filter(BLUR,4);
112  //text(represent,mouseX,mouseY);
113}
114
115
116function handleFile(file) {
117  print(file);
118  if (file.type === 'image') {
119    //img = createImg(file.data);
120    img=loadImage(file.data);
121	//img.hide();
122	d = 1;
123  } else {
124    //img = null;
125	d = 0;
126  }
127}
128
129
130function getColor(char){
131	
132	
133	if(colorType==1){
134	   var val = parseInt(map(char,0,(radix-1),0,255));
135	   return color(val,val,val);
136	}
137	else{
138	   if(char==0){
139		   return color(0,0,0);
140	   }
141	   else if(char==1){
142		   return color(255,255,255);
143	   }
144	   else if(char==2){
145		   return color(255,0,0);
146	   }
147	   else if(char==3){
148		   return color(0,255,0);
149	   }
150	   else if(char==4){
151		   return color(0,0,255);
152	   }
153	   else if(char==5){
154		   return color(255,255,0);
155	   }
156	   else if(char==6){
157		   return color(255,0,255);
158	   }
159	   else if(char==7){
160		   return color(0,255,255);
161	   }
162	}
163	
164}
165
166//get the binary
167
168//string split-- taking it by each character...
169
170//track the xCount and yCount...
171
172//color in black or white divs based on this...
173
174//or instead of divs.. i can just use processing to write out the image..
175
176
177function getBinary(num, ww, hh, radixNum){
178	//var val = (num).toString(colorNumber);
179	
180	var val = bigInt(num).toString(radixNum);
181	var total = ww*hh;
182	var str = pad(val,total);
183	
184	return str;
185}
186
187function pad(num, size) {
188    var s = num+"";
189    while (s.length < size) s = "0" + s;
190    return s;
191}
192
193//--------------------------------------------------
194
195//https://editor.p5js.org/codingtrain/sketches/-YkMaf9Ea
196
197function imageIndex(img, x, y) {
198  return 4 * (x + y * img.width);
199}
200
201function getColorAtindex(img, x, y) {
202  let idx = imageIndex(img, x, y);
203  let pix = img.pixels;
204  let red = pix[idx];
205  let green = pix[idx + 1];
206  let blue = pix[idx + 2];
207  let alpha = pix[idx + 3];
208  return color(red, green, blue, alpha);
209}
210
211function setColorAtIndex(img, x, y, clr) {
212  let idx = imageIndex(img, x, y);
213
214  let pix = img.pixels;
215  pix[idx] = red(clr);
216  pix[idx + 1] = green(clr);
217  pix[idx + 2] = blue(clr);
218  pix[idx + 3] = alpha(clr);
219}
220
221// Finds the closest step for a given value
222// The step 0 is always included, so the number of steps
223// is actually steps + 1
224function closestStep(max, steps, value) {
225  return round(steps * value / 255) * floor(255 / steps);
226}
227
228function getDitherString(){
229	img.loadPixels();
230	var str = "";
231	for (let y = 0;

231 y < img.height; y++) {
232		for (let x = 0; x < img.width; x++) {
233			let clr = getColorAtindex(img, x, y);
234			let oldR = red(clr);
235			if(colorType==1){
236				str+= parseInt(map(oldR,0,255,0,parseInt(radix-1)));
237			}
238			else if(colorType==2){
239				let myR = parseInt(red(clr));
240				let myG = parseInt(green(clr));
241				let myB = parseInt(blue(clr));
242				
243				if(myR==0 && myG==0 && myB==0){
244					str+="0";
245				}
246				if(myR==255 && myG==255 && myB==255){
247					str+="1";
248				}
249				if(myR==255 && myG==0 && myB==0){
250					str+="2";
251				}
252				if(myR==0 && myG==255 && myB==0){
253					str+="3";
254				}
255				if(myR==0 && myG==0 && myB==255){
256					str+="4";
257				}
258				if(myR==255 && myG==255 && myB==0){
259					str+="5";
260				}
261				if(myR==255 && myG==0 && myB==255){
262					str+="5";
263				}
264				if(myR==0 && myG==255 && myB==255){
265					str+="6";
266				}
267			}
268			
269			//console.log(oldR);
270		}
271	}
272	return str;
273}
274
275function makeDithered(img, steps) {
276  img.loadPixels();
277
278  //console.log(img.width);	
279  
280  for (let y = 0; y < img.height; y++) {
281    for (let x = 0; x < img.width; x++) {
282      let clr = getColorAtindex(img, x, y);
283      let oldR = red(clr);
284      let oldG = green(clr);
285      let oldB = blue(clr);
286      let newR = closestStep(255, steps, oldR);
287      let newG = closestStep(255, steps, oldG);
288      let newB = closestStep(255, steps, oldB);
289
290      let newClr = color(newR, newG, newB);
291      setColorAtIndex(img, x, y, newClr);
292	  
293	  //console.log(newClr);
294
295      let errR = oldR - newR;
296      let errG = oldG - newG;
297      let errB = oldB - newB;
298
299      distributeError(img, x, y, errR, errG, errB);
300    }
301  }
302
303  img.updatePixels();
304  return img;
305}
306
307function distributeError(img, x, y, errR, errG, errB) {
308  addError(img, 7 / 16.0, x + 1, y, errR, errG, errB);
309  addError(img, 3 / 16.0, x - 1, y + 1, errR, errG, errB);
310  addError(img, 5 / 16.0, x, y + 1, errR, errG, errB);
311  addError(img, 1 / 16.0, x + 1, y + 1, errR, errG, errB);
312}
313
314function addError(img, factor, x, y, errR, errG, errB) {
315  if (x < 0 || x >= img.width || y < 0 || y >= img.height) return;
316  let clr = getColorAtindex(img, x, y);
317  let r = red(clr);
318  let g = green(clr);
319  let b = blue(clr);
320  clr.setRed(r + errR * factor);
321  clr.setGreen(g + errG * factor);
322  clr.setBlue(b + errB * factor);
323
324  setColorAtIndex(img, x, y, clr);
325}