Introdução à Programação Gráfica
usando Processing
DESENHO
+ - Objetivo
Apresentar o que é uma linguagem de programação
+ -Conhecer a ferramenta Processing que é voltada a programação de
Entender a sintaxe básica de uma instrução na linguagem
+ -Aprender a desenhar usando o Processing
O Processing na aula de hoje
Só hoje
Visualizar, modificar e brincar com exemplos básicos de código na linguagem
Brinque, Experimente
Misture
Conhecer nossa abordagem de desenvolvimento
Faça funcionar
Faça certo
Faça rápido
Entender que Programar pode ser para qualquer pessoa
+ - O que é programação de computadores
Programar é construir algoritmos usando estruturas de controle, para manipular informações.
Programas devem ser feitos para seres humanos
+ - Exemplos de algoritmos
Receita de bolo
+ - Estruturas de Controle
Repetir
while, repeat, do while, for
+ - Informação
Material que o algoritmo manipula
Ingredientes do bolo
+ - Tipos básicos
+ - Hello, Processing!
Aprender linguagem de programação é aprender um novo idioma
+ - Componentes
Permitem dar ordens ao programa
rect(10,10,20,20);
size(100,100);
Recebe parâmetros separados por ,
Tem retorno
+ - Funções são sensíveis ao caso
size
(300 ,
200 );
background( 200)
;
+ - Sistema de Coordenadas Cartesianas
Por padrão a tela é de 100 pixels x 100 pixels
+ -
Pixels são pontos na tela
+ - Função size
Eixo invertido em relação à matemática
+ - Ponto X Pixel
+ - Linha X Pixel
+ - Retângulo X Pixel
O eixo pode ser transformado
+ - Cores
+ - Pincel X Preenchimento X Fundo
+ - Ângulos
~
A função rotate permite a rotação do eixo
+ -Rotações também podem ser feitas em relação aos eixos
Rotações devem ser em radianos
+ - Formas geométricas
Funções que trabalham com formas primitivas retas
Dezenas de funções de desenho
+ - Constantes
Valores que não mudam no código
Constantes não variam com o tempo durante a execução de um programa
+ - Exemplos de constantes
+ - Exemplo de código
No exemplo, há 10 valores constantes
size(300, 200); line(100, 0, 100, 200); line(200, 0, 200, 200);
+ - Variáveis
+ - O que são
Podem ser alteradas em algum instante da execução
Armazenadas na memória do computador
Cada variável é uma gaveta com um rótulo
Variáveis podem ser reutilizadas infinitas vezes
+ -Memória do computador
Armário cheio de gavetas
Declaração de variáveis
tipo nome;
tipo nome = valor;
+ - tipo
Tipo de objetos que "cabem na gaveta"
Não pode mudar durante a execução
int a = 13.3; // Erro!
float a = 1;
int b = a + 12.4; // Erro!
+ - nome
O que está no "rótulo da gaveta"
+ - Não pode conter
Deve ser único
// Código com erro
float a= 12;
int a = 13;
+ - valor
+ - Exemplos
// a começa com valor 1
int a = 1;
// b começa com valor 2
int b = 2;
// c começa com valor 3
int c = a + b;
// d tem valor desconhecido.
int d;
// s começa com valor "Bruno"
String s = "Bruno";
Para serem usadas variáveis devem possuir primeiro um valor
int a = 1; // a começa com valor 1
int b = 2; // b começa com valor 2
int c = a + b; // c começa com valor 3
int d; // d tem valor desconhecido
int e = d * 2; // e é igual ao dobro de d, esta linha levanta um erro!
Atribuição de valor em uma variável
=
Leitura da direita para a esquerda
+ - variavel = valor;
+ - variável = chamada à função
+ - variável = expressão
+ - Exemplo
int a = 1; // a começa com valor 1
int b = 2; // b começa com valor 2
int c = a + b; // c começa com valor 3
int d;
d= 4;
int e = d * 2; // e é igual ao dobro de d, ou seja 8.
Declaração resumida de variáveis
,
+ - Variáveis do mesmo tipo
+ - Exemplo
int a, b, c, d, e;
a = 1; // a começa com valor 1
b = 2; // b começa com valor 2
c = a + b; // c começa com valor 3
d= 4;
e = d * 2; // e é igual ao dobro de d, ou seja 8.
Variáveis do Processing
Não precisam ser declaradas
+ -Deixam o programa adaptável
size(300, 200); line(100, 0, 100, 200); line(200, 0, 200, 200); line(0, 100, 300, 100);
size(450, 100); line(width/3, 0, width/3, height); line(width/3*2, 0, width/3*2, height); line(0, height/2, width, height/2);
+ - Algumas variáveis úteis
Exibição de variáveis
Usando as variáveis width e height para deixar o programa com resolução dinâmica
size(500,500);
line(250,0,250,500);
ellipse(250, 125, 83, 83);
rect(166, 166, 166, 166);
rect(166,332, 41, 166);
rect(291, 332, 41, 166);
Se a resolução da tela muda, a proporção é perdida
size(500,500);
line(width/2,0,width/2,height);
ellipse(width/2, height/4, width/6, height/6);
rect(width/3, height/3, width/3, height/3);
rect(width/3,height/3*2, width/12, height/3);
rect(width/3*2-width/12,height/3*2, width/12, height/3);
Usando variáveis para centralizar configurações
size(600,500);
color corCabeca = color(255,0,0);
color corCorpo = color(0,255,0);
color corPerna = color(0,0,255);
line(width/2,0,width/2,height);
fill(corCabeca);
ellipse(width/2, height/4, width/6, height/6);
fill(corCorpo);
rect(width/3, height/3, width/3, height/3);
fill(corPerna);
rect(width/3,height/3*2, width/12, height/3);
rect(width/3*2-width/12,height/3*2, width/12, height/3);
+ - Teste de mesa
Técnica para descobrir o valor das variáveis de um programa
Crie uma tabela em que cada coluna representa o valor de uma variável
Cada coluna indica uma variável
Cada linha indica a modificação da variável
Execute passo a passo o algoritmo
+ - Exibição de Texto na tela
+ - Função text
Em um ponto qualquer, escreve um texto
+ -Antes de exibir o texto é necessário selecionar a fonte
+ - Documentação
+ - Sintaxe
+ - Parâmetros
+ - Função textFont
Seleciona a fonte atual
+ - Documentação
+ - Sintaxe
+ - Parâmetros
+ - Função createFont
Converte fonte disponível no computador para Processing
Processo lento para criação da fonte
+ - Documentação
+ - Sintaxe
+ - Parâmetros
+ - Retorno
+ - Função loadFont
Carrega uma fonte gerada anteriormente
+ -Usa ferramenta de geração de fontes
A fonte dentro da pasta do projeto
+ - Documentação
+ - Sintaxe
+ - Parâmetros
+ - Retorno
Listar as fontes disponíveis no sistema
+ - Exemplo
PFont font; // A fonte deve ser criada através da ferramenta de geração de fontes // Ela é armazenada dentro da pasta "data" dentro do projeto font = loadFont("AgencyFB-REG-48.vlw"); // Carrega a fonte textFont(font, 32); // Seleciona a fonte com tamanho 32 text("word", 15, 50); // Exibe o texto na posição 15,50
+ - Chamada a Funções
Tem Parâmetros e Retorno
+ -Podem ter efeitos colaterais
Anatomia de um código
Funções sem retorno
Função com retorno
Composição de funções
Armazenamento do retorno da função
+ - Operadores e Expressões
Expressões Aritméticas
Adiciona dois valores
Concatena strings
Incrementa uma variável
Desloca para a direita no eixo x
Descola para baixo no eixo y
+ - Documentação
+ - Exemplos
Subtrai dois valores
Desloca para esquerda no eixo x
Desloca para cima no eixo y
+ - Documentação
+ - Exemplos
Multiplica dois valores
Reescalonamento de uma posição ou tamanho
Multiplicar por zero esconde um desenho
+ - Documentação
+ - Exemplos
Divide um valor por outro
Reescalonamento de uma posição
Útil em animações periódicas
+ - Documentação
+ - Exemplos
Resto inteiro da divisão
6 % 3 é igual a 0, já que 6 dividido por 3 dá 2 e o resto é 0, então 6 % 3 é igual a 0
14 % 4 é igual a 2, já que 14 dividido por 4 é igual a 3 (4*3 = 12) e o resto é 2, então 14 % 4 é igual a 2;
35 % 3 é igual a 2, já que 35 dividido por 3 é igual a 11 ( 3 * 11 = 33) e o resto é 2, então 35 % 3 é igual a 2;
3 % 10 é igual a 3, já que 3 dividido por 10 é igual a 0 (3 * 0 = 0) e o resto é 3, então 3 % 10 é igual a 3.
Útil em animações periódicas
Útil para repetição de padrões periódicos
Restringe um conjunto de números a um intervalo
+ - Tabela Exemplo
x | x % 3 |
0 | 0 |
1 | 1 |
2 | 2 |
3 | 0 |
4 | 1 |
5 | 2 |
6 | 0 |
7 | 1 |
8 | 2 |
9 | 0 |
10 | 1 |
11 | 2 |
+ - Documentação
+ - Exemplos
Expressões Relacionais
+ - ==
Igualdade
Devolve verdadeiro quando dois operandos são iguais
3==3 é igual a verdadeiro
3==4 é igual a falso
+ - !=
+ - >
+ - <
+ - >=
+ - <=
+ - Exemplo
Conversão de boolean para inteiro
Usar a função int
+ - Documentação
+ - Exemplo
...
+ - Criação de funções
Divisão de um problema complexo em pedaços menores
Reduz complexidade
Facilita a manutenção
Permite o compartilhamento de código
Técnica de refinamentos sucessivos (top down)
Também existe técnica bottom-up
+ - Cada pedaço é um
Vamos chamar o pedaço associado à função de bloco de código
+ - Definição de blocos
+ - {
+ - }
O Processing ajuda a localizar as chaves
+ - ~ Funções
são formadas por um bloco principal
podem ser chamadas a partir de seu nome
+ - tem
Função setup
Chamada automaticamente quando o programa inicia
Pode chamar outras funções
+ - Exemplo
void setup() {
rect(10,10,80,80);
rect(30,30,60,60);
}
Se você usar a função setup todos os comandos deverão ser chamados a partir dela
+ - Erros comuns
Colocar comando fora do setup
Esquecer a abertura da chave
Esquecer o fechamento da chave
Declaração da função
tipo retorno nome(parametros) {
instruções;
// Opcional:
return valor;
}
+ -Função sem parâmetros e sem retorno
void desenharCabeca() {
noFill();
ellipse(40,20,10,10);
ellipse(60,20,10,10);
ellipse(50,30, 40,40);
}
Função com parâmetros e sem retorno
void desenharCabeca(float diametro) {
noFill();
ellipse(40,20,diametro/4,diametro/4);
ellipse(60,20,diametro/4,diametro/4);
ellipse(50,30,diametro,diametro);
}
void setup() {
desenharCabeca(60);
}
Função sem parâmetros e com retorno
color sortearCor() {
float vermelho = random(0,256);
float verde = random(0,256);
float azul = random(0,256);
color c = color(vermelho, verde, azul);
return c;
}
void setup() {
color c = sortearCor();
background(c);
}
Função com parâmetros e com retorno
float maiorDistancia(float x1, float y1, float x2, float y2, float x3, float y3) {
float dist1 = dist(x1,y1,x2,y2);
float dist2 = dist(x1,y1,x3,y3);
float maxDist = max(dist1,dist2);
return maxDist;
}
void setup() {
line(10,10,20,20);
line(10,10,10,50);
float maiorDistancia = maiorDistancia(10,10,
20,20,
10,50);
println("Distancia maxima:" + maiorDistancia);
}
Chamada a uma função criada
Escrever o nome da função seguido dos parâmetros
void desenharCabeca() {
noFill();
ellipse(40,20,10,10);
ellipse(60,20,10,10);
ellipse(50,30, 40,40);
}
void setup() {
desenharCabeca();
}
Boa prática de formatação de código
+ - endentação de código
dois espaços na frente de cada comando
+ - Bom
Legível
Fácil de dar manutenção
void setup() {
line(10,10,20,20);
line(10,10,10,50);
}
+ - Razoável
void setup() {
line(10,10,20,20);
line(10,10,10,50);
}
+ - Ruim
void setup() {
line(10,10,20,20);
line(10,10,10,50);
line(10,10,20,20);
}
+ - Formatação automática CTRL + T
As variáveis criadas em uma função valem apenas para esta função
+ - Entrada de Dados
Não tem por padrão no Processing
+ - Comando do Java
String nome = javax.swing.JOptionPane.showInputDialog("Qual é seu nome?");
textAlign(CENTER);
PFont f = createFont("",10);
textFont(f);
text("Oi, " + nome, width/2, height/2);
String sDiametro = javax.swing.JOptionPane.showInputDialog("Qual é o diâmetro do círculo?");
float diametro = float(sDiametro);
ellipse(width/2,height/2,diametro,diametro);
Funções recursivas infinitas
Funções recursivas são funções que chamam a si próprias
Recursivas infinitas chamam a si próprias infinitas vezes
+ -A natureza é rica em estruturas recursivas
+ - Úteis para
criar estruturas complexas que possuem partes que se repetem
+ - desenhar
Recursão é bastante difícil de entender
O pensamento humano não é recursivo
É difícil de chegar em uma solução nova sem experiência em recursão
Existem figuras que só podem ser desenhadas via código
+ -Modelo de recursão infinita
void funcao() {
// Passo a ser repetido
funcao();
}
Modelo de recursão infinita com passagem de parâmetros
void funcao(int a) {
// Passo a ser repetido
// Faça algo com o valor de a
funcao(a);
}
Acompanhando uma função infinita passo a passo
// Esta função salva um arquivo de imagem no formato
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void funcao() {
// Passo a ser repetido
salvarPasso();
funcao();
}
+ - Exemplo
// Esta função salva um arquivo de imagem no formato
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void retanguloRecursivo() {
rectMode(CENTER); // Os dois primeiros parâmetros determinam o centro do retângulo
rect(0,0,100,100);
rotate(PI/8); // Rotaciona 12 graus
salvarPasso();
retanguloRecursivo();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
retanguloRecursivo();
}
+ - Desenhando
Um objeto é desenhado dentro do outro
+ -O objeto interior é semelhante ao exterior
+ - Exemplos
// Esta função salva um arquivo de imagem no formato
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void retanguloConcentrico() {
rectMode(CENTER);
rect(0,0,100,100);
scale(0.9);
salvarPasso();
retanguloConcentrico();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
retanguloConcentrico();
}
// Esta função salva um arquivo de imagem no formato
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void circuloConcentrico() {
ellipse(0,0,100,100);
scale(0.7);
salvarPasso();
circuloConcentrico();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
circuloConcentrico();
}
Um objeto é formado por outros menores
Pode ser formado pela rotação de um objeto não concêntrico
+ - Exemplo
// Esta função salva um arquivo de imagem no formato
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void trianguloComposto() {
beginShape();
vertex(-10,0);
vertex(0,-100);
vertex(10,0);
endShape(CLOSE);
rotate(PI/4);
salvarPasso();
trianguloComposto();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
trianguloComposto();
}
Gerados a partir da repetição de linhas de tamanho igual
+ -A soma dos ângulos externos de um polígono convexo é igual a
+ - Ângulos externos
+ - Exemplos
// Esta função salva um arquivo de imagem no formato
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void hexagono() {
line(0,0,0,-50);
translate(0,-50);
rotate(2*PI/6);
salvarPasso();
hexagono();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
hexagono();
}
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void octogono() {
line(0,0,0,-50);
translate(0,-50);
rotate(2*PI/8);
salvarPasso();
octogono();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
octogono();
}
+ - Função genérica para desenhar qualquer polígono regular
void poliReg(float passo, float lados) {
line(0,0,0,-passo);
translate(0,-passo);
rotate(2*PI/lados);
salvarPasso();
poliReg(passo, lados);
}
+ - Exemplo
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void poliReg(float passo, float lados) {
line(0,0,0,-passo);
translate(0,-passo);
rotate(2*PI/lados);
salvarPasso();
poliReg(passo, lados);
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
poliReg(30, 5);
}
Procedimento semelhante ao de um polígono regular
Alterando o ângulo externo de uma estrela se altera o número de pontas
Cada vez que se realiza um giro de 360 graus a estrela é fechada
+ - Exemplo
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void estrelaDe5Pontas() {
line(0,0,0,-50);
translate(0,-50);
rotate(radians(144));
salvarPasso();
estrelaDe5Pontas();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
estrelaDe5Pontas();
}
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void estrela() {
line(0,0,0,-50);
translate(0,-50);
rotate(radians(80));
salvarPasso();
estrela();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
estrela();
}
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void estrela() {
line(0,0,0,-50);
translate(0,-50);
rotate(radians(150));
salvarPasso();
estrela();
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
estrela();
}
+ - Função genérica para desenhar estrelas e polígonos
void poli(float passo, float angulo) {
line(0,0,0,-passo);
translate(0,-passo);
rotate(radians(angulo));
salvarPasso();
poli(passo, angulo);
}
Poliespirais são polígonos cujo lado cresce ou diminui a cada passo
+ - Exemplo
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void poliEspiral(float passo, float angulo, float incremento) {
line(0,0,0,-passo);
translate(0,-passo);
rotate(radians(angulo));
salvarPasso();
poliEspiral(passo+incremento, angulo, incremento);
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
poliEspiral(10,45,2);
}
+ - Mais Exemplos de poliespirais
Espirais também podem ser desenhadas com pontos ou círculos em suas extremidades
+ - Exemplo
void espiral(float passo, float angulo, float incremento) {
ellipse(0,-passo,10,10);
translate(0,-passo);
rotate(radians(angulo));
salvarPasso();
espiral(passo+incremento, angulo, incremento);
}
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
espiral(10,122,3);
}
void espiral(float passo, float angulo, float incremento) {
ellipse(0,-passo,10,10);
translate(0,-passo);
rotate(radians(angulo));
salvarPasso();
espiral(passo+incremento, angulo, incremento);
}
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
espiral(10,92,3);
}
Espiral Implodida
Ao invés de variar o passo, varia-se o ângulo
+ - Exemplo
void inspiral(float passo, float angulo, float incremento) {
line(0,0,0,-passo);
translate(0,-passo);
rotate(radians(angulo));
salvarPasso();
inspiral(passo, angulo+incremento, incremento);
}
// Esta função salva um arquivo de imagem no formato png
void salvarPasso() {
// Seleciona o arquivo para salvar a imagem
String arquivo = selectOutput();
// Salva o arquivo no formato png.
save(arquivo+".png");
}
void setup() {
size(300,300);
background(255);
translate(width/2, height/2);
inspiral(20,10,10);
}
+ - ~ Parte 2
+ - Referências
Daniel Shiffman
2008
Nível iniciante
Adaptado do livro Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright 2008 Elsevier Inc.
Inglês
Daniel Shiffman
2008
Nível iniciante
Adaptado do livro Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright 2008 Elsevier Inc.
Inglês
Ira Greenberd
2007
Nível intermediário
Adaptado do Appendix B of Processing:Creative Coding and Computational Art, Ira Greenberg, Friends of ED, 2007
Capítulo 2 do Livro “Lógica de Programação – A Construção de Algoritmos e Estruturas de Dados” de Forbellone e Eberspächer. Páginas 17 a 21.
Capítulo 1 do Livro “Algoritmos Estruturados” de Farrer e outros. Páginas 47 a 50.
+ - A ferramenta Processing
Clique 2x no programa processing.exe