# Why the pixel isn't squared?

**URL:** <https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877>\
**Category:** Coding Questions\
**Created:** [June 15, 2020, 12:23am UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877 "2020-06-15T00:23:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 15, 2020, 12:23am UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/1 "2020-06-15T00:23:08Z")

</div>

Hi,

I’m trying to draw a bitmap with C arrays, but the pixel turned out that it’s not squared and rather rectangular in horizontal shape.

This is the code:

```auto

void setup(){
  size(1280, 640);
}

void draw() {
  background(255);
  loadPixels();
  pixels[0] = color(0);
  pixels[1] = color(0);
  pixels[2] = color(0);
  pixels[3] = color(255); 
  
  
  scale(10);
  updatePixels();
}

```

This is the output:  
 ![pixel](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5e67b6a9251ccb91df2acb8e79242c52188f78e7.png)

Another question, if I want to scale up this pixel. How to do it ?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 15, 2020, 2:14am UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/2 "2020-06-15T02:14:45Z")

</div>

I did a screen print and zoomed in. They look perfectly squared.  
To scale them I used a PImage and now I see them blurred.  
I don’t know what your goal is but maybe its better to use rect().  
Edit: I forgot noSmooth(); When used they are not blurred.

```auto
PImage pi;

void setup(){
  size(200, 200);
  background(255);
  pi = createImage(5, 1, RGB);
  scale(10);
  pi.loadPixels();
  pi.pixels[0] = color(0);
  pi.pixels[1] = color(255);
  pi.pixels[2] = color(0);
  pi.pixels[3] = color(255); 
  pi.pixels[4] = color(0);
  pi.updatePixels();
  image(pi, 0, 0);
}

```

![Image 6](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/52225a458a2a541efa0cbf8944591cc13967120f.png) ![Image 9](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/93068873544e49a32c60b2a8746930ee0094cada.png)

---

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 15, 2020, 6:17am UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/3 "2020-06-15T06:17:13Z")

</div>

Yep, your code show them squared.

Thanks man 🙂

But I have another question:

```auto
  pi.pixels[0] = color(20);
  pi.pixels[1] = color(255);
  pi.pixels[2] = color(0);
  pi.pixels[3] = color(255); 
  pi.pixels[4] = color(0);

```

This array showed me three pixels. But I learned that the 4 array locations relates to one pixel. Is that true ?

---

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 15, 2020, 6:34am UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/4 "2020-06-15T06:34:45Z")

</div>

OK, I got it.

`pi.pixels[0]` using one parameter in `color(80);` access the black/white region.

But using 3 parameters access RGB colors `color(80,100,60);`

Thanks again !

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 15, 2020, 5:44pm UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/5 "2020-06-15T17:44:19Z")

</div>

> [@R1S8K](#):
>
> But I learned that the 4 array locations relates to one pixel. Is that true ?

You may have been accidentally reading documentation for p5.js, a JavaScript mode / library / dialect of Processing.

> The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). [reference | p5.js](https://p5js.org/reference/#/p5/pixels)

However, you are using Java mode Processing, which stores its color data in a different way – the pixels array has one `color` integer per pixel, and that color stores all channels together in a custom bit format:

> From a technical standpoint, colors are 32 bits of information ordered as **AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB** [color / Reference / Processing.org](https://processing.org/reference/color_datatype.html)

---

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 15, 2020, 11:30pm UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/6 "2020-06-15T23:30:07Z")

</div>

> [@jeremydouglass](#):
>
> You may have been accidentally reading documentation for p5.js, a JavaScript mode / library / dialect of Processing.

Oh yeah, I tried to follow “The Coding Train” videos on youtube, but now I think it’s a different story.

OK so it’s the stuff I learned about which is to give the pixel 32-bit color resolution.

Actually I’m not interested in colors now. I’m working with monochrome bitmaps to micrcontroller projects with LCD. The model I’m using now doesn’t need color processing.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 16, 2020, 12:06am UTC](https://discourse.processing.org/t/why-the-pixel-isnt-squared/21877/7 "2020-06-16T00:06:35Z")

</div>

Coding Train has lots of videos – about half “Processing” and, more recently, half “p5.js”.

Whether color or black and white, the key thing is: one `pixels[]` per pixel in Processing.