Why the pixel isn't squared?

Processing Coding Questions
1

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:


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

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

2

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.

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 Image 9

3

Yep, your code show them squared.

Thanks man :slight_smile:

But I have another question:

  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 ?

4

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 !

5

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

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

6

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.

7

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.