introdução a programação gráfica com processing - aula 01
Post on 08-Jul-2015
347 Views
Preview:
DESCRIPTION
TRANSCRIPT
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://processing.org/tutorials/
•Referência: http://processing.org/reference/
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);
}
/*A sintaxe correta é indispensável parao funcionamento do código! Atente parao ponto-e-vírgula ao final de cadacomando, para o as letras maiúsculas eminúsculas, para o uso de parênteses ecolchetes e para a escrita correta doscomandos*/
Estrutura básica
void setup(){
size(500,500); //funçãobackground(255); //funçãosmooth();}void draw(){ //loop
if(mousePressed{ // condicionalsaveFrame(frameCount + ".png");}
ellipse(mouseX,mouseY,50,50); //mouseX e mouseY são variáveis}
}
//Sequencia de comandos//Variáveis//Condicionais//Loops//Funções
Funções e Parâmetros
//Ativo//void setup(){
}
void draw(){
}
//Estático//size(x,y);background(cor);ellipse(x,y,comprimento,altura);smooth();
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); //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.
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(width/2,height/2,mouseX,mouseY);
}
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);
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);
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 de formas
Cor e Contorno
Escala de cinzabackground(gray);fill(gray);stroke(gray);
Cor e Contorno
Padrão RGBbackground(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
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ênciabackground(gray, alpha);fill(gray, alpha);stroke(gray, alpha);
Cor e Contorno
Outras funções de estilo
strokeWeight(weight); //espessura do contorno
noStroke(); //retira o contorno
noFill(); //retira o preenchimento
Estrutura de Animação
Persistência da visão designa a ilusão provocada quando um objeto vistopelo olho humano persiste na retina por uma fração de segundo após asua percepção. Assim, imagens projetadas a um ritmo superior a 16 porsegundo, associam-se na retina sem interrupção.
Estrutura de Animação
A função draw() é executada continuamente no programa, possibilitando acriação de animações.
void setup(){
//bloco executado uma vez
}
void draw(){
//bloco executado até o programa encerrar//loop
}
setup
draw
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);
}
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:widthheightmouseXmouseY
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;
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
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);
}
VariáveisOperaçõ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.
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++;}
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++;}
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.
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
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;
}}
CondicionaisExemplo 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 alturavoid 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;}
}
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;
}
CondicionaisExemplo 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 é pretastroke(0, 30);
} else {stroke(255, 80); //senão, é branca
}ellipse(x, y, mouseX, mouseY);x += vx;if (x >= width || x <= 0) {vx *= -1;
}}
Condicionais
If-else-ifAs 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;
}
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 counterif (counter > 3) { //reseta counter quando passar de 3counter = 0;
}}
}
Loops
Loops, ou laços, permitem que o programa execute as mesmas tarefasdiversas vezes até uma condição de parada seja satisfeita.
Loops
While (Enquanto)
//Sintaxe//
while( condição ) {
//código que//será repetido
}
LoopsExemplo 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
}}
Loops
For (Para)O laço for pode ser usado para fazer o mesmo que o while, mas de maneira maissimples e eficiente na maioria das vezes, principalmente quando se sabe quantasiteraçõ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
}
LoopsExemplo 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;
}
}
LoopsExemplo 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);
}
}
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
}
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.
Criação de FunçõesExemplovoid 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çãofor (int i = 0; i < times; i++) {float d = (diam/times)*i; //diferença entre os diametrosstroke(0,d/5);ellipse(x, y, d, d);
}}
Inputs
MousemouseButtonmouseClicked()mouseDragged()mouseMoved()mousePressed()mousePressedmouseReleased()mouseWheel()mouseXmouseYpmouseXpmouseY
KeyboardkeykeyCodekeyPressed()keyPressedkeyReleased()keyTyped()
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
top related