[tutorial] efeito negativo nas imagens

E ae galera beleza? Nesse tutorial vamos ver como funciona aqueles programas que transforma a imagem em uma imagem negativa ou vice versa, o foco desse tutorial não são os programas e sim a própria conversão das cores positivas para negativas, tanto que nesse tutorial vamos desenvolver um programinha em delphi para fazer todo esse processo (o mesmo poderia ser feito em outras linguagens também, mudando apenas a forma de fazer ou as bibliotecas e módulos utilizados). Bom galera para começar vamos pegar uma imagem qualquer (como o kodo é um full otaku então ja sabe que sera uma imagem de anime, nééé u.u ). A imagem que o google escolheu foi a da kanna do anime "Kobayashi-san Chi no Maid Dragon"



o que precisamos analisar primeiro nessa imagem é a dimensão dela, sendo uma largura X e uma altura Y normalmente medida em pixel (no caso dessa imagem ela tem 723 de largura e 1024 de altura: 723x1024). Podemos multiplicar a altura pela largura para saber quantos pixeis existem no total, ou seja, quantos pixeis a gente vai alterar ao todo (as vezes a imagem carregada no programa tem a dimensão de uma janela especifica cortando a própria imagem naquela dimensão, nesse caso a dimensão tratada sera a da janela e não a da imagem)

Código:

723 * 1024 = 740352

os pixeis são as menores partes visuais daquela imagem, eles são pequenos blocos de cores que forma aquela imagem como um todo. Se a gente colocar um zoom na imagem podemos ver que ela é constituída por cores diferente a cada pixel (claro que depende do formato do arquivo, muitos formatos de imagem usa vetores para criar uma especie de linhas vetoriais ligando um ponto a outro e assim formando a própria imagem por eles)



outra coisa que precisamos analisar que um único pixel é constituído por 3 cores diferentes formando uma unica cor com base nelas, sendo o padrão RGB (Red Green Blue). Com essas trés cores você pode formar as outras cores (ex: vermelho + verde = amarelo), também é possível usar tonalidades diferentes formando novas cores, as vezes dependendo do sistema ou do formato do arquivo manipulado, ele se limitando a 32 bits de cores no total, sendo 8 bits para cada tonalidade do RGB (0~255 ou 0~ff)

Código:

vermelho (255,0,0)
verde (0,255,0)
azul (0,0,255)
vermelho + verde = amarelo (255,255,0)
vermelho + verde = laraja (255,128,0)
vermelho + azul = violeta (255,0,255)
vermelho + azul + verde = branco (255,255,255)
nenhuma = preto (0,0,0)

agora que a gente já sabe o que é um pixel, vamos dar uma pequena analisada como funciona a conversão para negativo, você pode usar vários programas para converter de positivo para negativo (ex: photoshop, gimp, convert e etc). Vou usar o programa convert que funciona com base em comando (tem para windows e linux). Para usar esse programa basta a gente passar o nome do programa seguido da imagem que vamos converter, seguido do parâmetro negate seguido do arquivo de saída (lembrando que o programa deve esta instalado e na variável de ambiente), na próxima image geramos a dark kanna (sendo ela um dragão maligno de uma dimensão alternativa, sqn '-' )

Código:

convert kanna.bmp -negate kanna_neg.bmp

uma das coisas legais da imagens negativas que ela volta para a cor original, quando você faz outro efeito negativo em uma imagem já negativa (ou seja não a perda de dados nisso)



esses programas que transforma a imagem em negativo pega tal pixel em tal posição especifica e substitui um por um pelo equivalente oposto daquela cor, substituindo uma tonalidade mais alta para a mais baixo sequencialmente. Exemplo a cor preta (0,0,0) ficaria branco (255,255,255). Para a gente saber as cores equivalente bastaria montar uma tabela com duas colunas e incrementar a primeira e decrementar a segunda

Código:

positivo | negativo
-------------
0 | 255
1 | 254
2 | 253
3 | 252
4 | 251
5 | 250
6 | 249
...
250 | 5
251 | 4
252 | 3
253 | 2
254 | 1
255 | 0

para quem é preguiçoso, tem um programinha simples em C que gera essa tabela a cima

Código:

#include <stdio.h>
int main(void){
   int contador1, contador2;
   for(contador1 = 0, contador2 = 255; contador1 < 256; contador1++ ,contador2--){
      printf("%d - %d \n",contador1, contador2);
   }
}

uma outra forma sendo ela até mais simples que construir uma tabela inteira, é utilizando um pouco de aritmética. O calculo é bastante simples, apenas subtraindo a maior tonalidade de cada cor normalmente é o 255 pela tonalidade da cor daquele pixel

Código:

255 - 253 =  2

então o inverso tambem funciona

255 - 2 = 253

então galera vamos construir um simples programa em delphi para mudar cada pixel da imagem usando o componente Image e o canvas para manipular ele (tem uma sequencia de tutoriais meus, perdido em algum lugar por ai sobre canvas no delphi). Com o delphi aberto, coloquei o componente Image (mudei a propriedade stretch do Image para true com isso vai dimensionar a imagem dentro daquela janela mostrando ela toda), um Edit e dois Buttons (o Edit vamos utilizar para seleciona a imagem no PC), o primeiro button vai carregar a imagem para o componente, e o segundo vai aplicar o efeito de negativo na imagem.



no evento onclick do botão onde vamos carregar a imagem, usamos o método Picture.LoadFromFile e passamos o atributo Text daquele Edit

Código:

procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Picture.LoadFromFile( Edit1.Text );
end;

no outro botão a gente faz o codigo para ler e mudar os pixeis. Para a gente ler pixel a pixel em um retângulo (que é o caso da imagem), basta a gente criar dois loops um dentro do outro, quando o primeiro loop incrementar vai ter que incrementar todo o segundo loop antes, e depois vai incrementar o primeiro novamente ficando nesse loop, com isso a gente corre toda a imagem pixel a pixel. Para começar criamos duas variáveis que vão ser as posições no quadrado (vour chamar de posX e posY)

Código:

procedure TForm1.Button2Click(Sender: TObject);
var posX, posY: Integer;
begin
end;

vou usar o loop for e deixar o primeiro loop para ler a altura e o segundo para ler a largura (ou seja o meu programa vai ler coluna a coluna primeiro, quando termina a primeira coluna vai avançar na linha e seguir esse padrão ate o final). Tambem temos que saber o tamanho maximo tanto da largura quanto da altura (podemos usar o atributo Picture.Width e Picture.Height do Image para conseguir esses valores)

Código:

procedure TForm1.Button2Click(Sender: TObject);
var posX, posY: Integer;
begin
  for posX := 0 to Image1.Picture.Height do
  begin
    for PosY := 0 to Image1.Picture.Width do
    begin

    end;
  end;
end;

dentro do segundo for vamos ler a cor naquela posição usando Canvas.Pixels do componente Images, passamos como argumento a variavel posX e posY para ele. Usamos também a função ColorToRGB para um retorno inteiro

Código:

procedure TForm1.Button2Click(Sender: TObject);
var posX, posY, cor: Integer;
begin
  for posY := 0 to Image1.Picture.Height do
  begin
    for PosX := 0 to Image1.Picture.Width do
    begin
        cor := ColorToRGB(Image1.Canvas.Pixels[posX,PosY]);
    end;
  end;
end;

agora temos a cor seguindo um tipo inteiro que é bastante dificil de ler, para a gente separas as cores usamos o AND e o SHR (shift right), basicamente o AND vai zerar todos os bits que não seja referente aquela cor e o shift right vai mover para direita deixando apenas uma cor

Código:

procedure TForm1.Button2Click(Sender: TObject);
var posX, posY, cor, R, G, B: Integer;
begin
  for posY := 0 to Image1.Picture.Height do
  begin
    for PosX := 0 to Image1.Picture.Width do
    begin
        cor := ColorToRGB(Image1.Canvas.Pixels[posX,PosY]);
        R := cor and 255;
        G := cor and 65535 shr 8;
        B := cor and 16777215 shr 16;
    end;
  end;
end;

para terminar o codigo basta atribuir novamente ao Canvas.Pixels usando a função RGB dessa vez para recriar o tipo TColor, aproveitando tambem subtraimos o numero de 255 para fazer o efeito negativo

Código:

procedure TForm1.Button2Click(Sender: TObject);
var posX, posY, cor, R, G, B: Integer;
begin
  for posY := 0 to Image1.Picture.Height do
  begin
    for PosX := 0 to Image1.Picture.Width do
    begin
        cor := ColorToRGB(Image1.Canvas.Pixels[posX,PosY]);
        R := cor and 255;
        G := cor and 65535 shr 8;
        B := cor and 16777215 shr 16;
        Image1.Canvas.Pixels[posX,PosY] := RGB(255 - R, 255 - G, 255 - B);
    end;
  end;
end

compilamos e executamos



por fim aplicamos o efeito negativo nela *-*



bom galera ate um próximo tuto sobre programação e manipulação de imagens \o

by kodo no kami