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.

1. Introdução à Programação Gráfica
com Processing
Aula 01 – Lógica de Programação

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. Hello world!
void setup(){
size(500,500);
background(255);
smooth();
}
void draw(){
ellipse(mouseX,mouseY,50,50);
}

4. Conhecendo o Ambiente de Desenvolvimento
http://www.processing.org/reference/environment/

5. Conhecendo o Ambiente de Desenvolvimento
Menus:
File Edit Sketch Tools Help

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. 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. Funções e Parâmetros
//Ativo//
void setup(){
}
void draw(){
}
//Estático//
size(x,y);
background(cor);
ellipse(x,y,comprimento,altura);
smooth();

9. Funções e Parâmetros
//Sintaxe//
funcao(parametro1,parametro2,parametro3, ... , parametroN);

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. Sistema de Coordenadas
*Variáveis do sistema: width e height

12. Sistema de Coordenadas
//Teste//
void setup(){
size(500,500);
background(255);
smooth();
noFill();
}
void draw(){
ellipse(width/2,height/2,mouseX,mouseY);
}

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. 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. Formas Geométricas Básicas

16. Formas Geométricas Básicas

17. Outras Formas
arc( );
point( );
quad( );
bezier();
curve();
http://processing.org/reference/

18. Cor e Contorno
Funções
background(color); //fundo da tela
fill(color); //preenchimento de formas
stroke(color); //contorno de formas

19. Cor e Contorno
Escala de cinza
background(gray);
fill(gray);
stroke(gray);

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. 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. Cor e Contorno
Outras funções de estilo
strokeWeight(weight); //espessura do contorno
noStroke(); //retira o contorno
noFill(); //retira o preenchimento

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Loops
Loops, ou laços, permitem que o programa execute as mesmas tarefas
diversas vezes até uma condição de parada seja satisfeita.

42. Loops
While (Enquanto)
//Sintaxe//
while( condição ) {
//código que
//será repetido
}

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. 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. 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. 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. 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. 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. 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. Inputs
Mouse
mouseButton
mouseClicked()
mouseDragged()
mouseMoved()
mousePressed()
mousePressed
mouseReleased()
mouseWheel()
mouseX
mouseY
pmouseX
pmouseY
Keyboard
key
keyCode
keyPressed()
keyPressed
keyReleased()
keyTyped()

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