Escolar Documentos
Profissional Documentos
Cultura Documentos
Noções de programação:
exemplos com manipulação
de imagens digitais
Prof. Guilherme Dutra Gonzaga Jaime
Descrição
Propósito
Preparação
Objetivos
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 1/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Módulo 1
Manipulação de dados
Definir instruções para manipulação simples de dados.
Módulo 2
Repetição for
Distinguir a estrutura de repetição for.
Módulo 3
Módulo 4
A estrutura condicional if
meeting_room
Introdução
Ao utilizarmos um computador, nós manipulamos diversos tipos
de software: sistema operacional, aplicativos, editores de texto,
entre outros. Para construir esse software, alguém, um
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 2/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
1 - Manipulação de dados
Ao final deste módulo, você será capaz de definir instruções para manipulação simples de
dados.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 3/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 4/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Figura 1: Pequena imagem de 10 pixels de largura por 10 pixels de altura com fundo branco e
círculo preto ao meio.
BMP
– Bitmap image file ou arquivo de imagem bitmap.
Sig
Passo Instrução
por
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 5/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Car
circ
me
img =
1 arm
newSimpleImage("circulo.bmp");
vari
exe
cha
Est
am
vez
2 img.setZoom(20); orig
ima
arm
vari
Apr
3 print(img);
ima
Vamos praticar?
Prática 1
À esquerda, temos o Código-Fonte; à direita, a Saída resultante do
processamento das instruções fornecidas. Logo abaixo, o botão
Executar, que é a forma como ordenamos ao computador que executa
as instruções fornecidas.
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 6/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
img.setZoom(20);
print(img);
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 7/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Percebeu a diferença?
Considerações
Embora bastante simples, as instruções apresentadas na tabela 1 e na
prática que acabamos de realizar tornaram-nos capazes de instruir o
computador a realizar ampliação de imagens digitais ao nosso
comando.
Dica
Fique à vontade: pratique e experimente com qualquer valor que deseje
para a instrução setZoom. Não tenha medo de errar!
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 8/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Signific
Passo Instrução
portugu
Carrega
circulo.
img = new memóri
1
SimpleImage("circulo.bmp"); armaze
variável
img.
20 veze
tamanh
para a i
armaze
variável
zoom m
2 img.setZoom(20); que 0 (z
equivale
afastam
exemplo
de 0.5 e
um afas
2x.
Obtém
ao pixel
imagem
armaze
3 pixel = img.getPixel(4,4)
variável
atribui e
referênc
variável
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 9/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Instrui o
comput
ajustar
4 pixel.setRed(255)
nível de
para o p
questão
Apresen
5 print(image);
imagem
Tabela 2: modificando um dos pixels de circulo.bmp para que ele fique vermelho.
Guilherme Dutra Gonzaga Jaime.
Resposta
A primeira instrução nova que vemos nela é a do Passo 3, que instrui o
computador a obter a referência ao pixel (4,4) da imagem armazenada
na variável img e, então, a atribuir essa referência à variável pixel.
video_library
Prática 2
A seguir, assista a uma breve contextualização da Prática 1, seguida do
nosso segundo exemplo prático.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 10/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Código-Fonte
img = new SimpleImage( "img/circulo.bmp" );
img.setZoom( 20 );
pixel = img.getPixel( 4, 4 );
pixel.setRed( 255 );
print(img);
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 11/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Note que o pixel (4,4), que fica mais ou menos no meio do círculo, ficou
vermelho.
Considerações
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 12/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Significado e
Passo Instrução
português
Ajusta o níve
vermelho do
conforme o
1 pixel.setRed(número)
informado. O
número deve
entre 0 e 255
Ajusta o níve
verde do pixe
conforme o
2 pixel.setGreen(número)
informado. O
número deve
entre 0 e 255
Ajusta o níve
azul do pixel
conforme o
3 pixel.setBlue(número)
informado. O
número deve
entre 0 e 255
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 13/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Guilherme Dutra Gonzaga Jaime.
Evoluindo a prática
Prática 3
Código-Fonte
img = new SimpleImage( "img/circulo.bmp" );
img.setZoom( 20 );
pixel = img.getPixel( 4, 0 );
pixel.setRed( 255 );
print(img);
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 14/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
library_books computer
arrow_forward
Do português Para a linguagem do
computador
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 15/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Prática 4
Suponha que, em vez de manipular apenas um pixel por vez, conforme
fizemos neste módulo, desejássemos manipular todos os pixels de uma
imagem, digamos de 10x10 pixels (exemplo: circulo.bmp). Se
usássemos o código que aprendemos a escrever, teríamos de escrever
100 vezes a instrução pixel = img.getPixel(), em que, a cada vez,
passaríamos os valores x,y para cada um dos pixels da imagem.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 16/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Questão 1
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 17/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
A pixel = img.getPixel( 0, 0 );
pixel.setRed( 255 );
pixel.setGreen( 0 );
pixel.setBlue( 0 );
B pixel = img.getPixel( 0, 0 );
pixel.setRed( 0 );
pixel.setGreen( 255 );
pixel.setBlue( 0 );
C pixel = img.getPixell ( 0, 0 );
pixel.setRed( 0 );
pixel.setGreen( 0 );
pixel.setBlue( 255 );
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 18/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
E pixel = img.getPixel( 1, 1 );
pixel.setRed( 0 );
pixel.setGreen( 255 );
pixel.setBlue( 255 );
Veja a solução:
Questão 2
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 19/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Sig
Passo Instrução
por
Car
circ
img = new me
1
SimpleImage("circulo.bmp"); arm
var
img
20
tam
par
arm
var
zoo
2 img.setZoom(20); que
equ
afa
exe
de
um
2x.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 20/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Obt
ao
ima
arm
3 pixel = img.getPixel(4,4)
var
atr
refe
var
Ins
com
aju
4 pixel.setRed(255)
nív
par
que
Ap
5 print(image);
ima
Tabela 2: modificando um dos pixels de circulo.bmp para que ele fique vermelho.
Guilherme Dutra Gonzaga Jaime.
2 - Repetição for
Ao final deste módulo, você será capaz de distinguir a estrutura de repetição for.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 21/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Estruturas de repetição
Figura 2: Imagem com 584 pixels de largura e 500 pixels de altura representando um pássaro.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 22/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Neste caso:
Essa nem é uma imagem muito grande, dado que os telefones celulares
atuais são capazes de tirar fotografias de mais de 10 milhões de pixels
(10 megapixels).
Atenção!
Mesmo assim, se o autor de um código de computador, sem usar
estruturas de repetição, tentar escrever um código de computador para
manipular cada um dos pixels da imagem da figura 2, precisará repetir
292 mil vezes as instruções que apontam para determinado pixel
(exemplo: pixel = img.getPixel( x,y )), cada uma delas seguidas com as
instruções de manipulação desejada (exemplo: pixel.setRed(255)).
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 23/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
á té t d i t j
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 24/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
pássaro, até que toda a imagem esteja
completamente preta.
Indentação
Neologismo derivado da palavra inglesa indentation.
Vamos praticar
Prática 1
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 25/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Código-Fonte
img = new SimpleImage("img/passaro.jpg");
pixel.setGreen(0);
pixel.setBlue(0);
}
print( img );
Rodar/Executar
Saída
Instrução 1 expand_more
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 26/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Instrução 2 expand_more
Note que o computador as executará para cada um dos 292 mil pixels
da imagem. Então, temos um total de 876 mil operações a serem
realizadas pelo computador. Ao clicar em Executar, tente observar
quanto tempo o computador leva para ajustar/executar as 876 mil
instruções necessárias para colorir de preto cada um dos 292 mil pixels
da imagem “passaro.jpg” e, depois, apresentar a imagem na tela.
video_library
Prática 2
Vamos seguir assistindo a um vídeo com uma segunda prática.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 27/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Prática 3
Agora, vamos obter o canal alfa vermelho da imagem do pássaro
apresentado na figura 2 com base neste código-fonte:
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 28/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Código-Fonte
img = new SimpleImage("img/passaro.jpg");
// pixel.setRed(0);
pixel.setGreen(0);
pixel.setBlue(0);
}
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 29/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Verde
Azul
Prática 4
Afinal para que serve a estrutura de repetição for?
Atenção!
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 30/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Questão 1
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 31/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
}
print( img );
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 32/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Questão 2
img.getPixel( 0,0 );
pixel.setBlue( 0 );
pixel.setRed( 0 );
A 3.914.400
B 1.304.800
C 2.609.600
D 652.400
E 2.332
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 33/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Expressões
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 34/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
computer computer
print(51) arrow_forward Essa instrução
imprimirá o valor 51 na
tela
Exemplo
print(40+11);
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 35/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Significado em
Passo Instrução
português
Obtém/Lê o valo
atual para o
1 pixel.getRed()
componente RG
vermelho do pix
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 36/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Obtém/Lê o valo
atual para o
2 pixel.getGreen()
componente RG
verde do pixel.
Obtém/Lê o valo
atual para o
3 pixel.getBlue()
componente RG
azul do pixel.
Tabela 4: Dado um pixel da imagem, como saber qual é o valor atual para os componentes RGB
do pixel?
Guilherme Dutra Gonzaga Jaime.
JavaScript
content_copy
1 ultimo = pixel.getRed();
2 pixel.setRed(ultimo*2);
1ª linha
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 37/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
2ª linha
Usa a função pixel.setRed() para informar que o novo valor deste pixel
será o dobro do último valor..
Variável ultimo
Optamos por usar a variável com nome ultimo para representar a
ideia de que o que está armazenado ali é o último valor lido do
componente vermelho do pixel.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 38/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
JavaScript
content_copy
1 pixel.setRed( pixel.getRed()*2 );
Executar a instrução
pixel.getRed() para obter o valor
atual do pixel, que é 50.
Avaliar a expressão
pixel.getRed()*2 e resolvê-la,
multiplicando o valor atual do
pixel por 2 e obtendo o resultado
100.
Executar a instrução
pixel.setRed() usando como
parâmetro o resultado da
operação aritmética do Passo 2,
j l d b d
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 39/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
ou seja, o valor dobrado para o
componente vermelho do pixel,
que é 100.
Com isso, o novo valor RGB para o pixel em questão será: RGB
(100,20,30). Se fizermos o mesmo para todos os pixels de uma imagem,
o usuário perceberá essa alteração como uma imagem com os tons de
vermelho mais destacados.
JavaScript
content_copy
1 pixel.setRed( pixel.getRed()/2 );
JavaScript
content_copy
1 pixel.setRed( pixel.getRed()*0.5 );
Prática 1
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 40/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Figura 4: Imagem de flores em amarelo com 587x330 pixels, totalizando quase 194 mil pixels.
JavaScript
content_copy
1 pixel.setGreen( pixel.getGreen()*0.7 );
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 41/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
print( img );
Rodar/Executar
Saída
Considerações
Reflita sobre a quantidade de operações realizada em um piscar de
olhos pelo computador, dado o código-fonte que geramos.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 43/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Azul 0 0
Vermelho 255 0
Verde 0 255
Magenta 255 0
Ciano 0 255
Preto 0 0
(2,2,2)
(3,3,3)
(4,4,4)
(5,5,5)
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 44/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
(6,6,6)
(252,252,252)
(253,253,253)
Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
video_library
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 45/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
JavaScript
content_copy
1 soma=(pixel.getGreen()+pixel.getGreen()+pixel.getGre
2 media= soma/3;
3 pixel.setRed( media );
4 pixel.setGreen( media );
5 pixel.setBlue( media );
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 46/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 47/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
video_library
Prática 2
Assista ao vídeo com uma segunda prática.
Enigma 5-2-10
Figura 5: Frutas em 6 cores diferentes, com 863 pixels de largura por 535 pixels de altura,
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 48/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
totalizando quase 462 mil pixels.
Esta imagem foi modificada, dividindo, para cada pixel, os valores dos
componentes RGB (vermelho, verde e azul) por 5, 2 ou 10. Veja o
resultado:
Note que a imagem está mais escura, além de ter suas cores
distorcidas.
Vamos praticar!
Recomendação
Para diminuir o número de combinações que você tentará, tenha em
mente que, quando a imagem foi modificada, os valores 5, 10 e 2 foram
usados apenas uma vez cada.
Vamos lá!
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 49/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
}
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 50/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
pixel.setRed( pixel.getRed()*5);
pixel.setGreen(
1 pixel.getGreen()*10);
pixel.setBlue(
pixel.getBlue()*2);
pixel.setRed( pixel.getRed()*5);
pixel.setGreen(
2 pixel.getGreen()*2);
pixel.setBlue(
pixel.getBlue()*10);
pixel.setRed( pixel.getRed()*2);
pixel.setGreen(
3 pixel.getGreen()*5);
pixel.setBlue(
pixel.getBlue()*10);
pixel.setRed( pixel.getRed()*2);
pixel.setGreen(
4 pixel.getGreen()*10);
pixel.setBlue(
pixel.getBlue()*5);
pixel.setRed(
pixel.getRed()*10);
pixel.setGreen(
5
pixel.getGreen()*5);
pixel.setBlue(
pixel.getBlue()*2);
6 pixel.setRed(
pixel.getRed()*10);
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 51/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
pixel.setGreen(
pixel.getGreen()*2);
pixel.setBlue(
pixel.getBlue()*5);
Vamos praticar
Como você deve ter percebido, é muito importante entender que
estamos o tempo todo falando de comunicação. Claro que, tratando-se
da máquina, não podemos nos comunicar com ela da mesma forma que
eu me comunico com você.
Prática 3
Como você viu, o simples comando “torne a imagem um pouco mais
laranja” não poderia ser realizado apenas com estas palavras. Foi
necessário traduzir essa mensagem para código de computador, de
forma que o comando fosse obedecido.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 52/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Código-Fonte
img = new SimpleImage("img/pag-39-2.jpg");
print( img );
Rodar/Executar
Saída
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 53/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
}
print( img );
Rodar/Executar
Saída
Questão 1
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 54/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
E Uma praia.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 55/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Questão 2
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 56/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
B Um homem observando uma árvore.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 57/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
4 - A estrutura condicional if
Ao final deste módulo, você será capaz de distinguir a estrutura condicional if.
video_library
Estrutura condicional
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 58/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Estrutura condicional
Veja a sintaxe de uma declaração if conforme a linguagem de
programação JavaScript:
JavaScript
content_copy
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 59/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Comentário
Na prática, frequentemente vemos uma declaração if ser usada dentro
de uma estrutura de repetição, como a estrutura for. Esse tipo de
combinação permite que problemas bastante interessantes sejam
resolvidos.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 60/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Optamos por usar exemplos com imagens digitais, pois esta é uma
forma muito simples, intuitiva e rápida para você observar os efeitos da
execução de algumas linhas de código de computador. Isso ocorre
porque estamos acostumados a observar imagens do mundo real desde
que nascemos. Então, este é um processo altamente intuitivo para
todos.
Vamos praticar
Prática 1
Considere a seguinte imagem:
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 61/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Azul 0 0
Vermelho 255 0
Verde 0 255
Magenta 255 0
Ciano 0 255
Preto 0 0
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 62/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
(2,2,2)
(3,3,3)
(4,4,4)
(5,5,5)
(6,6,6)
(252,252,252)
(253,253,253)
Vamos experimentar?
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 63/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
pixel.setRed( 120 );
pixel.setGreen( 120 );
pixel.setBlue( 120 );
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 64/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Relembrando
O computador faz exatamente o que ordenamos. Na prática, precisamos
checar três tarefas: para que apenas a região vermelha seja ajustada
para cinza, devemos verificar se o Red é igual a 255, se o Green é igual a
0 (zero), e se o Blue é igual a 0 (zero).
JavaScript
content_copy
Código-Fonte
img = new SimpleImage("img/RGB.png");
pixel.setRed( 120 );
pixel.setGreen( 120 );
pixel.setBlue( 120 );
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 65/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Observe que, com essa ação, você programou para que a região
somente vermelha fosse ajustada para cinza, mas, ao mesmo tempo,
permitiu que as regiões de interseção entre as três cores se
apresentassem sem alteração.
video_library
Prática 2
Preparamos um vídeo abordando outra prática.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 66/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Continuando a praticar
video_library
Que tal praticar um pouco?
Selecionando os pixels do meio-fio!
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 67/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Código-Fonte
img = new SimpleImage("img/calcada.jpg");
pixel.setGreen( 0 );
pixel.setBlue( 0 );
}
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 68/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Repare que boa parte do meio-fio amarelo foi pintado de preto. Porém,
analisando melhor, podemos detectar um problema: parte importante da
calçada e do asfalto foram pintados de preto. Isso ocorre pois essas
são áreas da imagem original em que os pixels são mais
iluminados/claros.
Código-Fonte
img = new SimpleImage("img/calcada.jpg");
pixel.setRed( 0 );
pixel.setGreen( 0 );
pixel.setBlue( 0 );
}
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 69/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Observe que ainda falta nitidez nas cores, como se a tinta do meio-fio estivesse se
espalhado também para a calçada. É necessário mais ajustes.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 70/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 71/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Considerações
Queremos tirar proveito do padrão da natureza que acabamos de
observar.
video_library
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 72/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Então, vamos usar essa observação para construir uma solução mais
inteligente para a instrução if e observar se, desse modo, selecionamos
os pixels em amarelo do meio-fio de forma mais satisfatória. Volte ao
código-fonte desta prática e realize os ajustes destacados em
sublinhado a seguir:
JavaScript
content_copy
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 73/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
pixel.setRed( 0 );
pixel.setGreen( 0 );
pixel.setBlue( 0 );
}
print( img );
Rodar/Executar
Saída
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 74/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
JavaScript
content_copy
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 75/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
pixel.setRed( 0 );
pixel.setGreen( 0 );
pixel.setBlue( 0 );
}
print( img );
Rodar/Executar
Saída
Observe o resultado:
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 76/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Pensamento computacional
O pensamento computacional já é considerado em vários países do
mundo como a competência fundamental usada por todas as pessoas
nas próximas décadas. Assim como a leitura, a escrita e a aritmética,
essa competência será imprescindível para o mercado de trabalho.
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 77/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Comentário
Passo 1
Passo 2
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 78/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Passo 3
Passo 4
Passo 5
Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
Código-Fonte
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 80/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
print( img );
Rodar/Executar
Saída
Questão 1
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 81/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Questão 2
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 82/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 83/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 84/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Considerações finais
Praticamos aqui conceitos primordiais de pensamento computacional
ao exercitarmos noções de programação de computadores com
exemplos de manipulação de imagem.
headset
Podcast
Para encerrar, ouça um resumo dos principais tópicos deste conteúdo.
Explore +
Confira a indicação que separamos especialmente para você!
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 85/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
Referências
CARVALHO, A.; LORENA, A. Introdução à computação: hardware,
software e Dados. Rio de Janeiro: LTC, 2017.
Download material
Relatar problema
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 86/87
20/03/2024, 14:45 Noções de programação: exemplos com manipulação de imagens digitais
https://stecine.azureedge.net/repositorio/00212ti/00187/index.html# 87/87