Introdução à Programação Gráfica
com Processing
Aula 01 – Lógica de Programação
Como obter e usar
•Site: http://processing.org/
•Download: https://processing.org/download/
•Aprendizado: http://processin...
Hello world!
void setup(){
size(500,500);
background(255);
smooth();
}
void draw(){
ellipse(mouseX,mouseY,50,50);
}
Conhecendo o Ambiente de Desenvolvimento
http://www.processing.org/reference/environment/
Conhecendo o Ambiente de Desenvolvimento
Menus:
File Edit Sketch Tools Help
Sequência e Sintaxe
void setup(){
size(500,500);
background(255);
smooth();
}
void draw(){
ellipse(mouseX,mouseY,50,50);
}...
Estrutura básica
void setup(){
size(500,500); //função
background(255); //função
smooth();
}
void draw(){ //loop
if(mouseP...
Funções e Parâmetros
//Ativo//
void setup(){
}
void draw(){
}
//Estático//
size(x,y);
background(cor);
ellipse(x,y,comprim...
Funções e Parâmetros
//Sintaxe//
funcao(parametro1,parametro2,parametro3, ... , parametroN);
Funções e Parâmetros
void setup(){ //função ativa de inicialização. Só é chamada uma vez na execução.
size(500,500); //def...
Sistema de Coordenadas
*Variáveis do sistema: width e height
Sistema de Coordenadas
//Teste//
void setup(){
size(500,500);
background(255);
smooth();
noFill();
}
void draw(){
ellipse(...
Formas Geométricas Básicas
line(x1,y1,x2,y2);
ellipse(x,y,comprimento,altura);
rect(x,y,comprimento,altura);
triangle(x1,y...
Formas Geométricas Básicas
line(x1,y1,x2,y2);
ellipse(x,y,comprimento,altura);
rect(x,y,comprimento,altura);
triangle(x1,y...
Formas Geométricas Básicas
Formas Geométricas Básicas
Outras Formas
arc( );
point( );
quad( );
bezier();
curve();
http://processing.org/reference/
Cor e Contorno
Funções
background(color); //fundo da tela
fill(color); //preenchimento de formas
stroke(color); //contorno...
Cor e Contorno
Escala de cinza
background(gray);
fill(gray);
stroke(gray);
Cor e Contorno
Padrão RGB
background(red, green, blue);
fill(red, green, blue);
stroke(red, green, blue);
•Red + Green = Y...
Cor e Contorno
Alfa
//Colorido e com transparência//
background(red, green, blue, alpha);
fill(red, green, blue, alpha);
s...
Cor e Contorno
Outras funções de estilo
strokeWeight(weight); //espessura do contorno
noStroke(); //retira o contorno
noFi...
Estrutura de Animação
Persistência da visão designa a ilusão provocada quando um objeto visto
pelo olho humano persiste na...
Estrutura de Animação
A função draw() é executada continuamente no programa, possibilitando a
criação de animações.
void s...
Estrutura de Animação
Animação com a função background
void setup(){
size(500,500);
background(255);
smooth();
noFill();
s...
Variáveis
Variáveis são usadas para armazenar dados. Elas facilitam a organização
do código e permitem o controle da infor...
Variáveis
Criação de variáveis
Para criar e utilizar um variável é necessário declará-la e inicializá-la.
Exemplo:
int x; ...
Variáveis
Tipo de dado Exemplo de uso Descrição
char char var = ‘a’; Uma letra ou símbolo
Unicode. É necessário
usar aspas...
Variáveis
Exemplo de criação e uso de variáveis
float x; //
float y; //declaração
void setup(){
size(500,500);
background(...
Variáveis
Operações com variáveis
Operador Nome Exemplo Resultado
= Atribuição num = 4; num armazena o valor 4.
+ Adição n...
Variáveis
Exemplo de criação e uso de variáveis
float x; //
float y; //declaração
void setup(){
size(500,500);
background(...
Variáveis
Atenção ao escopo da variável: a variável só é entendida dentro
da função onde ele é declarada. Se ela for decla...
Condicionais
If (Se)
Utilizamos a declaração if quando desejamos que o programa teste uma ou mais
condições e execute um o...
Condicionais
Operadores lógicos
Operador Operação
&& And
|| Or
! Not
== Igual a
!= Diferente de
> Maior que
< Menor que
>=...
Condicionais
Exemplo if:
float x;
float vx; //variavel de controle da velocidade
float y;
void setup() {
size(800, 500);
b...
Condicionais
Exemplo if:
float x;
float vx; //variável de controle da velocidade
float y;
float w, h, vw, vh; //variáveis ...
Condicionais
Else (senão)
A declaração else é usada para complementar a declaração if, criando um
bloco de comandos que sã...
Condicionais
Exemplo else:
float x;
float vx; //variavel de controle da velocidade
float y;
void setup() {
size(800, 500);...
Condicionais
If-else-if
As declarações ifs podem ser aninhadas para testarem várias condições.
//Sintaxe//
if (condição1)
...
CondicionaisExemplo if-else-if:
float x;
float vx; //variavel de controle da velocidade
float y;
int counter = 0; //conta ...
Loops
Loops, ou laços, permitem que o programa execute as mesmas tarefas
diversas vezes até uma condição de parada seja sa...
Loops
While (Enquanto)
//Sintaxe//
while( condição ) {
//código que
//será repetido
}
Loops
Exemplo while
void setup(){
size(500,500);
background(255);
smooth();
noFill();
}
void draw(){
float n = 0;
while(n ...
Loops
For (Para)
O laço for pode ser usado para fazer o mesmo que o while, mas de maneira mais
simples e eficiente na maio...
Loops
Exemplo for //fazendo o mesmo do exemplo while
void setup(){
size(500,500);
background(255);
smooth();
noFill();
}
v...
Loops
Exemplo for //aumentando o numero de iterações
void setup(){
size(500,500);
background(255);
smooth();
noFill();
}
v...
Criação de Funções
É possível criar suas próprias funções, agrupando comandos em um bloco
de código.
//Sintaxe//
tipo_de_r...
Criação de Funções
Porque usar funções ?
•Para permitir o reaproveitamento de código já construído (por você ou por
outros...
Criação de Funções
Exemplo
void setup() {
size(500, 500);
background(255);
smooth();
noFill();
}
void draw() {
drawCircles...
Inputs
Mouse
mouseButton
mouseClicked()
mouseDragged()
mouseMoved()
mousePressed()
mousePressed
mouseReleased()
mouseWheel...
Salvando imagens
Função saveFrame:
saveFrame(“image.jpg”); //salva uma imagem com o nome image e a
//extensão .jpge
saveFr...
Próximos SlideShares
Carregando em…5
×

Introdução a programação gráfica com Processing - Aula 01

1.010 visualizações

Publicada em

Primeira aula do minicurso de Processing promovido pelo Laboratório de Experiência Digital da UFC. São abordados os princípios básicos da programação computacional através da linguagem Processing.

Publicada em: Software
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.010
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
74
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução a programação gráfica com Processing - Aula 01

  1. 1. Introdução à Programação Gráfica com Processing Aula 01 – Lógica de Programação
  2. 2. Como obter e usar •Site: http://processing.org/ •Download: https://processing.org/download/ •Aprendizado: http://processing.org/tutorials/ •Referência: http://processing.org/reference/
  3. 3. Hello world! void setup(){ size(500,500); background(255); smooth(); } void draw(){ ellipse(mouseX,mouseY,50,50); }
  4. 4. Conhecendo o Ambiente de Desenvolvimento http://www.processing.org/reference/environment/
  5. 5. Conhecendo o Ambiente de Desenvolvimento Menus: File Edit Sketch Tools Help
  6. 6. Sequência e Sintaxe void setup(){ size(500,500); background(255); smooth(); } void draw(){ ellipse(mouseX,mouseY,50,50); } /*A sintaxe correta é indispensável para o funcionamento do código! Atente para o ponto-e-vírgula ao final de cada comando, para o as letras maiúsculas e minúsculas, para o uso de parênteses e colchetes e para a escrita correta dos comandos*/
  7. 7. Estrutura básica void setup(){ size(500,500); //função background(255); //função smooth(); } void draw(){ //loop if(mousePressed{ // condicional saveFrame(frameCount + ".png"); } ellipse(mouseX,mouseY,50,50); //mouseX e mouseY são variáveis } } //Sequencia de comandos //Variáveis //Condicionais //Loops //Funções
  8. 8. Funções e Parâmetros //Ativo// void setup(){ } void draw(){ } //Estático// size(x,y); background(cor); ellipse(x,y,comprimento,altura); smooth();
  9. 9. Funções e Parâmetros //Sintaxe// funcao(parametro1,parametro2,parametro3, ... , parametroN);
  10. 10. Funções e Parâmetros void setup(){ //função ativa de inicialização. Só é chamada uma vez na execução. size(500,500); //define a resolução da tela. background(255); //define a cor do fundo, no caso a cor branca. smooth(); //torna as formas mais polidas. Não recebe parâmetros. } void draw(){ //função ativa, é chamada continuamente durante a execução. ellipse(mouseX,mouseY,50,50); //desenha uma elipse. Os dois primeiros //parâmetros definem a posição nas coordenadas x e y e os dois últimos definem //o comprimento e a altura da elipse. } /*Comentários*/ //Comentários são notas que podem ser incluídas no código fonte para descrever //o que se quiser. Não modificam o programa executado e servem para ajudar o //programador a melhor organizar os seus códigos.
  11. 11. Sistema de Coordenadas *Variáveis do sistema: width e height
  12. 12. Sistema de Coordenadas //Teste// void setup(){ size(500,500); background(255); smooth(); noFill(); } void draw(){ ellipse(width/2,height/2,mouseX,mouseY); }
  13. 13. Formas Geométricas Básicas line(x1,y1,x2,y2); ellipse(x,y,comprimento,altura); rect(x,y,comprimento,altura); triangle(x1,y1,x2,y2,x3,y3);
  14. 14. Formas Geométricas Básicas line(x1,y1,x2,y2); ellipse(x,y,comprimento,altura); rect(x,y,comprimento,altura); triangle(x1,y1,x2,y2,x3,y3);
  15. 15. Formas Geométricas Básicas
  16. 16. Formas Geométricas Básicas
  17. 17. Outras Formas arc( ); point( ); quad( ); bezier(); curve(); http://processing.org/reference/
  18. 18. Cor e Contorno Funções background(color); //fundo da tela fill(color); //preenchimento de formas stroke(color); //contorno de formas
  19. 19. Cor e Contorno Escala de cinza background(gray); fill(gray); stroke(gray);
  20. 20. Cor e Contorno Padrão RGB background(red, green, blue); fill(red, green, blue); stroke(red, green, blue); •Red + Green = Yellow •Red + Blue = Purple •Green + Blue = Cyan (blue-green) •Red + Green + Blue = White •No colors = Black
  21. 21. Cor e Contorno Alfa //Colorido e com transparência// background(red, green, blue, alpha); fill(red, green, blue, alpha); stroke(red, green, blue, alpha); //Tons de cinza e com transparência background(gray, alpha); fill(gray, alpha); stroke(gray, alpha);
  22. 22. Cor e Contorno Outras funções de estilo strokeWeight(weight); //espessura do contorno noStroke(); //retira o contorno noFill(); //retira o preenchimento
  23. 23. Estrutura de Animação Persistência da visão designa a ilusão provocada quando um objeto visto pelo olho humano persiste na retina por uma fração de segundo após a sua percepção. Assim, imagens projetadas a um ritmo superior a 16 por segundo, associam-se na retina sem interrupção.
  24. 24. Estrutura de Animação A função draw() é executada continuamente no programa, possibilitando a criação de animações. void setup(){ //bloco executado uma vez } void draw(){ //bloco executado até o programa encerrar //loop } setup draw
  25. 25. Estrutura de Animação Animação com a função background void setup(){ size(500,500); background(255); smooth(); noFill(); strokeWeight(2); } void draw(){ background(255); ellipse(width/2,width/2,mouseX,mouseY); }
  26. 26. Variáveis Variáveis são usadas para armazenar dados. Elas facilitam a organização do código e permitem o controle da informação. Variáveis de sistema já utilizadas: width height mouseX mouseY
  27. 27. Variáveis Criação de variáveis Para criar e utilizar um variável é necessário declará-la e inicializá-la. Exemplo: int x; //declaração (define o tipo e o identificador da variável) x = 10; //inicialização (atribui um valor) A inicialização pode ser feita junto da declaração. int x = 10;
  28. 28. Variáveis Tipo de dado Exemplo de uso Descrição char char var = ‘a’; Uma letra ou símbolo Unicode. É necessário usar aspas na inicialização. int int var = 12; Um número inteiro, negativo ou positivo. float int var = 1.283 Número de ponto flutuante. boolean boolean var = true Pode assumir os valores true ou false. Usado para operações lógicas
  29. 29. Variáveis Exemplo de criação e uso de variáveis float x; // float y; //declaração void setup(){ size(500,500); background(255); smooth(); noFill(); x = width/2; y = height/2; } void draw(){ ellipse(x,y,mouseX,mouseY); }
  30. 30. Variáveis Operações com variáveis Operador Nome Exemplo Resultado = Atribuição num = 4; num armazena o valor 4. + Adição num = 4 + 5; num armazena o valor 9. - Subtração num = 4 – 3; num armazena o valor 1. * Multiplicação num = 4*5; num armazena o valor 20. % Módulo (Resto) num = 4%2; num armazena o valor 0 (resto da divisão de 4 por 2). / Divisão num = 4/2; num armazena o valor 2. ++ Incremento num++; O valor de num aumenta em 1. -- Decremento num--; O valor de num diminui em 1. += Atribuição por soma num += 4; O valor de num aumenta em 4. -= Atribuição por subtração num -= 4; O valor de num diminui em 4. *= Atribuição por multiplicação num *= 4; O valor de num é multiplicado por 4. /= Atribuição por divisão num /= 4; O valor de num é dividido por 4. - Negação minusnum = -num; minusnum armazena o valor de num multiplicado por -1.
  31. 31. Variáveis Exemplo de criação e uso de variáveis float x; // float y; //declaração void setup(){ size(500,500); background(255); smooth(); noFill(); x = 0; y = height/2; } void draw(){ ellipse(x,y,mouseX,mouseY); x++; }
  32. 32. Variáveis Atenção ao escopo da variável: a variável só é entendida dentro da função onde ele é declarada. Se ela for declarada fora de uma função, ela é entendida por todo o código. float x; //VARIAVEIS GLOBAIS// float y; // void setup(){ size(500,500); background(255); smooth(); noFill(); x = 0; y = height/2; } void draw(){ ellipse(x,y,mouseX,mouseY); x++; }
  33. 33. Condicionais If (Se) Utilizamos a declaração if quando desejamos que o programa teste uma ou mais condições e execute um ou outro comando de acordo com o resultado deste teste. //Sintaxe// if (condição) { comandos; } A declaração if testa a condição expressa entre parênteses. Caso a condição seja verdadeira, os comandos declarados entre as chaves são executados.
  34. 34. Condicionais Operadores lógicos Operador Operação && And || Or ! Not == Igual a != Diferente de > Maior que < Menor que >= Maior ou igual a <= Menor ou igual a
  35. 35. Condicionais Exemplo if: float x; float vx; //variavel de controle da velocidade float y; void setup() { size(800, 500); background(255); smooth(); noFill(); stroke(0,20); x = 0; vx = 1; y = height/2; } void draw() { ellipse(x, y, mouseX, mouseY); x += vx; if(x >= width || x <= 0) { vx *= -1; } }
  36. 36. Condicionais Exemplo if: float x; float vx; //variável de controle da velocidade float y; float w, h, vw, vh; //variáveis de controle do comprimento e altura void setup() { size(800, 500); background(255); smooth(); noFill(); stroke(0,20); x = 0; vx = 1; y = height/2; w = 0; h = 0; vw = 2; vh = 3; } void draw() { ellipse(x, y, w ,h); x += vx; w += vw; h += vh; if(x >= width || x <= 0) { vx *= -1; } if(w >= width || w <= 0) { vw *= -1; } if(h >= height|| h <= 0) { vh *= -1; } }
  37. 37. Condicionais Else (senão) A declaração else é usada para complementar a declaração if, criando um bloco de comandos que são executados quando a condição testada no if é falsa. //Sintaxe// if (condição) { comandos; } else{ outrosComandos; }
  38. 38. Condicionais Exemplo else: float x; float vx; //variavel de controle da velocidade float y; void setup() { size(800, 500); background(255); smooth(); noFill(); x = 0; vx = 1; y = height/2; } void draw() { if (vx > 0) { //se a velocidade for positiva, a cor é preta stroke(0, 30); } else { stroke(255, 80); //senão, é branca } ellipse(x, y, mouseX, mouseY); x += vx; if (x >= width || x <= 0) { vx *= -1; } }
  39. 39. Condicionais If-else-if As declarações ifs podem ser aninhadas para testarem várias condições. //Sintaxe// if (condição1) { comandos1; } else if (condição2){ comandos2; } else if (condição3){ comandos3; } else{ comandos4; }
  40. 40. CondicionaisExemplo if-else-if: float x; float vx; //variavel de controle da velocidade float y; int counter = 0; //conta a quantidade de vezes que se chega nas bordas da tela void setup() { size(800, 500); background(255); smooth(); noFill(); x = 0; vx = 1; y = height/2; } void draw() { if (counter == 0) { stroke(0, 150, 255, 20); } else if (counter == 1) { stroke(0, 0, 255, 20); } else if (counter == 2) { stroke(0, 255, 0, 20); } else { stroke(0, 255, 200, 20); } ellipse(x, y, mouseX, mouseY); x += vx; if (x >= width || x <= 0) { vx *= -1; counter++; //incrementa counter if (counter > 3) { //reseta counter quando passar de 3 counter = 0; } } }
  41. 41. Loops Loops, ou laços, permitem que o programa execute as mesmas tarefas diversas vezes até uma condição de parada seja satisfeita.
  42. 42. Loops While (Enquanto) //Sintaxe// while( condição ) { //código que //será repetido }
  43. 43. Loops Exemplo while void setup(){ size(500,500); background(255); smooth(); noFill(); } void draw(){ float n = 0; while(n < 100){ //loop dentro de um loop stroke(0,n/2); ellipse(mouseX,mouseY,n,n); n += 10; //incremento que permite a condição de parada ser satisfeita } }
  44. 44. Loops For (Para) O laço for pode ser usado para fazer o mesmo que o while, mas de maneira mais simples e eficiente na maioria das vezes, principalmente quando se sabe quantas iterações se quer realizar. //Sintaxe// for( inicialização da variável de controle; condição de parada; incremento da variável) { //código que //será repetido }
  45. 45. Loops Exemplo for //fazendo o mesmo do exemplo while void setup(){ size(500,500); background(255); smooth(); noFill(); } void draw(){ float n = 0; for(int i = 0; i < 10; i++){ //(inicialização;condição;incremento) stroke(0,n/2); ellipse(mouseX,mouseY,n,n); n += 10; } }
  46. 46. Loops Exemplo for //aumentando o numero de iterações void setup(){ size(500,500); background(255); smooth(); noFill(); } void draw(){ for(int i = 0; i < 150; i++){ //(inicialização;condição;incremento) stroke(0,i/5); ellipse(mouseX,mouseY,i,i); } }
  47. 47. Criação de Funções É possível criar suas próprias funções, agrupando comandos em um bloco de código. //Sintaxe// tipo_de_retorno nome_da_função(lista de parâmetros) { // código da // função }
  48. 48. Criação de Funções Porque usar funções ? •Para permitir o reaproveitamento de código já construído (por você ou por outros programadores); •Para evitar que um trecho de código que seja repetido várias vezes dentro de um mesmo programa; •Para permitir a alteração de um trecho de código de uma forma mais rápida. Com o uso de uma função é preciso alterar apenas dentro da função que se deseja; •Para que os blocos do programa não fiquem grandes demais e, por consequência, mais difíceis de entender; •Para facilitar a leitura do programa-fonte de uma forma mais fácil; •Para separar o programa em partes que possam ser logicamente compreendidos de forma isolada.
  49. 49. Criação de Funções Exemplo void setup() { size(500, 500); background(255); smooth(); noFill(); } void draw() { drawCircles(5,400,mouseX,mouseY); } void drawCircles (int times, float diam, float x, float y) { //declaração da função for (int i = 0; i < times; i++) { float d = (diam/times)*i; //diferença entre os diametros stroke(0,d/5); ellipse(x, y, d, d); } }
  50. 50. Inputs Mouse mouseButton mouseClicked() mouseDragged() mouseMoved() mousePressed() mousePressed mouseReleased() mouseWheel() mouseX mouseY pmouseX pmouseY Keyboard key keyCode keyPressed() keyPressed keyReleased() keyTyped()
  51. 51. Salvando imagens Função saveFrame: saveFrame(“image.jpg”); //salva uma imagem com o nome image e a //extensão .jpge saveFrame(frameCount + “.png”); //salva uma imagem com o nome igual ao //numero da frame atual e a extensão .png

×