COMPILAÇÃO DE EXERCíCIOS DE

PROGRAMAÇÃO MULTIMÉDIA

2 de maio de 2023

Licenciatura em Design e Multimédia

Departamento de Eng. Informática
Universidade de Coimbra
Conteúdo

0 Revisões 1
0.1 Bolas e Quadrados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2 Cursores deslizantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.3 Grelha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
0.4 Gráfico de Linhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
0.5 Bolas à roda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
0.6 Sub-grelhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1 Áudio 6
1.1 Bola que colide com bordo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Bola “panorâmica” que colide com bordo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Múltiplas bolas “panorâmicas” que colidem com bordo . . . . . . . . . . . . . . . . . . . . 7
1.4 Bateria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.5 Bate Palmas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6 Volume Visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7 Círculo para posição e amplitude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.8 Visualização de Volume em Barra de LEDs . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.9 Visualização de posição e análise espectral . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.10 Visualização de Bandas de Frequência em Barras de LEDs . . . . . . . . . . . . . . . . . . 10
1.11 Visualização de volume e deteção de batida . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.12 Análise espectral de sinais sinusoidais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.13 Análise FFT de onda quadrada versus ruído branco . . . . . . . . . . . . . . . . . . . . . 15
1.14 Visualizador baseado na posição e FFT . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2 Imagem 16
2.1 Rato sobre imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2 Redimensionar imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3 Stop motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.4 Grelha de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.5 Sintetizar gradiente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.6 Gradiente sobre imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.7 Animação de imagem de avião . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.8 Pontilhismo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.9 Alteração de Imagem e geração de Som . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.10 Transparência com máscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.11 Lanterna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.12 Mudança de cor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.13 Mudança de Brilho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

i
3 Estruturas de Dados: ArrayLists 26
3.1 Fita de um Filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2 Bolas na horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.3 Faixas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.4 Tinta que Desaparece . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.5 Bolas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.6 Quadrados com escolha de cor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.7 ArrayLists e imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4 Texto 31
4.1 Strings e Tipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.1.1 Concatenar ao Centro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.1.2 Escreve Palavras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.1.3 Espreitar sub-cadeias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.1.4 Chuva de Carateres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.1.5 Animação de carateres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.1.6 Grelha de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.2 Ficheiros de Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.1 Animar linhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.2 Mostrar linhas pares / ímpares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.3 Codificar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.4 Mostrar contexto de palavra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.2.5 Guardar Iniciais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.2.6 Funções sobre conteúdo de ficheiro . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.2.7 Bolas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.8 Configurar Animação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.9 Ler melodia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.10 Wordle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.11 Nuvem de Palavras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

5 Vídeo 40
5.1 Classe Movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.1.1 Tint aleatório . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.1.2 Play Pause Duplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.1.3 Bloco aleatório . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.1.4 Barra de reprodução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.1.5 Slitscan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.1.6 Grelha de vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.2 Captura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.1 Ponto mais brilhante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.2 Slitscan: câmara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.3 Espelho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.4 Ponto mais brilhante interativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.5 Detetor de movimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.2.6 Movimento com ruído . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2.7 Brilho e Saturação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2.8 Movimento e som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

6 Herança 47
6.1 Ecrãs e Botões . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
6.2 Bateria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
6.3 Efeitos em imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

ii
7 Simulação Física 50
7.1 Cinemática . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
7.1.1 Bola com vento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
7.1.2 Bolas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
7.1.3 Colisão parcialmente inelástica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
7.2 Sistemas de Partículas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
7.2.1 Bolas e Blocos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
7.2.2 Chuva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

iii
Capítulo 0

Revisões

0.1 Bolas e Quadrados

Escreva um programa que crie uma janela de 500×500 com fundo branco e uma linha horizontal a preto
que a divide ao meio.
O programa deve reagir à posição do rato: enquanto o rato se encontra acima da linha horizontal,
o programa desenha, em cada frame, 100 quadrados azuis de lado 10 na metade superior da janela (ver
Fig. 1a); quando se encontra abaixo dessa linha, desenha, em cada frame, 100 círculos vermelhos de raio
4 na metade inferior(Fig. 1b). Tanto os quadrados azuis como os círculos vermelhos são desenhados em
posições aleatórias, dentro da metade da janela que lhes corresponde, e de forma a que cada figura seja
desenhada sem intersetar nem os bordos da figura nem a linha horizontal.

(a) Rato sobre a metade superior (b) Rato sobre a metade inferior

Figura 1

0.2 Cursores deslizantes

Implemente um programa em Processing que desenhe um conjunto de 10 cursores deslizantes numa
janela de 500×500, como mostra a figura 2. Os cursores estão centrados em segmentos de reta verticais
igualmente espaçados entre si, distando os segmentos dos extremos 25px dos limites laterais direito e
esquerdo da janela de visualização. Cada cursor corresponde a um quadrado com 20px de lado, preenchido
em tons de vermelho, de acordo com a seguinte fórmula:

1
 Ficha 0.4

componente vermelha da cor = metade da coordenada Y do cursor.

Figura 2: Cursores

Quando o utilizador clicar num dos cursores, este deverá acompanhar a coordenada Y do rato até
que o botão seja libertado (independentemente da coordenada X).

0.3 Grelha
Construa um programa que crie uma janela de 400×400. Nessa janela deve ser desenhada uma grelha de
quadrados. Sabe-se que cada quadrado tem lado 20. Há quadrados brancos e há quadrados com outras
cores (quando a linha e a coluna são ímpares). No início, alguns destes últimos são azuis e os restantes
amarelos, havendo uma probabilidade de 50% para cada caso (fig. 3a). Quando o utilizador clica com o
rato sobre um quadrado branco nada deve acontecer. No entanto, quando clica sobre um quadrado com
outra cor, todos os quadrados com essa cor devem mudar para uma nova cor definida aleatoriamente.
Este comportamento deve manter-se enquanto o programa estiver a correr (na fig. 3b mostra-se uma
situação em que o utilizador clicou sobre um quadrado cor de laranja, tendo todos os dessa cor mudado
de cor).

(b) Situação após pressão sobre

(a) Situação inicial quadrado azul

Figura 3

2
 Ficha 0.5

0.4 Gráfico de Linhas

O programa a implementar neste exercício tem por base dois arrays de 11 pontos. O array dados contém
uma sequência de números aleatórios entre 0 e a altura da janela (height); o array erros contém valores
aleatórios entre 5 e 50, excetuando o primeiro, que é sempre zero.

Figura 4: Gráfico de Linha

a Implemente o programa de forma a desenhar, numa janela de 500×500, um gráfico de linhas como
o da Figura 4. Os valores de dados são representados por pontos (pequenos círculos negros); as
linhas unem esses pontos; os valores de erros são representados por linhas vermelhas. Cada uma
destas linhas vermelhas verticais está centrada num ponto e tem um comprimento igual ao dobro
do respectivo erro.
b Faça as alterações necessárias para que o valor do erro varie consoante a posição do click do rato.
Se o utilizador premir na parte inferior da janela, os valores do erro diminuem; na parte superior
aumentam. Esta variação é feita em decrementos/incrementos de 1 ponto.

0.5 Bolas à roda

a. Escreva uma classe ARoda que permita criar e controlar círculos (bolas) que rodam em torno de um
ponto. A classe deve ter um construtor com a forma ARoda(float xc, float yc, float
rBig, float r, color cor, float ang, float rot)
onde (ver Fig.5):
• (xc, yc) são as coordenadas do ponto em torno do qual a bola roda;
• rBig é a distância do centro da bola ao ponto (xc, yc);
• r é o raio da bola;
• cor é a cor do interior da bola;
• ang é o ângulo que representa a distância angular da bola à origem;
• rot representa o incremento angular, ou seja, é o ângulo que deverá ser adicionado a ang de
cada vez que se pretenda mover a bola.
A classe deverá ainda definir os seguintes métodos:
• um método void step(), que deverá adicionar o valor de rot ao valor de ang;

3
 Ficha 0.5

Figura 5: Bola a rodar

• um método void desenha(), que deverá desenhar a bola de acordo com os valores das
variáveis de estado;

b. Escreva um programa que, recorrendo à classe da alínea anterior, permita criar 8 bolas que rodam
em torno do centro de uma janela de 500×500.
Cada bola rodará a uma distância do centro diferente (ver figura 6a): a que roda mais próximo do
centro está a uma distância deste de 40; as distâncias das bolas seguintes são sempre superiores
em 25 à distância da bola anterior.
O raio de cada bola é um valor entre 5 e 12 definido aleatoriamente. A cor de cada bola é definida
aleatoriamente.
A distância angular de cada bola à origem é inicialmente zero (ver figura 6a). O incremento angular
de cada bola é um valor obtido dividindo 2π por um valor aleatório entre 300 e 400 (ou seja, as
bolas rodam a velocidades diferentes). A figura 6b ilustra uma situação algum tempo após o início.

Nota: as linhas cinzentas que aparecem nas figuras não são para desenhar.
c. Acrescente ao programa da alínea anterior o código necessário para que o programa passe a
funcionar da seguinte forma:
• Quando se prime a tecla de espaço, o sentido de rotação das bolas inverte-se (se estavam a
rodar no sentido dos ponteiros do relógio, passam a rodar no sentido contrário, e vice-versa).
• Quando se prime a tecla ‘c’, as cores de todas as bolas são aleatoriamente redefinidas.
• Quando se prime a tecla ‘v’, o valor absoluto da velocidade de rotação de cada uma das bolas
é incrementada no valor de 2π/500.

d. Acrescente ao programa da alínea anterior o código necessário para que o programa passe a
funcionar da seguinte forma:
• É desenhado um círculo de raio 30, interior branco e bordo cinzento, centrado na posição do
rato;

4
 Ficha 0.6

(a) Situação inicial (b) Ao fim de algum tempo

Figura 6: Bolas a andar à roda

• Sempre que se der um click no botão do rato, todas as bolas que sejam intersetadas pelo
círculo branco mudarão de cor: o seu interior passará a ser preto.

0.6 Sub-grelhas
Escreva um programa que construa um array bidimensional de estruturas color, com 20×20 posições, e
inicialize aleatoriamente cada célula com uma cor. Em seguida, o programa deverá desenhar uma grelha
20×20 numa janela 300×300 representando o conteúdo do array (exemplo na Figura 7a).
Uma vez desenhada a grelha, o programa passa a interagir com o rato: espera-se que o utilizador
dê dois clicks sobre a grelha, marcando, assim, duas quadrículas. Estas quadrículas são os vértices
opostos de um rectângulo cuja cor pretendemos manter. Todas as quadrículas fora deste rectângulo
deverão passar a preto (exemplo na Figura 7b).

(a) Grelha inicial (b) Grelha depois de marcadas duas quadrículas

Figura 7: Sub-grelhas

5
Capítulo 1

Áudio

1.1 Bola que colide com bordo

Crie um programa que anime uma bola saltitante de diâmetro 50 numa janela 600x400 – a bola deve
começar no centro da janela e mover-se numa direção aleatória, fazendo ricochete nos limites da janela.
Para representar a bola saltitante, implemente uma classe Bola com um construtor que receba o seu
diâmetro, o som a reproduzir e outros parâmetros que ache necessários.
Altere o programa de forma a que, sempre que a bola bata no limite da janela e inverta a direção,
seja reproduzido o som (ping.wav)1

Figura 1.1: Bola que colide com o bordo.

1.2 Bola “panorâmica” que colide com bordo

Modifique o programa anterior de forma a que o som emitido quando a bola bate no limite da janela seja
“espacializado” – a posição x da bola no momento do embate deve ser usada para decidir a “posição” do
som entre os canais esquerdo e direito (use o método pan()). A Figura 1.2 mostra alguns exemplos da
espacialização.
1 Som integra o conjunto de “Recursos Áudio” disponíveis no repositório da cadeira na UCStudent.

6
 Ficha 1.5

Figura 1.2: Diagram com exemplo da espacialização.

1.3 Múltiplas bolas “panorâmicas” que colidem com bordo

Adapte o exercício anterior de forma a que sejam colocadas várias bolas no ecrã, com cores e diâmetros
selecionados de forma aleatória. Para armazenar as bolas e, a cada frame, atualizar a posição de todas
elas, deverá usar um array.

Figura 1.3: Múltiplas Bolas Saltitantes.

1.4 Bateria
Crie um programa que reproduza graficamente (de forma aproximada apenas – com círculos e retângulos)
a Figura 1.4. Utilize classes na sua implementação – uma classe para as peças retangulares e outra para
as peças redondas – e um array para armazenar estas últimas.
Para além das respetivas dimensões, ao construir as peças, deve associar-lhes um som, entre os
ficheiros de áudio disponibilizados, correspondente ao nome na imagem. Finalmente, garanta que, ao
clicar em cada peça, o som respetivo é reproduzido.

7
 Ficha 1.7

Figura 1.4: Bateria.

1.5 Bate Palmas

Crie um programa que capture áudio e desenhe um quadrado sempre que bater palmas – use a deteção
do volume de som e desenhe um quadrado sempre que detectar um volume acima de um determinado
valor. Os quadrados devem ser desenhados com cores aleatórias e em posições aleatórias. O tamanho do
quadrado deve ser proporcional ao volume do som que lhe deu origem.
Opcional: Experimente a mesma visualização, agora baseada na amplitude de um ficheiro áudio.

1.6 Volume Visual

Crie um programa que capture áudio e represente visualmente o volume ao longo do tempo. O programa
deve representar o volume num dado instante como uma linha vertical – desenhando várias linhas na
janela (ver Figura 1.5). Quando chegar ao final da janela, esta deve ser apagada e o processo recomeça.

Figura 1.5: Volume Visual.

8
 Ficha 1.9

1.7 Círculo para posição e amplitude

Desenvolva um programa que abra uma janela quadrada e:
• Ao pressionar qualquer tecla, inicie a reprodução de um ficheiro de som. Sempre que essa tecla
voltar a ser pressionada, a reprodução do som deve recomeçar.
• Vá desenhando e preenchendo um arco de circunferência, consoante a posição no ficheiro. Ou seja,
antes de iniciar a reprodução, o ângulo do arco deve ser de −π radianos (-180º), e no final deve ser
uma circunferência completa (ângulo de π radianos).
• O raio do arco deve ser proporcional à amplitude do som no momento em que o está a desenhar.
Ou seja, 0 quando não há amplitude e metade da largura quando a amplitude é máxima.
• Quando o utilizador clica com o rato, a reprodução deve saltar para a posição correspondente à
posição no círculo. Por exemplo, se o ficheiro tiver 1 minuto, um clique que faça um ângulo de
− π2 radianos (-90º) com o início da reprodução deve fazer o som saltar para os 15 segundos.
Notas:
• O método position() de objetos SoundFile indica a posição do ficheiro de som em reprodução.
• A função arc(a, b, c, d, e, f) desenha um arco de circunferência com centro em (a, b), raios
c e d, entre os ângulos e e f .
• A função atan2(a, b) calcula o ângulo do ponto (a, b) em relação à origem (0, 0).

(a) Programa quando o som está na (b) Programa quando o som está perto
primeira metade e a amplitude elevada. do final e a amplitude é baixa.

Figura 1.6: Círculo para posição e amplitude

1.8 Visualização de Volume em Barra de LEDs

Crie um programa que leia um ficheiro de áudio e represente visualmente o seu volume à medida que
reproduz o som. A representação do volume será feita através de uma simulação de uma barra de 15
LEDs. Os LEDs têm cor amarela quando não há som. Com som, os LEDs poderão mudar para vermelho.
Quanto maior for a amplitude do som, maior o número de LEDs que passam a vermelho, começando
pelos de baixo (ver Fig. 1.7). Com a amplitude no máximo, os LEDs ficarão todos a vermelho.
Na Figura 1.8 pode observar o esquema de desenho da barra de LEDs. Como pode ver no esquema,
as dimensões de cada LED são de 50x22. Entre cada LED, deixa-se um intervalo de 5. Assim sendo, o
conjunto dos 15 LEDs ocupa uma área retangular de 50x400.

9
 Ficha 1.10

(a) Som de baixa amplitude. (b) Som de amplitude mais elevada.

Figura 1.7: Barra de LEDs

1.9 Visualização de posição e análise espectral

Pretende-se que construa um programa que, numa janela de 800×500, faça simultaneamente uma
visualização da análise espectral FFT, e também da posição, de um som lido de um ficheiro.
Desenhe uma sequência de quadrados, um por cada banda da análise FFT. Os quadrados deverão
ter os seus centros na linha horizontal que divide a janela ao meio, e deverão estar igualmente espaçados
na horizontal (ver Figs. 2.2a e 2.2b). O tamanho de cada quadrado, bem como a sua cor, deverá variar
com a intensidade da banda respetiva (comparar Fig. 2.2b com Fig. 1.11). O número de bandas a
visualizar deverá estar definido numa variável. A Figura 1.12 mostra uma imagem de uma visualização
de 16 bandas.

1.10 Visualização de Bandas de Frequência em Barras de LEDs

Desenvolva um programa que represente o nível de 8 bandas de frequência de um ficheiro de som
recorrendo a barras como a do exercício 1.8. Para tal, construa uma classe para representar barras de
LEDs, com um construtor que permita definir uma coordenada de referência (canto superior esquerdo
do primeiro LED), dimensões dos LEDs e espaço vertical entre cada um deles, número de LEDs da barra
e as cores que cada LED poderá assumir (ativado/desativado). A classe deverá ter um método para
desenhar a barra no seu estado atual, recebendo como argumento de entrada o número de LEDs ativos.
O conjunto das 8 barras deverá ocupar uma janela de 400×500 (ver Fig. 1.13).

10
 Ficha 1.10

Figura 1.8: Esquema para desenho da barra de LEDs

Figura 1.9: Uma visualização para 8 bandas

Figura 1.10: Outra visualização para 8 bandas

11
 Ficha 1.10

Figura 1.11: Ainda outra visualização para 8 bandas

Figura 1.12: Uma visualização para 16 bandas

12
 Ficha 1.10

Figura 1.13: Visualizador de Bandas de Frequência

13
 Ficha 1.13

1.11 Visualização de volume e deteção de batida

Escreva um programa que, numa janela 600×600, com fundo branco, carrega um ficheiro de áudio e
procede à análise do seu volume e à deteção de batida. O programa deverá reproduzir o som e, a cada
frame, desenhar um círculo (sem contorno), tendo em conta as propriedades definidas pelos seguintes
eventos:
• se for detetado um beat:
– o círculo deverá ser desenhado com centro em (x, 300), onde x é proporcional à posição atual
(em segundos) do ficheiro que está a ser reproduzido;
– o raio deverá ser proporcional à amplitude, com um valor máximo de 25 e mínimo de 5;
– a cor de preenchimento corresponde ao valor hexadecimal #E1341E e a opacidade (canal
alpha) a 127;
• se não for detetado um beat:

– o círculo deverá ser desenhado com centro em (x, y), onde x é proporcional à posição atual
(em segundos) do ficheiro que está a ser reproduzido e y proporcional à amplitude, com
60 ≤ y ≤ 540;
– o raio deverá ser 5;
– a cor de preenchimento corresponde ao valor hexadecimal #1ECBE1 e a opacidade (canal
alpha) a 127.

Figura 1.14: Visualizador de volume e batida

1.12 Análise espectral de sinais sinusoidais

Refaça o “Exemplo 10: FFT” apresentado nas aulas substituindo a fonte sonora por um gerador de
sinal sinusoidal. Faça com que a frequência do oscilador varie entre os 100 e os 5000Hz de acordo com
a posição horizontal do rato. Observe a forma como a análise FFT do sinal mostra a mudança da
frequência. Depois, experimente com outros tipos de geradores.

14
 Ficha 1.14

1.13 Análise FFT de onda quadrada versus ruído branco

Refaça o “Exemplo 10: FFT” apresentado nas aulas de forma a que o programa passe a dispor de
duas fontes sonoras: um gerador de onda quadrada (classe SqrOsc) e um gerador de ruído branco (classe
WhiteNoise). Pretende-se desta vez desenhar o resultado da análise FFT do oscilador na metade superior
da janela e o resultado da análise FFT do gerador de ruído na metade inferior (ver Figura 1.15). A janela
deverá ter o dobro da altura. Faça com que a frequência do oscilador varie entre os 100 e os 5000Hz de
acordo com a posição horizontal do rato.

Figura 1.15: Análise espectral de uma onda quadrada (em cima) e de ruído branco (em baixo).

1.14 Visualizador baseado na posição e FFT

Construa um programa que, numa janela com dimensões à sua escolha, com um fundo branco, carrega
um som e cria um objeto FFT para analisar as suas frequências, num espetro de 8 bandas. O programa
deverá reproduzir o som e, a cada frame, desenhar uma elipse com as seguintes caraterísticas:
• dimensões (w, h), respetivamente proporcionais aos valores das bandas 1 e 0;
• centro em (x, y), em que: x é proporcional ao tempo percorrido desde o início do som, y é
proporcional ao valor da banda 2;
• cor (r, g, b, a), proporcionais aos valores bandas 3, 4, 5 e 6, respetivamente.
Para um efeito mais interessante, e por ser normal que algumas bandas tenham valores baixos, sugere-
se diminuir os limites superiores considerados para os valores das bandas 2–6. Por exemplo, experimente
considerar que os valores das bandas 2–5 não passam de 0.5; e os da banda 6 de 0.25.

15
Capítulo 2

Imagem

2.1 Rato sobre imagens

Construa um programa que mostre duas imagens numa janela de 950×300, como ilustrado na Figura 2.1.
Inicialmente, as imagens encontram-se escurecidas. Sempre que o rato está sobre uma das imagens, esta
deve apresentar os valores de intensidade originais, isto é, sem estar escurecida, tal como se ilustra nas
Figuras 2.2a e 2.2b1 .

Figura 2.1: Janela com duas imagens

(a) Rato sobre a imagem da esquerda (b) Rato sobre a imagem da direita

Figura 2.2

Nota:

• Escurecer a imagem corresponde à aplicação de um filtro com a função tint().

1 Recorra às imagens “img1_0.jpg” e “img1_1.jpg” fornecidas nos recursos para este capítulo

16
 Ficha 2.3

(a) Rato à esquerda (b) Rato ao centro (c) Rato à direita

Figura 2.3

Figura 2.4: Stop motion com sobreposiçao de sequências

2.2 Redimensionar imagem

Construa um programa que mostre uma imagem numa janela de 550×550, de tal forma que a imagem
diminui de tamanho quando o rato se aproxima do lado esquerdo da janela (Fig. 2.3a) e aumenta quando
o rato se aproxima do lado direito (Fig. 2.3c)2 .

2.3 Stop motion

Altere o código do exemplo stop motion de forma a ter três sequências/imagens de stop motion
sobrepostas, usando a mesma sequência cíclica de imagens mas com início em imagens diferentes (a
imagem inicial é escolhida aleatoriamente). A cada uma das sequências deverá ser aplicado um filtro de
2A imagem do exemplo (Gnomo) encontra-se nos recursos para este capítulo, com o nome “im2.png”.

17
 Ficha 2.6

Figura 2.5: Grelha de imagens com filtros de cor

cor diferente. A Figura 2.4 exemplifica as cores vermelho, verde e azul com transparência (127) para os
filtros.

2.4 Grelha de imagens

Construa um programa que leia 16 imagens3 e as desenhe numa janela 600×600, dispostas em grelha
como na Figura 2.5. Sobre cada imagem deverá ser aplicado um filtro cuja tonalidade deverá mudar
gradualmente do vermelho para o amarelo, como se vê na referida figura.

2.5 Sintetizar gradiente

Construa um programa (600×600) que sintetize uma imagem com um gradiente circular entre duas cores
(ver Fig. 2.6, com gradiente do vermelho para ciano), a partir do centro da janela.
• As cores devem ser definidas aleatoriamente.
• Sempre que o rato é pressionado, o gradiente deve ser novamente gerado com outras cores aleatórias.
• Sempre que uma tecla é pressionada, a imagem deve ser guardada.
Notas:
• Recomenda-se que recorra à função lerpColor() para produzir os tons intermédios de cor.
• Recomenda-se que recorra à função map() para converter o valor da distância num valor a utilizar
como parâmetro na função lerpColor().
3 Recorra às 16 imagens usadas no exercício 2.3

18
 Ficha 2.7

Figura 2.6: Imagem com gradiente

2.6 Gradiente sobre imagem

Construa um programa que leia um ficheiro de imagem e crie uma nova imagem igual à primeira, mas
onde se aplique um gradiente diagonal, em níveis de cinzento, de forma a que o canto superior esquerdo
fique mais escurecido e o canto inferior direito não sofra qualquer alteração. O programa deverá mostrar
as duas imagens – a original e a alterada – numa janela, tal como se ilustra na Fig. 2.7. O programa
deverá gravar a imagem criada, ao ser clicado o rato.

Figura 2.7: Imagens original e com gradiente

2.7 Animação de imagem de avião

Desenvolva um programa que anime uma pequena imagem de um avião4 desde o fundo de uma janela de
500×500 até ao seu topo, sem variar a coordenada horizontal. Ao chegar ao topo, a imagem deve voltar
a aparecer no fundo, numa nova posição horizontal, escolhida aleatoriamente. O avião deverá, porém,
mover-se sempre na metade esquerda da janela.
4 Pode usar a imagem “aviao.png” que se encontra nos recursos para este capítulo.

19
 Ficha 2.9

Na metade direita da janela, deverá animar uma nova imagem invertida que é sintetizada a partir
da imagem original. A imagem invertida deverá mover-se de cima para baixo, à mesma velocidade da
original, de forma síncrona com ela: quando a original surge no fundo, a invertida surge de cima. Veja
o exemplo da Figura 2.8.
Para além disso, a cor do fundo deve alterar-se consoante a posição da imagem original. O programa
não deve parar.

(a) Avião original próximo do (b) Avião original próximo do

fundo da janela. topo.

Figura 2.8: Animação de avião e da sua imagem invertida.

2.8 Pontilhismo
Construa um programa que leia uma imagem e construa uma nova num estilo inspirado no pontilhismo,
mostrando o processo de construção. Para tal, o programa deverá animar uma janela inicialmente branca,
com o mesmo tamanho (640×425) da imagem original5 . Depois, em cada frame, deverá selecionar
aleatoriamente um ponto dessa imagem, e usar a cor desse ponto para desenhar na janela uma elipse
centrada na coordenada correspondente ao ponto, com a mesma cor, mas uma transparência gerada
aleatoriamente (entre 50 e 100), e com altura e largura também definidas aleatoriamente (entre 4 e 8).
A Fig. 2.9 ilustra o resultado que se pode obter ao fim de algum tempo.

2.9 Alteração de Imagem e geração de Som

Crie um programa que carregue uma imagem e a mostre na janela.

a) O mesmo programa deve reproduzir uma onda sinusoidal, com frequência que pode variar entre 50 e
1000, consoante o matiz do pixel para onde o ponteiro do rato estiver a apontar6 ;
b) Uma segunda funcionalidade do programa deve ser ativada ao carregar nas teclas 1, 2, e 3. Neste caso,
a imagem deve ser alterada, desenhando faixas horizontais vermelhas, verdes e azuis, respetivamente
nos píxeis com o valor da ordenada múltiplo de 5, 7 e 11. Ao voltar a carregar nas mesmas teclas, as
faixas respetivas devem desaparecer.
A título de exemplo, para a imagem tulips.jpg e depois de carregar uma vez nas teclas 1, 2 e 3, o
resultado deve ser o da Figura 2.10.
5 Use a imagem com o nome "tulips.jpg".
6 Para obter o matiz de um pixel pode usar a função hue().

20
 Ficha 2.10

Figura 2.9: Construção pontilhista

Nota: para que demasiadas alterações da frequência da onda em curtos intervalos de tempo não
gerem ruído, recomenda-se alterar a frameRate para um valor baixo, por exemplo, 10.

Figura 2.10: Faixas sobre imagem.

2.10 Transparência com máscara

Construa um programa que leia um ficheiro de imagem (imagem original) e crie uma nova imagem
(imagem transformada). O programa deverá desenhar a imagem original e a imagem transformada
numa janela. A imagem original deverá ser desenhada no centro da janela, enquanto que a imagem
transformada deverá ser animada de forma a que o seu centro acompanhe a posição do rato.

21
 Ficha 2.11

A imagem transformada é obtida através da aplicação de uma máscara. A máscara é aplicada sobre o
canal alfa para possibilitar transparência. Por exemplo, a aplicação da máscara da Fig. 2.11a à imagem
da Fig. 2.11b resulta no efeito de transparência que se vê na Fig. 2.11c sobre fundo branco.

(a) Máscara (b) Imagem original (c) Imagem com máscara

Figura 2.11

A Figura 2.12 mostra o efeito que se pretende para o programa a construir.

Figura 2.12: Imagens original e transformada

Notas:
• Recomenda-se a utilização do método copy() para obter uma imagem que corresponde a uma cópia
da original (imagem cópia).
• Para ser possível a aplicação da máscara, a imagem cópia e a imagem da máscara devem ter as
mesmas dimensões. Use a função resize().
• Recomenda-se a utilização do método mask() da classe PImage.

22
 Ficha 2.11

2.11 Lanterna
Crie um programa que simule o funcionamento de uma lanterna ao ajustar o brilho de uma parte de uma
imagem em função da distância dessa região ao rato – a imagem7 será o cenário a iluminar. A mudança
de brilho deverá ocorrer num raio de 100 pixels.
A simulação da lanterna deverá incluir quatro modos de iluminação: branco, vermelho verde e azul
(ver Fig. 2.13). Para alternar entre estes modos, as teclas ‘1’ a ‘4’ deverão ser programadas.

(a) (b)

(c) (d)

Figura 2.13: Os quatro modos de iluminação: (a) branco; (b) vermelho; (c) verde; (d) azul.

7 Use a imagem "dark_room.jpg".

23
 Ficha 2.13

2.12 Mudança de cor

Construa um programa que leia uma imagem8 e, posteriormente, permita mudar os pixels de uma dada
cor para uma outra cor (Fig. 2.14). Essa alteração deverá ocorrer no pixel apontado pelo rato e nos que
se encontram a uma distância inferior ou igual a 15 pixels. A título de exemplo, considere que os tons de
verde da imagem são substituídos por tons de vermelho escuro/bordeaux. Neste exemplo, considerou-se
um pixel como verde quando a sua componente matiz (hue) está entre 60 e 180.

Figura 2.14: Mudança de cor (verde para vermelho escuro)

Nota:
• Como exemplo, poderá consultar o vídeo disponível em http://tinyurl.com/y4aqh26g.

2.13 Mudança de Brilho

Construa um programa que leia uma imagem9 e, posteriormente, permita mudar os canais RGB de cada
pixel consoante a amplitude captada pelo microfone—quanto maior a amplitude, mais brilhante ficará a
imagem (Fig. 2.15b), quanto menor a amplitude, menos brilhante ficará a imagem (Fig. 2.15a).

8 Use a imagem com o nome "argsv.jpg".

9 Use a imagem com o nome "alforreca.jpg".

24
 Ficha 2.13

(a) Amplitude baixa. (b) Amplitude alta

Figura 2.15

25
Capítulo 3

Estruturas de Dados: ArrayLists

Consultar Learning Processing, D. Shiffman, Cap. 23

3.1 Fita de um Filme

Construa um programa que comece por desenhar 7 imagens na horizontal, numa janela 800×100, como
se mostra na Figura 3.1. Como imagens pode usar um subconjunto das que usou no execício 2.3. No
desenho destas imagens, respeite as proporções das imagens originais.
O programa deverá ainda garantir a seguinte interação: (i) quando se prime a tecla ’p’, a imagem
que está na última posição (à direita) deve ser removida da lista e inserida na primeira posição (ver
Figuras 3.1b e 3.1c); (ii) quando se prime a tecla ’u’, a imagem que está na primeira posição (à esquerda)
deve ser removida da lista e inserida na última posição (ver Figura 3.1d).

3.2 Bolas na horizontal

Construa um programa que comece por desenhar 7 bolas de diâmetro 25, cada uma com a sua cor,
igualmente espaçadas na horizontal, centradas na vertical, numa janela de 400×300, recorrendo à classe
Bola (usada noutros exercícios) e a uma ArrayList. Veja exemplo na Figura 3.3a.
O programa deverá ainda garantir a seguinte interação: (i) quando se prime a tecla ’p’, a bola que está
na última posição (à direita) deve ser removida da lista e inserida na primeira posição (ver Figura 3.3b);
(ii) quando se prime a tecla ’u’, a bola que está na primeira posição (à esquerda) deve ser removida da
lista e inserida na última posição (ver Figura 3.3c).

3.3 Faixas
Crie um programa que comece por desenhar uma janela de (500×500), com fundo branco. A partir desse
momento, de cada vez que o utilizador dê um click na janela, o programa deverá dividir a janela , fazendo
aparecer um traço vertical no ponto onde o click foi dado. Os traços irão dividindo a janela em faixas
verticais, com diferentes níveis de cinzento, como se ilustra na Fig. 3.4.
O cálculo do nível de cinzento imediatamente à direita de cada traço é efetuado a partir da coordenada
horizontal desse mesmo traço: quanto mais à esquerda está o traço, mais clara é a cor da faixa à direita
do traço. Por exemplo, um traço na coordenada zero dá cor branca à sua direita, enquanto um traço na
coordenada 250 (a meio da janela) dará um nível de cinzento 123 (255/2).

26
 Ficha 3.5

(a) Situação inicial

(b) Após premir ’p’ uma vez

(c) Após premir duas vezes ’p’

(d) Após premir duas vezes ’p’ e em seguida ’u’

Figura 3.1

(a) Situação inicial (b) Após premir duas vezes ’p’ (c) Após premir quatro vezes ’u’

Figura 3.2

3.4 Tinta que Desaparece

Crie um programa que simule numa janela 400x400 o desenho com tinta que desaparece, recorrendo
a ArrayLists. A ideia é desenhar na posição atual do rato um círculo em preto com diâmetro 50, e
desenhar círculos nas posições do rato nos 100 fotogramas anteriores, mas garantindo que os círculos se
aproximarão do branco e serão progressivamente mais pequenos à medida que nos afastamos do fotograma
atual. A Figura 3.5 ilusta a situação.

27
 Ficha 3.6

(a) Situação inicial (b) Após premir duas vezes ’p’ (c) Após premir quatro vezes ’u’

Figura 3.3

Figura 3.4: Janela depois de vários clicks

3.5 Bolas
Escreva um programa que, numa janela 500×500, comece por desenhar um conjunto de 10 bolas em
posições aleatórias, com diâmetro aleatório entre 50 e 100. Durante a execução, o programa deverá ter
o seguinte comportamento:
i) permitir ao utilizador apagar bolas premindo o rato sobre uma ou mais bolas;

ii) permitir ao utilizador adicionar mais bolas premindo o rato sobre uma posição não ocupada por
nenhuma bola;
iii) animar as bolas existentes fazendo a sua cor variar em função do valor da posição Y do rato: devem
ser pretas quando mouseY for 0, brancas quando mouseY for 500, apresentando níveis de cinzento
progressivos e uniformes à medida que o rato vai do topo para o fundo da janela.
As figuras 3.6a e 3.6b mostram duas situações do programa, a primeira com o rato perto do topo da
janela (logo, as bolas são muito escuras) e a segunda após a inserção de mais algumas bolas e a deslocação
do rato para a parte inferior da janela levando a que a cor das bolas se aproxime de branco.
Implemente este programa recorrendo a um ArrayList.

28
 Ficha 3.6

Figura 3.5: Tinta que desaparece

(a) Rato próximo do topo, com as 10 bolas iniciais. (b) Rato próximo do fundo, com mais bolas inseridas.

Figura 3.6

3.6 Quadrados com escolha de cor

Crie um programa que abre uma janela 800×600, com fundo branco, um array de 10 cores, definidas
aleatoriamente, e uma ArrayList de quadrados, inicialmente vazia. A janela estará dividida em duas
zonas (ver Figura 3.7):
• a zona entre os 0 e 100 de altura deverá estar dividida em 10 partes, cada uma com um retângulo
80×100 com uma das cores do array;

• a zona entre os 100 e os 600 de altura, incialmente livre, mas onde serão desenhados os quadrados
da ArrayList.
A zona de cima servirá apenas para selecionar uma cor, através de um clique num retângulo. Para
saber a cor selecionada, pode recorrer ao array pixels da janela do Processing.
Ao clicar com o rato na zona de baixo, poderão acontecer duas coisas. Um clique numa zona vazia
irá adicionar à ArrayList um quadrado centrado na posição do clique, com lado variável entre 10 e 50, e

29
 Ficha 3.7

cor igual à última cor selecionada. Um clique em cima de um quadrado deve resultar na remoção desse
quadrado da ArrayList.
Os quadrados devem ser representados por uma classe Quadrado, com o seguinte esqueleto:

class Quadrado{
color cor;
PVector centro;
int lado;

Quadrado(int x, int y, int l, color c); //construtor

void desenha(); //desenha quadrado com lado=lado, centrado em centro, e cor=cor.
boolean dentro(int x, int y); //indica se o ponto (x,y) está dentro do quadrado
}

Figura 3.7: Janela após adicionar vários quadrados.

3.7 ArrayLists e imagens

Crie um programa que abre uma janela 800×600, com fundo preto e com uma ArrayList de imagens,
inicialmente vazia. À semelhança do exercício 3.6, a janela estará dividida em duas partes: (1) zona
entre os 0 e os 100 de altura, que servirá para mostrar miniaturas das imagens da ArrayList; (2) zona
entre os 100 e os 600 de altura, que servirá para mostrar imagens grandes. Ao carregar com o rato
na segunda zona, deve abrir uma janela que permita ao utilizador escolher uma imagem do seu disco,
recorrendo à função selectInput()1 . As imagens selecionadas devem ser adicionadas à ArrayList, e
consequentemente aparecer na primeira zona. Para além disso, ao carregar numa das miniaturas, a
imagem correspondente deve ser desenhada de forma a ocupar o espaço todo da segunda zona.
1 Veja
como funciona a função selectInput() na documentação do Processing: https://processing.org/reference/
selectInput_.html

30
Capítulo 4

Texto

4.1 Strings e Tipografia

Consultar Learning Processing, D. Shiffman, Caps. 17 e 18

4.1.1 Concatenar ao Centro

Escreva um programa baseado num array de strings, com conteúdo escolhido por si, e numa string,
inicialmente igual a “...”, cujo conteúdo deve ser mostrado em cor branca, na fonte Futura com tamanho
32, e centrado numa janela 600×200 com fundo negro. A cada click do rato, o programa deve concatenar
à string mostrada uma string do array, escolhida aleatoriamente. Isto deve também refletir-se no que o
utilizador está a ver. Veja a ilustração na Figura 4.1.

Figura 4.1: Exemplo de concatenação ao centro para array com Strings “um”, “dois”, “três” e “...”.

Altere o programa de forma a que, quando a largura do texto a mostrar ultrapassar a largura
disponível, esse texto seja apagado e comece tudo de novo.

4.1.2 Escreve Palavras

Crie um programa que, dado um array de strings, contendo cada uma delas uma palavra escolhida por
si, mostre, numa janela 600×400, a primeira palavra, com tamanho 32, fazendo com que esta se mova
acompanhando a posição do ponteiro do rato. Ao dar um click, a palavra deve fixar-se na posição onde
estiver e o rato deve passar a ser acompanhado pela palavra seguinte. Depois de fixar a última palavra
do array, o utilizador deverá recomeçar o processo, isto é, voltar a ter um ecrã vazio onde posicionar as
palavras. Ver ilustração na Figura 4.2.

31
 Ficha 4.1

Figura 4.2: Exemplo para array com Strings “casa”, “roubada”, “trancas”, “à” e “porta”.

4.1.3 Espreitar sub-cadeias

Crie um programa que mostra parte de uma string no centro de uma janela com dimensões à sua escolha
e numa fonte à sua escolha. A quantidade de carateres a mostrar é definida por dois números inteiros:
• Um indica a posição do primeiro carater a mostrar na string, inicialmente 0;
• Outro indica o número de carateres a mostrar, por exemplo, 10.
À medida que o utilizador clica no rato, o primeiro número deve avançar. Quando chegar ao final, deve
voltar ao início.

Figura 4.3: Texto visível: no início, após um clique, e após dois cliques no rato.

4.1.4 Chuva de Carateres

Crie um programa que separe uma string nos seus carateres e depois os anime numa janela 300×400.
Inicialmente, todos os carateres devem aparecer no topo da janela, e todos à mesma distância uns dos
outros. Com o passar do tempo, os carateres devem descer até ao fundo da janela, mas com velocidades
variáveis. Para tal, a cada frame, a posição vertical de cada carater deve sofrer um incremento de um
valor aleatório entre 1 e 6. Para referência, observe a figura 4.4. Faça ainda as alterações necessárias
para que:
• Quando o utilizador clicar no rato, a animação recomece;
• Cada vez que começar, seja escolhida aleatoriamente uma nova fonte para os carateres.

4.1.5 Animação de carateres

Desenvolva um programa que anima os carateres de uma palavra, ao centro do ecrã, de acordo com a
análise de frequências de um som. O programa deve ter um parâmetro do tipo String, com a palavra
a animar, e reproduzir um som (carregado do seu disco ou captado do microfone). A cada frame, as

32
 Ficha 4.1

(a) Início da animação (b) Fim da animação

Figura 4.4

frequências do som devem ser analisadas e a posição vertical de cada carater deve ser proporcional ao
valor de cada banda (i.e., cada carater acabará por estar associado a uma banda). A posição horizontal
de cada carater deve ser constante, com os carateres equidistantes um dos outros e a ocupar a largura
total da janela. Utilize uma fonte à sua escolha.
Nota: tenha em atenção que o número de bandas da análise FFT tem de ser uma potência de 2.
Se o comprimento da sua palavra não for uma potência de 2, escolha a potência de 2 mais baixa mas
superior ao comprimento da palavra e ignore as últimas bandas.

4.1.6 Grelha de texto

Desenvolva um programa que preenche uma janela branca com uma grelha de carateres (n × m),
inicialmente a preto. O preenchimento deve ter por base:
• uma variável do tipo String, frase;
• a fonte a utilizar, o tamanho de letra;
• o número de carateres em cada linha (n) e em cada coluna (m), que deve utilizar para calcular a
largura (w) e a altura (h) de cada célula da grelha.
a. Comece por eliminar os espaços da frase1 e converter os seus carateres para maiúscula. Cada
linha da grelha deve incluir cada carater, respeitando a sequência na frase. Se depois do último
carater não tiver chegado ao final da linha, deve voltar ao início da frase. A título de exemplo,
veja a Figura 4.5a.
b. Altere o programa de forma a que ele também carregue uma imagem, redimensione essa imagem
de acordo com as dimensões da janela, e pinte cada carater com a cor do píxel que ficaria debaixo
dele se o texto fosse colocado em cima da imagem. A título de exemplo, veja a Figura 4.5b.
c. Altere o programa de forma a que: (i) a imagem seja desenhada por baixo do texto; (ii) o som
do microfone seja captado; (iii) a cada frame, seja aplicado um filtro sobre a imagem e alterado o
valor do canal alpha da cor de cada carater. Isto deve ser feito de forma a que, quanto maior a
amplitude, menos se vê a imagem e mais se vêem os carateres, e vice-versa.
1 Para eliminar os espaços e branco de uma string s, pode fazer o seguinte: s = s.replaceAll(, ).

33
 Ficha 4.1

(b) Grelha 75 × 60 para a frase “Um campo de tulipas”

(a) Grelha 50 × 40 para a frase “Um campo de tulipas”. com cores baseadas numa imagem.

Figura 4.5

34
 Ficha 4.2

4.2 Ficheiros de Texto

4.2.1 Animar linhas
Escreva um programa que leia o conteúdo de um ficheiro e, a cada segundo, mostre numa janela 500×500
uma linha, numa posição aleatória, com uma cor aleatória e um tamanho aleatório, entre 12 e 32. O
programa nunca deve parar, ou seja, depois de mostrar a última linha do ficheiro, deve voltar à primeira.

4.2.2 Mostrar linhas pares / ímpares

Escreva um programa que leia o conteúdo de um ficheiro de texto e mostre, numa janela branca 300 ×
300, alternadamente, as linhas pares (se o ponteiro do rato estiver na zona superior da janela) ou as
linhas ímpares (se o ponteiro do rato estiver na zona inferior da janela). Desde que fique visível e sem
sobreposições, o texto das linhas pode aparecer numa posição e com um tamanho à sua escolha.

4.2.3 Codificar texto

Escreva um programa que leia o conteúdo de um ficheiro de texto e o traduza num código de formas e
cores a apresentar numa janela 600 × 400, de acordo com as seguintes regras:

• A janela deve ser “dividida” em n divisões horizontais, em que n corresponde ao número de linhas
do ficheiro;
• Cada divisão horizontal será também “dividida” em m partes iguais, em que m é o número de
carateres da string que lhe corresponde;
• Em cada parte será desenhada uma forma, de acordo com o carater correspondente. Por exemplo:

– Um sinal de pontuação (.!?,;) deve ser traduzido num retângulo preto;

– Um espaço deve ser traduzido num retângulo branco;
– Uma vogal (aeiou) deve ser traduzida num retângulo vermelho;
– Qualquer outro carater (p.ex., consoantes) deve ser traduzido num retângulo azul;

A título de exemplo, as figuras 4.6 e 4.7 mostram o resultado da aplicação das regras anteriores em dois
textos diferentes.

as pombinhas da Catrina
andaram de mão em mão,
foram ter à Quinta Nova
ao Pombal de São João.
Figura 4.6: Exemplo de codificação para a letra As Pombinhas da Catrina.

35
 Ficha 4.2

mudam-se os tempos, mudam-se as vontades,

muda-se o ser, muda-se a confiança;

Figura 4.7: Exemplo de codificação para Mudam-se os tempos....

4.2.4 Mostrar contexto de palavra

Escreva um programa que recebe um ficheiro de texto e uma palavra à sua escolha, e que, para cada
ocorrência dessa palavra, escreve, em posições aleatórias de uma janela 400 × 400, os vários contextos
onde essa palavra ocorre. Mais concretamente, para cada ocorrência da palavra, o seu contexto deve ser
representado por uma string que inclui a palavra anterior, a palavra alvo e a palavra seguinte.
A figura 4.8 ilustra um possível resultado para os contextos da palavra três no seguinte texto:

três tigres tristes para três pratos de trigo.

três pratos de trigo para três tigres tristes.

Figura 4.8: Exemplo de contexto para a palavra “três”.

4.2.5 Guardar Iniciais

Implemente uma função String iniciais(String nome) que, dado o nome de uma pessoa, retorne
apenas as suas iniciais, em maiúsculas. Por exemplo, se o nome for “Manuel Silva Costa” o resultado
deverá ser “MSC”.
Utilize a função anterior num programa que:
1. lê o conteúdo de um ficheiro de texto com nomes de pessoas, um por linha, chamado “nomes.txt”;
2. cria um novo ficheiro chamado “iniciais.txt” que tenha, em cada linha, as iniciais do nome na
linha correspondente em “nomes.txt”.

36
 Ficha 4.2

4.2.6 Funções sobre conteúdo de ficheiro

Escreva um programa que começa por ler as linhas de um ficheiro de texto para um array de strings e,
com base nele, cria várias novas strings, cada uma através de uma função individual, tais como:
• Uma que contém todas as strings do array juntas na ordem lida, mas separadas por uma quebra
de linha, “\n”;
• Uma que contém todas as strings do array juntas, também separadas por uma quebra de linha,
mas na ordem inversa e com todos os carateres em maiúscula;
• Uma que contém apenas as strings do array / linhas do ficheiro com um tamanho inferior a 10
carateres, também separados por uma quebra de linha;
• Uma que só inclui as últimas palavras de cada linha;

• Uma que contém apenas a mais longa palavra no texto. Em caso de empate, use a primeira
palavra encontrada;
• Uma em que cada linha começa apenas a partir da primeira letra ‘e’;
• Uma em que o texto aparece escrito em camelCase , ou seja, sem espaços, e com a primeira
letra de cada palavra, excepto da primeira, maiúscula.

O programa deve ainda começar por escrever a primeira string criada, a branco, com um tipo de letra
aleatório, tamanho 24, e centrada numa janela 500 × 500, com fundo preto. A cada click do utilizador,
é mostrada a string seguinte, com as cores invertidas, produzindo um efeito semelhante ao da figura 4.9:

Figura 4.9: Desenho do conteúdo de um ficheiro de texto de várias formas.

Depois de mostrar a última string, um novo click deve escolher um novo tipo de letra e voltar a
mostrar a primeira.

37
 Ficha 4.2

4.2.7 Bolas
Adapte o programa do capítulo anterior (3.5, Bolas), de forma a que os atributos das bolas iniciais sejam
carregados a partir de um ficheiro de texto que, em cada linha, terá três números inteiros, separados por
vírgulas, um com o valor da coordenada x do centro, outro com a coordenada y, e um último com o
comprimento do diâmetro.
Por exemplo, para desenhar duas bolas, uma com centro em (100, 50) e diâmetro 25, e outra na
posição (170, 180) e diâmetro 30, o conteúdo do ficheiro deve ser o seguinte2 :

100,50,25
170,180,30

Para além disso, sempre que o utilizador pressionar uma tecla, o estado do ecrã (bolas e seus atributos)
deve ficar guardado no ficheiro original, de tal forma que, depois do programa terminar e voltar a ser
iniciado, ele volte ao estado em que estava quando foi guardado. Ao guardar o estado do ecrã, o programa
deve também escrever na consola, para cada bola, a mensagem “Guardar (x, y, d)...”, em que x, y
e d são os atributos de cada bola mostrada no ecrã.
Tudo isto deve ser feito com recurso à implementação de uma classe Bola, com os atributos necessário
e o método String toString().

4.2.8 Configurar Animação

Crie uma animação numa janela 500×500, com fundo preto, configurável a partir de um ficheiro de texto
dados.txt com o seguinte conteúdo:

#desenha ora n_bolas bolas, ora n_quadrados quadrados

#com uma frameRate fr
fr=2
n_bolas=10
n_quadrados=6

Ao processar o ficheiro, a animação deve alterar a frameRate para 2. A partir daí, a cada frame,
devem ser desenhadas ora 10 bolas brancas, ora 6 quadrados brancos, com dimensões aleatórias. Linhas
começadas por # ou sem o sinal = devem ser ignoradas.
Siga o formato apresentado e acrescente ao ficheiro de texto outros parâmetros que possa considerar
na animação (por exemplo, cor das bolas e dos quadrados).

4.2.9 Ler melodia

Escreva um programa que lê um ficheiro de texto que, em cada linha, tem sequências de números inteiros
separados por vírgulas. De seguida, crie uma onda triangular, repoduza-a e, a cada frame, altere a sua
frequência para o próximo valor da sequência. Pode considerar que cada quebra de linha corresponde a
uma frame silenciosa, isto é, onde não é reproduzido qualquer som. Quando tiver percorrido por todos
os números, a reprodução deve terminar.
Nota: para facilitar a organização do conteúdo lido do ficheiro, sugere-se que ele seja adicionado
a uma ArrayList de inteiros, onde as quebras de linha podem corresponder a zeros, porque quando a
frequência é zero, não é produzido som.

4.2.10 Wordle
Desenvolva um programa que carrega de um ficheiro uma lista de palavras de cinco letras e escolhe uma
aleatoriamente, sem informar o utilizador. A partir daí, o utilizador pode escrever no ecrã qualquer
sequência de cinco letras. Ao carregar no ENTER com as cinco letras inseridas, são desenhados cinco
2 Dica: para converter um array com elementos de outro tipo num array de inteiros pode usar int(array)

38
 Ficha 4.2

quadrados em linha, cada um correspondente a uma letra, e com as seguintes cores: vermelho, se a letra
não está na palavra; amarelo, se letra está na palavra, mas noutra posição; verde, se letra está na palavra,
na mesma posição. Observe o exemplo da Figura 4.10.

Figura 4.10: Resultado após inserir a sequência BATER para a palavra escolhida tinha sido VELAR.

4.2.11 Nuvem de Palavras

Escreva um programa que carregue um ficheiro de texto e desenhe uma nuvem de palavras correspondente.
Mais propriamente, o resultado deve ser uma visualização onde todas as palavras com mais de x
ocorrências aparecem numa posição aleatória, e com um tamanho relativo ao número de vezes que a
palavra ocorre. A Figura 4.11 para o exemplo de um texto de uma nuvem resultante.

Apita o comboio que coisa tão linda

Apita o comboio perto de Coimbra
Apita o comboio lá vai apitar
Apita o comboio à beira do mar
à beira do mar, mesmo à beirinha
Apita o comboio no centro da linha

Apita o comboio debaixo do chão

Apita o comboio çá na estação
Apita o comboio lá vai a apitar
Apita o comboio à beira do mar
à beira do mar, mesmo à beirinha
Apita o comboio no centro da linha

Apita o comboio sobre o rio Douro

Apita o comboio ao chegar ao Porto
Apita o comboio lá vai à apitar
Apita o comboio à beira do mar
à beira do mar, mesmo à beirinha
Apita o comboio no centro da linha

Apita o comboio logo de manhã

Vai cheio de moças para à covilhã
Apita o comboio lá vai à apitar
Apita o comboio à beira do mar
à beira do mar, mesmo à beirinha
Apita o comboio no centro da linha

Figura 4.11: Texto e possível nuvem resultante.

39
Capítulo 5

Vídeo

5.1 Classe Movie

Consultar Learning Processing, D. Shiffman, Cap. 16

5.1.1 Tint aleatório

Crie um programa que reproduza um vídeo em loop e aplique de 5 em 5 segundos um filtro de cor
aleatória. Na Figura 5.1 pode ver quatro capturas de ecrã de um programa exemplo.

Figura 5.1: Quatro frames exemplo do exercício 5.1.1 “Tint aleatório”.

Recomenda-se que recorra à variável frameCount para determinar se passaram 5 segundos (documentação
disponível em https://processing.org/reference/frameCount.html).

40
 Ficha 5.1

5.1.2 Play Pause Duplo

Crie um programa que reproduza dois vídeos lado a lado. O programa deve apenas reproduzir um vídeo
de cada vez: quando o vídeo da esquerda está em reprodução, o da direita está em pausa, e vice-versa.
A transição entre pausa e reprodução deve ser feita com um clique do rato na janela.

5.1.3 Bloco aleatório

Construa um programa que reproduza e renderize um vídeo de forma a que apenas uma pequena região
retangular do vídeo seja visível de cada vez. A região de vídeo a renderizar deve ser um retângulo de
200×150 pixels. De cada vez que se pressiona uma tecla do teclado, deve ser escolhida aleatoriamente
uma nova região. Na Figura 5.2 pode ver quatro capturas de ecrã relativas a quatro blocos diferentes.

Figura 5.2: Quatro frames exemplo do exercício 5.1.3 “Bloco aleatório”.

5.1.4 Barra de reprodução

Construa um programa que reproduza um vídeo com frames de 640x480 numa janela, em loop,
desenhando por baixo dele uma barra azul de altura 20 e largura igual à das frames. Desenhe ainda um
cursor amarelo de largura 10 que se mova por cima da barra azul, da esquerda para a direita, à medida
que o vídeo é reproduzido, de forma a que, no início, o cursor esteja encostado ao lado esquerdo da barra,
e no final encostado ao seu lado direito (ver Figura 5.3 com capturas de ecrã de três momentos).

41
 Ficha 5.1

Figura 5.3: Três frames ilustrando o cursor a deslocar-se da esquerda para a direita com a reprodução
do vídeo.

5.1.5 Slitscan
Escreva um programa que crie o efeito "slitscan"1 sobre um vídeo. Resumidamente, a técnica consiste
em extrair apenas a coluna central de cada frame do vídeo e desenhar essa coluna de pixels numa
posição da janela que varia entre 0 e a largura da janela. O diagrama da Figura 5.4 exemplifica o
funcionamento da técnica.

Frame 1 Frame 2 Frame n

Coluna
central

Janela do Processing

Figura 5.4: Diagrama explicativo da técnica “slitscan”

1 https://en.wikipedia.org/wiki/Slit-scan_photography

42
 Ficha 5.1

5.1.6 Grelha de vídeo

Crie um programa que reproduza um vídeo da seguinte forma:

1. Divida a imagem do vídeo numa grelha (e.g., 4×4)

2. De 5 em 5 segundos, escolha uma célula dessa grelha de forma aleatória e reproduza apenas o
conteúdo vídeo dentro dessa célula
3. De 5 em 5 segundos, “salte” para um instante aleatório no vídeo.

4. Não limpe a janela.

A Figura 5.5 mostra uma captura de ecrã ao fim de alguns segundos.

Figura 5.5: Captura de ecrã do programa pretendido.

43
 Ficha 5.2

5.2 Captura
5.2.1 Ponto mais brilhante
Escreva um programa que mostre na janela o vídeo da câmara e determine a posição do pixel mais
brilhante, desenhando nessa posição um círculo colorido semi-transparente.
Para obter o valor do brilho de um píxel pode recorrer à função brightness().

5.2.2 Slitscan: câmara

Reescreva o programa desenvolvido no Exercício 5.1.5 “Slitscan” para usar a câmara de vídeo.

5.2.3 Espelho
Crie um programa que desenhe, de forma espelhada, a imagem da câmara. O programa deve desenhar do
lado esquerdo da janela metade da imagem da câmara; do lado direito deve desenhar a mesma metade,
mas de forma espelhada.
Clicando na janela, o programa deve alternar entre o espelhamento segundo a linha média vertical e
segundo a linha média horizontal. A Figura 5.6 mostra duas capturas de ecrã do programa proposto.

Figura 5.6: Capturas de ecrã do programa a desenvolver. Lado esquerdo: espelhamento segundo linha
média vertical; lado direito: espelhamento segundo linha média horizontal.

5.2.4 Ponto mais brilhante interativo

Modifique o exercício 5.2.1 – “Ponto mais brilhante” – de forma a adicionar interactividade da seguinte
forma:
• Desenhe uma imagem (M), numa posição aleatória, sobre a imagem da câmara.
• Sempre que o pixel mais brilhante estiver sobre a imagem M, escolha uma nova posição aleatória
para a imagem.

Use a lanterna do smartphone para interagir com o programa como exemplificado na Figura 5.7.

5.2.5 Detetor de movimento

Crie um programa que detete movimento através da câmara. Use como base os exemplos de subtração de
frames (capture_5_subtraccao_frames) e binarização (capture_3_brightnessthresholding) de forma a

44
 Ficha 5.2

Figura 5.7: Capturas de ecrã do programa a desenvolver.

contar o número de pixels que correspondem a movimento na imagem. Para tal, pode seguir os seguintes
passos:
1. Calcular a diferença entre frames consecutivas.
2. Binarizar a imagem correspondente à diferença entre frames.
3. Contar o número de pixels brancos (N ) na imagem binarizada.

Se N exceder um limite definido por si, o programa deve escrever no centro da janela a mensagem
“Movimento detetado”. A Figura 5.8 mostra duas capturas de ecrã exemplificativas.

Figura 5.8: Capturas de ecrã do programa a desenvolver.

45
 Ficha 5.2

5.2.6 Movimento com ruído

Crie um programa que capture a imagem da câmara de vídeo e que desenhe numa janela apenas uma
parte dos pixels de cada frame lida. Mais concretamente, cada pixel deverá ser copiado para a janela
com uma dada probabilidade (p.ex., 50%). Como resultado, observar-se-á uma espécie de ruído sempre
que haja movimento na imagem.
Adicionalmente, o programa deveré permitir o aumento/diminuição da probabilidade de cópia de
cada pixel com o recurso às teclas com seta para cima e para baixo, embora garantindo que o valor da
probabilidade nunca sai do intervalo entre 10% e 90%.

5.2.7 Brilho e Saturação

Crie um programa que desenhe a imagem capturada da câmara realizando as seguintes alterações:

• cada pixel da imagem da câmara que tenha brilho superior a 75% do brilho máximo da imagem
deverá ser desenhado em cor amarela;

• cada pixel da imagem da câmara que tenha saturação superior a 75% da saturação máxima da
imagem deverá ser desenhado em cor azul;
• cada pixel da imagem da câmara que tenha simultaneamente brilho superior a 75% do brilho
máximo da imagem e saturação superior a 75% da saturação máxima da imagem, deverá ser
desenhado em cor vermelha;

Por exemplo, se a cãmara estiver a captar a imagem do lado esquerdo da Figura 5.9, deverá desenhar
o que está à sua direita.

Figura 5.9: Imagem captada pela câmara (esquerda) e imagem desenhada (direita).

Desenhe ainda sobre a imagem, em cor vermelha, os valores máximos da frame atual para o brilho e
para a saturação.

5.2.8 Movimento e som

Adapte o exercício 5.2.5 de forma a que os movimentos controlem a reprodução de um som. Mais
especificamente, crie um oscilador de onda quadrática que deve reproduzir continuamente e cuja
frequência deve ser alterada de acordo com o número de píxeis considerados para a deteção de
movimento (N ).

46
Capítulo 6

Herança

6.1 Ecrãs e Botões

a) Implemente uma classe Botao de acordo com o diagrama na figura 6.1, com os atributos px, py,
largura, altura, cor, texto, fonte e pintar.
Um objeto desta classe pode ser construído de duas formas: dando-lhe apenas o texto e o nome de
uma fonte, o que implica a geração aleatória dos restantes atributos; ou dando todos os atributos
ao construtor. Em qualquer caso, o construtor deve criar uma fonte com nome (f ) e tamanho 14.
Para além disso:

• O método desenha() desenha um retângulo centrado em (px, py), com largura e altura, e com
o texto no seu centro, a preto, com o tipo fonte e tamanho 14. Caso a variável pintar seja
verdadeira, o retângulo deve ser preenchido com a cor ; caso contrário, o interior deve ficar
transparente, ou por preencher.
• O método pinta() verifica se o rato está dentro dos limites do retângulo e, em caso afirmativo,
altera a variável booleana pintar, que indica se o retângulo deve ser preenchido ou não.

Botao
px : int
py : int
largura : int
altura : int
cor : color
texto : String
fonte : PFont
pintar : boolean
Botao(String t, String f)
Botao(String t, String f, int x, int y, int l, int h, color c)
desenha() : void
pinta() : void

Figura 6.1: Diagrama da classe Botao.

b) Recupere o código do exemplo Ecrãs, nos slides sobre Herança, e crie um novo Ecrã (por exemplo,
EcraBotoes2), com um array de objetos Botao. Se quiser que o tipo de letra dos botões seja igual
ao do título dos ecrãs, pode obter o nome da uma fonte através de fonte.getName(). Experimente
o seu novo ecrã.
c) Crie uma nova classe que descende de Botao, mas que também tenha um som como atributo.
Reimplemente o método desenha() de forma a que, quando o rato passa por cima dos limites de

47
 Ficha 6.3

um objeto desta classe, um som seja reproduzido. Altere o novo ecrã de forma a que alguns dos
seus botões tenham som.

6.2 Bateria
Tire partido dos conceitos relacionados com Herança para resolver o exercício 1.4, Bateria. O exercício
envolve o desenho de uma bateria, com várias peças, cada uma com um som associado. Sugere-se a
criação de uma classe Peca, para representar uma peça da bateria, que tenha associadas as coordenadas
do centro, a largura, um som, e um nome. Deve ainda ter métodos para desenhar, tocar, verificar se o
rato está dentro do limite da peça, e retornar uma representação em String (nome da peça). Para peças
não-circulares, crie uma classe PecaRetangular, derivada de Peca, mas que tem mais uma dimensão para
a altura. O diagrama da figura 6.2 ilustra o conteúdo das classes sugeridas.

Peca
centro : PVector
largura : int
som : SoundFile
nome : String
Peca(String nome, PVector centro, int largura, SoundFile som)
desenha() : void
dentro() : boolean
toca() : void
toString() : String
PecaRetangular extends Peca
altura : int
PecaRetangular(String nome, PVector centro, int largura, int altura, SoundFile som)
desenha() : void
dentro() : boolean

Figura 6.2: Classes sugeridas para as peças de bateria.

a) Experimente o seu código, identifique alterações necessárias para o bom funcionamento das peças
retangulares, e implemente essas alterações, tirando partido do polimorfismo.

b) A reorganização proposta permite simplificar o código para desenhar as peças e também o conteúdo
da função mousePressed. Realize essas simplificações e, para lidar com os dois tipos de classe, tire
partido do polimorfismo. Por exemplo, as peças deverão ser todas colocadas num array e desenhadas
da seguinte forma:

for(int i = 0; i < pecas.length; i++)

pecas[i].desenha();

6.3 Efeitos em imagens

Crie uma classe Efeito, que tem como atributos nome (String) e cMode (inteiro) representando o modo
de cor, bem como os seguintes métodos:
• PImage aplica(PImage original), que retorna uma nova imagem igual à original (i.e., uma có-
pia).
• String toString(), que retorna a string “Efeito: ”, seguida do nome.
Sem mais nada, esta classe não serve de muito. No entanto, a partir dela será possível descender várias
classes que, ao reimplementar o método aplica(), podem ser usadas na aplicação de efeitos sobre imagens.
Ao reimplementar, o método deverá passar a devolver a imagem com o efeito aplicado. Com isto em

48
 Ficha 6.3

mente, crie classes para alguns dos efeitos aplicados em exercícios anteriores, tais como: Pontilhismo,
Binarizar, ou alterações com base no Brilho e Saturação.
Para concluir, crie um programa com uma imagem e uma ArrayList de Efeito, que comece por
adicionar os objetos das classes Efeito à ArrayList e desenhar a imagem na tela. A partir daí, sempre
que carregar num dígito, deve aplicar à imagem desenhada o efeito no índice correspondente. Ou seja,
será possível aplicar sequências de efeitos. Um clique no rato deve voltar a desenhar a imagem original.

49
Capítulo 7

Simulação Física

7.1 Cinemática
7.1.1 Bola com vento
a) Aplique os conceitos que aprendeu acerca da utilização de objetos PVector e simulação de bolas
“elásticas” na criação de uma classe Bola que permita representar bolas deste tipo, com os seguintes
atributos:
– Raio;
– Posição;
– Velocidade;
– Aceleração.
Cada bola deve ainda ter os seguintes três métodos:

– desenha(), para a desenhar;

– move(), para atualizar a sua posição;
– verificaLimites(), para detetar colisão com algum dos limites da janela e simular o efeito
da colisão.

Defina também um atributo constante para a velocidade máxima da bola.

b) Use em seguida a classe Bola para simular uma bola elástica que se desloca num ambiente com
gravidade, mas sem atrito. Os limites da janela são os limites do ambiente de simulação: quando a
bola toca um dos lados da janela, há uma colisão elástica. Considere ainda que a bola está sujeita
à ação do vento, e que esta é controlada pela posição horizontal do rato na janela:
– Quando o rato está do lado esquerdo da janela, o vento sopra da esquerda para a direita, e
quando está do lado direito, sopara da direita para a esquerda;
– Não há vento quando o rato está centrado na horizontal;
– A intensidade do vento é proporcional à distância, na horizontal, a que o rato está do centro
da janela.

50
 Ficha 7.2

7.1.2 Bolas
Recorra à classe Bola, que desenvolveu na pergunta anterior, para fazer uma simulação com 10 bolas,
inicializando cada uma da seguinte forma:
• Raio r entre 5 e 25;
• Posição aleatória (válida);
• Velocidade (1, 0);
• Aceleração (0, raio/100);

7.1.3 Colisão parcialmente inelástica

Simule uma bola que se desloca num ambiente com gravidade, mas sem atrito. Os limites da janela são
os limites do ambiente de simulação (600×400): quando a bola toca um dos lados da janela, há uma
colisão. Esta colisão não é, porém, elástica: de cada vez que a bola colide num dos limites, a velocidade
é sujeita a uma perda (diminui). A perda é proporcional à distância do rato ao bordo inferior da janela,
ou seja, ela é máxima quando o rato está no topo, e anula-se quando ele está no bordo inferior. Pode
incluir nesta simulação a existência de vento. Utilize a classe que criou no exercício 7.1.1.

7.2 Sistemas de Partículas

7.2.1 Bolas e Blocos
Desenvolva um sistema nos seguintes passos:

a) Crie uma classe Particula, de acordo com o diagrama da figura 7.1 para representar cada partícula.
Inicialmente, a vida deve ter um valor fixo, por exemplo, 255. A função atualiza() atualiza a
velocidade e a aceleração, sem permitir que a partícula passe do limite inferior da janela. Ao tocar
nesse limite, o som deve ser reproduzido, mas apenas uma vez e, enquanto estiver a tocar nele,
decremente 1 ao valor da vida. A função desenha() desenha, na posição atual, um círculo vermelho,
com transparência igual ao valor de vida, diâmetro igual ao valor da variável altura. Finalmente, a
função morreu() indica se a vida da partícula é 0 ou menos.
b) Escreva o código de um programa que abre uma janela 400×600 e, a cada click no rato, crie novas
partículas a partir da posição do ponteiro, todas com os seguintes parâmetros:
• Velocidade em x com um valor aleatório entre -1 e 1, e em y um valor aleatório entre -2 e 0;
• Aceleração em x igual a 0, e em y igual a 0,05;
• Cor vermelho, diâmetro 25, e um som curto à sua escolha.
c) Crie agora classes para representar dois tipos de partícula: bolas de borracha e blocos de cimento.
As bolas de borracha devem ter:
• Velocidade em x com um valor aleatório entre -1 e 1, e em y um valor aleatório entre -2 e 0;
• Aceleração em x igual a 0, e em y igual a 0,2;
• Cor azul, diâmetro 15, e um som curto, à sua escolha1 .
Para além disso, sempre que uma bola de borracha bate no limite inferior da janela, ela deve saltar,
e a sua aceleração deve ser multiplicada por 1,5. Os blocos de cimento devem:
1 Para uma classe carregar um som, ela precisa de saber qual é o ficheiro principal do seu programa. Esse ficheiro é

do tipo PApplet e pode ser passado através da palavra this, no próprio ficheiro. Ou seja, para um objeto receber uma
referência para o programa principal, ela deve ter um parâmetro do tipo PApplet, que pode depois ser utilizado na criação
de um SoundFile.

51
 Ficha 7.2

• Ter um novo parâmetro, largura, com um valor aleatório entre 30 e 60;

• Ser desenhados em forma de um retângulo, com altura igual ao valor de altura e a largura
igual ao valor de largura.
Os restantes parâmetros devem ser:
• Velocidade em x com um valor aleatório entre -0,5 e 0,5, e em y um valor aleatório entre -2 e 0;
• Aceleração em x igual a 0, e em y igual a um décimo do valor da largura;
• Cor cinzento, altura 30, e um som curto, à sua escolha, diferente do anterior.
d) Altere o programa anterior de forma a que, sempre que clica no rato, o programa escolhe
aleatoriamente entre lançar uma bola de borracha ou um bloco de cimento. A figura 7.2 ilustra um
possível resultado ao lançar um bloco, depois de se ter já lançado outros dois blocos e duas bolas.

Particula
posicao : PVector
velocidade : PVector
aceleracao : PVector
vida : int
altura : int
cor : color
som : SoundFile
Particula(PVector pos, PVector vel, PVector acel, color c, int h, SoundFile s)
atualiza() : void
desenha() : void
morreu() : boolean

Figura 7.1: Classe Partícula.

7.2.2 Chuva
Desenvolva uma simulação de chuva. Comece por desenvolver uma classe Pingo, que deve ter os seguintes
atributos e métodos:
• Comprimento c;
• Posição;
• Velocidade;
• Aceleração;
• desenha(), para desenhar um pingo (linha azul);
• move(), para a atualizar a sua posição;
• boolean fim(), para informar se o pingo chegou ao fundo da janela.
A simulação deve criar instâncias da classe Pingo, adicioná-las a uma estrutura de dados adequada,
e animá-las. Ainda que seja interessante introduzir alguma aleatoriedade, defina valores coerentes com
os atributos de um pingo, que, entre outros, se deve mover de cima para baixo.
A sua simulação deve ainda permitir a alteração dos seguintes parâmetros:
• frequência: número de pingos criados em cada frame, que pode ser controlado através das teclas
do teclado;
• aceleração dos pingos: controlada pela posição do ponteiro do rato.
Quando um pingo chega ao fundo da janela, ele deve ser removido da estrutura de pingos. A Figura 7.3
exemplifica os possíveis resultados.

52
 Ficha 7.2

Figura 7.2: Programa no momento em que um bloco é lançado, depois de terem já sido lançadas duas
bolas e dois blocos.

(a) Chuva com o rato próximo do canto inferior

esquerdo e frequência 5. (b) Figura com o rato mais à direita e frequência 1.

Figura 7.3: Exemplos de chuva.

53