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
Espaços de armazenamento de informaçã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
+ -Representação da memória do computador
Armário cheio de gavetas
Declaração de variáveis
tipo nome;
+ -tipo nome = valor;
Defina uma variável chamada "nome" do tipo "tipo", que inicia com valor inicial de valor
int minhaVar = 10;
Defina uma variável chamada "minhaVar" do tipo "int", que inicia com valor inicial de 10
+ - tipo
Tipo de objetos que "cabem na gaveta"
Não pode mudar de tipo 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
,
int a, b, c;
+ - 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
Definidas pelo Processing
+ -
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
+ - ~ width
+ - ~ height
frameCount: no modo contínuo, é um número inteiro que contém o número de frames mostrados desde o início da execução do programa. Cada chamada ao método draw incrementa este valor;
frameRate: valor aproximado de taxa de atualização máxima de frames na execução do programa em modo contínuo; online: valor lógico que representa se o programa está sendo executado dentro de uma página Web ou não; screen.width: largura da tela do computador em pixels; screen.height: altura da tela do computador em pixels; mouseButton: indica qual dos botões do mouse foi pressionado (LEFT, CENTER ou RIGHT); mousePressed: valor lógico que indica se qualquer botão do mouse foi pressionado; mouseX: posição horizontal do mouse (eixo X) no frame atual; mouseY: posição vertical do mouse (eixo Y); pmouseX: posição horizontal do mouse (eixo X) no frame anterior; pmouseY: posição vertical do mouse (eixo Y) no frame anterior; key: contém o valor da mais recente tecla pressionada ou solta; keyCode: usada para detectar o pressionamento de teclas especiais como UP, DOWN, RIGHT e LEFT; keyPressed: valor lógico que indica se qualquer tecla foi pressionada.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
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
+ - Usando variáveis para desenhar textos e imagens
~ Passo a passo para exibir textos
+ - Tipo PFont
+ - 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
Funções tem Parâmetros e Retorno
+ -Podem ter efeitos colaterais
Relembrando a anatomia de um código
Funções sem retorno
Função com retorno
Composição de funções
Armazenamento do retorno da função
+ - 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
Criação de funções sem parâmetros e sem retorno
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
Declaração de uma função sem parâmetro e sem retorno
void nome() {
instruções;
}
void desenharCabeca() {
noFill();
ellipse(40,20,10,10);
ellipse(60,20,10,10);
ellipse(50,30, 40,40);
}
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
Chamada a uma função sem parâmetro e sem retorno
Escrever o nome da função
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
+ - 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);
+ - 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
+ - Legenda