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