Coordinates and pixels

function setup() {
// number of pixels in a **cartesian coordinate** plane
  createCanvas(400, 400); 
}

function draw() {
// pixel value in **RGB**
  background(220); 
}

cartesian coordinates (X, Y)

The graph paper from eighth grade ("Cartesian coordinate system") placed (0,0) in the center with the y-axis pointing up and the x-axis pointing to the right (in the positive direction, negative down and to the left). The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top left with the positive direction to the right horizontally and down vertically.

https://archive.p5js.org/learn/coordinate-system-and-shapes.html

On illustrator, it is the same system under the hood, but you’re using premade tools. In code, you are typing out these parameters or setting rules for what the numbers are supposed to be.

The unit: Pixels (R, G, B)

What is a pixel?

• Definition: A pixel (short for "picture element") is the smallest unit of a digital image or display.
• On screens, pixels are typically arranged in a grid to form the complete image.
• Each pixel can display a single color, which is determined by a combination of red, green, and blue (RGB) light intensities.
• When you zoom into an image or a screen, you will start to see individual pixels as small colored squares or dots.

How PIXELS Work