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.
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*/
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.
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.
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.
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);
}
}