Como é que um pixel é armazenado no computador?

Os dados de pixel são armazenados como números. Simples e simples. Então, os "valores" dos pixels são armazenados em um "array", que é apenas uma outra forma de dizer "uma tabela"

Para esta explicação, vou usar o RGB simples, uma vez que ele transmite o conceito central, mas sei que existem algumas maneiras diferentes e mais complexas de olhar para os valores dos pixels.

Uma Imagem RGB

P>Você já olhou para o projetor que joga ESPN na parede de um restaurante de pizza nos anos 90 para todos os pais forçados a andar em volta de balões e chapéus de festa? Você já deve ter notado 3 cores cegantes: Vermelho, Verde e Azul. Vermelho, Verde, Azul...RGB... Às vezes, convenções de nomes fazem sentido em Ciência da Computação (não frequentemente, mas às vezes).

Se você já urinou em um abismo azul de tinta da porta-john e notou que seu xixi amarelo torna o azul da piscina verde, ou usou mãos não amantes de chumbo para misturar tinta à base de chumbo na pré-escola, você testemunhou exatamente como o RGB funciona. Misture cores para obter mais cores.

A forma como a cor final é determinada, é baseada na força de cada componente de vermelho, verde e azul. A força total do vermelho, sem verde, e a força total do azul dá-lhe o roxo. Todo o zero para R, G, e B lhe dá preto (ausência de cor), e valores totais para todos os 3 lhe dá branco. Etc, etc. A mistura de cores nem sempre é valor total ou nenhum, é uma escala deslizante entre 0 e 255 (para "cores de 8 bits"). Usando qualquer seletor de cores na maioria das aplicações pode mostrar-lhe como isto funciona:

Isto é do básico do espectro de cores visíveis. Fica muito mais avançado, mas é daí que vem.

Desde que você agora sabe que a cor é armazenada como um valor de 3 números, podemos passar para o seu armazenamento.

Image Arrays

Para uma imagem RGB, os valores de pixel são armazenados como uma matriz tridimensional; Mais especificamente, 3 matrizes bidimensionais separadas. Vermelho é armazenado em uma, Verde na próxima, e Azul na última.

Então vamos começar com uma imagem e ver como ela é armazenada.

A imagem final exibida na tela:

Essa imagem dividida em seus Valores Vermelho, Verde e Azul onde cada imagem é apenas a força de cada cor. Lembra-se do ponto anterior de 0 = preto, e 255 = branco? Isto é apenas mostrando qual valor é armazenado naquele pixel na forma visual:

A grade nessas imagens é mais larga do que elas realmente são na imagem (desde seu pixel por pixel) mas eu as coloquei para mostrar como um array funciona.

O array é essencialmente como uma planilha de Excel onde a célula A1 é o valor mais alto à esquerda do pixel, B1 é o que está à direita disso, A2 é o pixel mais à esquerda na linha 2, e assim por diante até que todos os valores sejam armazenados. Então, lembre-se que precisa haver 3 destes: folha 1 são valores vermelhos, folha 2 são valores verdes, e folha 3 são valores azuis.

Tão parecido para uma imagem de 18px x 9px:

Então, cada valor de pixel tem essencialmente uma coordenada X, Y, e Z para facilitar a navegação. Assim:

[Red, Green, or Blue Array][x-coordenado dentro daquela matriz de cores][y-coordenado dentro daquela matriz de cores] (FYI, às vezes y e x são trocados, depende do código.)

Isso significa que a cada 3 pixels de cor, uma vez que você tenha as coordenadas X e Y, o valor "final" de pixel está apenas expressando o valor armazenado em cada uma dessas matrizes naquela coordenada. Assim:

Red Array, valor de pixel armazenado no slot (20,40): [0][20][40] = 255

Array Verde, valor de pixel armazenado na (20,40) ranhura: [1][20][40] = 128

Bue Array, valor de pixel armazenado na (20,40) ranhura: [2][20][40] = 145

Ultimamente, isto dá-lhe algo como isto:

(255, 128, 145), ou "full strength red, half strength of green , and a little more than half strength of blue" que lhe dá o glorioso pixel que se parece com isto: