# Bug when converting pixel into text value. ASCII

**URL:** <https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092>\
**Category:** Coding Questions\
**Created:** [March 13, 2024, 9:28pm UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092 "2024-03-13T21:28:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RomainGr](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomainGr](https://discourse.processing.org/u/RomainGr)\
**Post date:** [March 13, 2024, 9:28pm UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092/1 "2024-03-13T21:28:44Z")

</div>

Hi,

Sorry I’m unable to explain the issue I have in the title without showing the example.  
So here is [the little p5 sketch](https://cdpn.io/pen/debug/qBwbPNM)

and the [version with the code](https://codepen.io/romaingranai/pen/qBwbPNM?editors=0010)

When you drop an image it vectorises the image, something very simple, goes around each pixel, get the luminance and convert each pixel in a black rectangle (wider rectangle when the pixels are darker).  
You can also see in the top right corner of the screen some kind of mapping of the current image, I’m converting each pixel to a number from 0 to 10 (0,1,2,3,4,5,6,7,8,9,#), but the “ASCII Image” is actually mirrored and rotated, why does it happens?

on line 141

```auto
var lumRounded = Math.round(lum*10) != 10 ? Math.round(lum*10) : '#';

```

on line 171

```auto
if(y == 0 && x != 0){
	document.getElementById('textarea').value += lumRounded + '\n';
} else {
	document.getElementById('textarea').value += lumRounded;
}

```

Why is the ASCII image on the top right mirrored and rotated compared with canvas version?

Thank you.

 ![Screenshot 2024-03-13 at 22.34.38](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/a/6ad524e3f1d638a70a60bd864eedc96b579398c1.jpeg)

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [March 14, 2024, 6:52am UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092/2 "2024-03-14T06:52:41Z")

</div>

Hi @RomainGr,

the problem seems to be order of how you process the image and your line-beak condition …

Cheers  
— mnse

```auto
// I would change this ...
for (let x = 0; x < p.width; x += pixelLevel ) {
  for (let y = 0; y < p.height; y += pixelLevel ) {
// ... to this
for (let y = 0; y < p.height; y += pixelLevel ) {
  for (let x = 0; x < p.width; x += pixelLevel ) {

// ... and this ...
if(y == 0 && x != 0) {
  document.getElementById('textarea').value += lumRounded + '\n';
// ... to this	  
if(y != 0 && x == 0) {
  document.getElementById('textarea').value += '\n' + lumRounded;

```

---

<div class="post-metadata">

**Author:** ![RomainGr](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomainGr](https://discourse.processing.org/u/RomainGr)\
**Post date:** [March 14, 2024, 10:03am UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092/3 "2024-03-14T10:03:38Z")

</div>

Hi @mnse,

Thanks, that’s working now, but still, I’m not sure if I understand why the ascii image wasn’t matching the pixelated.

So instead of going from left to right then going up to down :

```auto
for (let x = 0; x < p.width; x += pixelLevel ) {
  for (let y = 0; y < p.height; y += pixelLevel ) {

```

we are doing it from top to bottom then left to right :

```auto
for (let y = 0; y < p.height; y += pixelLevel ) {
  for (let x = 0; x < p.width; x += pixelLevel ) {

```

and same for the line break.

Can this be done without changing the loop (first x then y)? Well, it’s working and I’m happy to keep it like this 😃 , but I don’t understand (yet), why changing the loop order affects the ASCII result and not the pixelated one.

Thank you.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 14, 2024, 10:32am UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092/4 "2024-03-14T10:32:53Z")

</div>

> [@mnse](#):
>
> ```auto
> // I would change this ...
> for (let x = 0; x < p.width; x += pixelLevel ) {
> for (let y = 0; y < p.height; y += pixelLevel ) {
> // ... to this
> for (let y = 0; y < p.height; y += pixelLevel ) {
> for (let x = 0; x < p.width; x += pixelLevel ) {
> 
> ```

> [@RomainGr](#):
>
> Can this be done without changing the loop (first x then y)?

There is a discussion here about performance benefits of one over the other:

> <https://gamedev.stackexchange.com/questions/75661/java-single-array-best-choice-for-accessing-pixels-for-manipulation>

`:)`

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [March 15, 2024, 7:47am UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092/5 "2024-03-15T07:47:35Z")

</div>

Hi @RomainGr

> [@RomainGr](#):
>
> but I don’t understand (yet), why changing the loop order affects the ASCII result and not the pixelated one.

For the pixelated it doesn’t matter, but maybe below demonstrates you why your ascii is “transposed” …

Cheers  
— mnse

https://editor.p5js.org/mnse_forum/full/s2FMnf6BL

---

<div class="post-metadata">

**Author:** ![RomainGr](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomainGr](https://discourse.processing.org/u/RomainGr)\
**Post date:** [March 17, 2024, 3:07pm UTC](https://discourse.processing.org/t/bug-when-converting-pixel-into-text-value-ascii/44092/6 "2024-03-17T15:07:35Z")

</div>

I think I’ve got it now, took me a bit of time, but the reason is quite simple!

The problem wasn’t about performance tho I understand why one way of doing is more performant now. It’s just about text flow.

The problem is that when you write text, it’s necessarily from left to right and top to bottom (at least in most western countries). When you draw pixels, the position of the pixel is always the same, whether you start from top or bottom, when it’s about text, the “flow” of the text is set based on the computer “language settings”. That’s why changing the loop affects only the textarea and not the rendering in pixels.

I’ve been actually able to reproduce the “bug” by simply change 2 css properties on the textarea :

```auto
writing-mode: vertical-lr;
text-orientation: revert-layer;

```

Let me know if I understood right!

 ![Screenshot 2024-03-17 at 16.02.20](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/abe9e7bff80c3e2254a2ad1e28b999765033fd9a.jpeg)