Tema 05 Noções de Programação - Exemplos Com Manipulação de Imagens Digitais

Prévia do material em texto

Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 1
Tema 05: Noções de Programação - 
Exemplos Com Manipulação de 
Imagens Digitais
Disciplina Pensamento Computacional
Professor Guilherme Dutra Gonzaga Jaime
Data
Semestre 2023.1
Tipo de
Disciplina
Obrigatória
Referências https://estudante.estacio.br/disciplinas/estacio_8108822/temas/5/conteudos/1
Apresentação
Descrição 
Conceito de códigos. Combinação de 
Propósito 
Exercitar importantes habilidades do 
@25/03/2023
Apresentação
Módulo 01
Manipulação singular de dados
Prática 01
Prática 02
Módulo 02
Definição
Prática 01
Prática 02
Módulo 03
Definição
Funções de Manipulação de Pixel no Javascript
Prática 01
Prática 02
Prática 03
Prática 04
Módulo 04
Definição
Prática 01
Prática 02
https://estudante.estacio.br/disciplinas/estacio_8108822/temas/5/conteudos/1
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 2
códigos e instruções para 
computadores. Representação digital 
de imagens: noções básicas.
pensamento computacional, como 
abstração, automação, 
reconhecimento de padrões, análise e 
avaliação, com vistas à compreensão 
do significado da programação.
Módulo 01
Manipulação de dados
Manipulação singular de dados
Manipulação singular significa que não há condições para realizar manipulação de diversos 
dados. 
Prática 01
Objetivo: alterar o zoom da imagem por meio de código
Resolução
//Carrega a imagem circulo.bmp na memória e a armazena na variável que, neste exemplo, chamamos de 
img. 
img = newSimpleImage("circulo.bmp"); 
 
//Estabelece ampliação de 20 vezes o tamanho original para a imagem armazenada na variável img. 
img.setZoom(20); 
 
//Apresenta a imagem na tela. 
img.setZoom(20);
Prática 02
Objetivo: manipular cada bit da imagem 
Resolução
//Carrega a imagem circulo.bmp na memória e a armazena na variável que, neste exemplo, chamamos de 
img. 
img = newSimpleImage("circulo.bmp"); 
 
//Estabelece ampliação de 20 vezes o tamanho original para a imagem armazenada na variável img. 
img.setZoom(20); 
 
//Obtém a referência ao pixel (4,4) da imagem armazenada na variável img e atribui essa referência 
à variável pixel. 
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 3
pixel = img.getPixel(4,4) 
 
//Instrui o computador a ajustar para 255 o nível de vermelho para o pixel em questão. 
pixel.setRed(255) 
//setGreen(valor) 
//setBlue(valor) 
 
//Apresenta a imagem na tela. 
img.setZoom(20);
Módulo 02
Repetição for
Definição
A estrutura de repetiçã for permite realizar uma operação com grande quantidade de dados de 
maneira prática, facilitando a leitura e manutenção do código. As poucas linhas de código 
escritas capturam as mudanças desejadas e são executadas repetidamente, uma vez para 
cada dado que deseja-se manipular. 
Prática 01
Objetivo: fazer com que a imagem fique preta
Resolução
img = newSimpleImage("circulo.bmp"); 
 
for (pixel : img) { 
 pixel.setRed(0); 
 pixel.setGreen(0); 
 pixel.setBlue(0); 
} //A partir daqui o loop é reiniciado até rodar todas as quantidades dos dados, nesse caso são 29
2 mil pixels, rodando 3 instruções, dessa forma, o código irá rodar 876 mil vezes. 
 
print(img); //Imprime a imagem com todos os pixels pretos.
A linha de código for (pixel : img) é lida da seguinte forma: para cada pixel da imagem 
armazenada da variável img, repita uma a uma todas as instruções contidas dentro das 
chaves { }
Prática 02
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 4
Objetivo: fazer com que a imagem assuma 1 cor apenas
Resolução
img = newSimpleImage("circulo.bmp"); 
 
for (pixel : img) { 
 // pixel.setRed(0); 
 pixel.setGreen(0); 
 pixel.setBlue(0); 
} 
 
print(img); //Imprime a imagem com todos os pixels vermelhos.
Quando o for rodar, todos os componentes azuis e verdes serão removidos da imagem, 
resultando uma imagem toda vermelha.
Para saber quantas vezes a estrutura de repetição for irá rodar, para uma imagem, 
especificamente, basta multiplicar a largura da imagem por sua altura (em pixels) e 
multiplicar pela quantidade de instruções contidas dentro do for. 
Módulo 03
As expressões em código de computador
Definição
Expressões permitem combinar diferentes valores para calcular o parâmetro de forma mais 
específica, permitindo escrever códigos de computador que alcançam resultados mais realistas
Funções de Manipulação de Pixel no Javascript
pixel.get<cor>() → retorna o valor atual para o componente RGB do pixel.
pixel.set<cor>() → atribui um novo valor a cor desse pixel
Prática 01
Objetivo: ajustar a cor da imagem para obter a tonalidade laranja reduzindo a intesidade do 
componente green para 70% do valor atual
Resolução
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 5
img = newSimpleImage("img/flores.jpg"); 
 
for (pixel : img) { 
 pixel.setGreen(pixel.getGreen()*0.7) 
} 
print( img ); 
//O for rodará a quantidade de vezes referente ao
 total de pixels dessa imagem, diminuindo a intens
idade da cor verde de todos esses pixels em 70%
Prática 02
Objetivo: deixar a imagem em um tom de cinza
Uma imagem em escala cinza possui, para cada pixel, exatamente o mesmo valor para 
os componentes RG
Resolução
//Obtém o valor da intensidade de cadad cor e soma todos eles. 
 
 
soma = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()); 
//red = 2, green = 3, blue = 4 
//soma = 2+3+4 = 9 
 
media = soma/3; 
//media = 9/3 
//media = 3 
 
//Irá trocar a intensidade de cada cor pelo valor da média, ou seja, todos serão (3,3,3) 
pixel.setRed(media); 
pixel.setGreen(media); 
pixel.setBlue(media); 
Prática 03
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 6
Na imagem a seguir realizamos uma edição de modo que os componentes azul e verde 
ficaram totalmente embaralhados:
Não há como recuperá-los (canais de cores verde e azul). Toda a informação útil da imagem 
está apenas em tons de vermelho. Para tentarmos revelar a imagem original, nossa melhor 
esperança é ordenar ao computador que, para pixel da imagem:
Ajuste os componentes de cores azul e verde para 0 (zero);
Realce os tons em vermelho, multiplicando-os por 10.
Escreva o código-fonte que realiza os passos acima para desvendar o que havia na imagem 
original. Quando conseguir desvendar o enigma, assinale a alternativa que descreve o que 
apareceu na imagem.
Resolução
img = new SimpleImage("img/pag-39-2.jpg") 
 
for (pixel : img) { 
 pixel.setRed(pixel.getRed() * 10); 
 pixel.setGreen(0); 
 pixel.setBlue(0); 
} 
print( img );
Prática 04
A figura a seguir está muito escura:
Paisagem vista é um mar e uma montanha
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 7
Desejamos clareá-la, multiplicando os componentes de cores de cada pixel por 30. Clique aqui 
e escreva, no código-fonte, dentro da estrutura de repetição for, as linhas de código que 
instruirão o computador a realizar essa tarefa:
Quando você tiver realizado isso com sucesso, será possível observar o que há na imagem. 
Assinale a alternativa que descreve o que apareceu na imagem:
Resolução
img = new SimpleImage("img/pag-41.jpg"); 
 
for(pixel:img){ 
 pixel.setRed(pixel.getRed() * 30); 
 pixel.setGreen(pixel.getGreen() * 30); 
 pixel.setBlue(pixel.getBlue() * 30); 
} 
print( img );
Módulo 04
A estrutura condicional if
Definição
A estrutura condicional if expressam ideias de lógica ou seletividade à medida que realizam 
testes, que podem resultar em verdadeiro ou falso e isso determina se aquele bloco de código 
será ou não executado. 
Prática 01
Considere a seguinte imagem:
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 8
Escrev a um código de computador que altere somente a região em vermelho, transformando-
a em cinza, com o seguinte código RGB (120,120,120)
Resolução
img = new SimpleImage("img/RGB.png"); 
 
for(pixel:img) { 
 if(pixel.getRed() == 255){ 
 pixel.setRed(120); 
 pixel.setGreen(120);pixel.setBlue(120); 
 } 
} 
print( img );
Esse código altera não somente a cor azul, mas também a região amarela, branca e magenta, 
pois todas elas possuem R = 255, mas seu G e B não são = 0. Portanto, é necessário verificar 
também se G e B são = 0, da seguinte forma:
img = new SimpleImage("img/RGB.png"); 
 
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 9
for(pixel:img) { 
 if(pixel.getRed() == 255 && pixel.getGreen
() == 0 && pixel.getBlue() == 0){ 
 pixel.setRed(120); 
 pixel.setGreen(120); 
 pixel.setBlue(120); 
 } 
} 
print( img );
Prática 02
Ajuste a imagem abaixo para que o meio fio fique cinza ao invés de amarelo.
Resolução
//O código RGB da cor amarela é (255,255,0). Portanto, verifica-se que tons amarelos são caracteri
zados por níveis equivalentes de vermelho e verde e um nível muito baixo de azul 
 
img = new SimpleImage("img/calcada.jpg"); 
 
for(pixel : img) { 
 //Calcular a média dos valores RGB da imagem 
Tema 05: Noções de Programação - Exemplos Com Manipulação de Imagens Digitais 10
 media = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3 ; 
 
 if(pixel.getRed() && pixel.getGreen() > media){ 
 //Na escala cinza, todos os valores RGB devem ser iguais 
 pixel.setRed(media); 
 pixel.setGreen(media); 
 pixel.setBlue(media); 
 } 
}