Introdução à Programação Gráfica com Processing

Aula 02 – Técnicas de Programação

Arrays

Arrays são listas de dados, utilizados para armazenar e manipular grandesquantidades de dados do mesmo tipo de forma automatizada. Cada pedaço dedados em um array é identificado por um número de índice que representa asua posição no array. Os índices começam pelo 0, o que significa que o primeiroelemento do array é [0], o segundo elemento é [1], e assim por diante.

ArraysExemploint num[] = new int[10]; //declaração de um array de 10 inteiros

void setup() {size(800, 600);smooth();background(255);

for (int i = 0; i < num.length; i++) { //laço para varrer o vetornum[i] = i*10; //incializa o elemento do indice i com valores de 0 até 90fill(num[i]); //0 até 90stroke(255-num[i]); //255 até 165;ellipse(50*i + 100, height/2, num[i], num[i]);

}}

Arrays

Exemplo com múltiplos arrays: siga o mestreint s = 100; //elementos no arrayfloat v = 5; //velocidade das ellipses

int[] ds = new int[s]; //diametrosfloat[] xs = new float[s]; //posições xfloat[] ys = new float[s]; //posições y

void setup () {size(800, 600);background(255);smooth();noStroke();fill(0);

for (int i = 0; i < ds.length; i++) { //inicializa os elementos dos arraysds[i] = i; //inicializa os diametros com os valores dos indicesxs[i] = width/2; //incializa as posições x e y no centro da telays[i] = height/2;

}}

void draw() {background(255);

if (keyPressed) { //recebe entradas do tecladoif (key == 'z') { //tecla z faz as bolas moverem-se mais rápidov -= 0.1;v = constrain(v, 1, 5); //limita os valores de v para no minimo 1

} // e no máximo 5

if (key == 'x') { //tecla x faz as bolas moverem-se mais devagarv += 0.1;v = constrain(v, 1, 5);

}}

xs[0] = mouseX; //primeiros elementos de posição x e y recebem a posição //do mouseys[0] = mouseY;ellipse(xs[0], ys[0], ds[0], ds[0]);

for (int i = 1; i < ds.length; i++) { //cada elemento dos arrays de posição //recebe um incremento em direção a posição do elemento anterior

xs[i] += (xs[i-1] - xs[i])/v;ys[i] += (ys[i-1] - ys[i])/v;

ellipse(xs[i], ys[i], ds[i], ds[i]);}

}

Arrays

Exemplo com múltiplos arrays: siga o mestre

Programação Orientada a Objetos

ConceitoA orientação a objetos é um paradigma de análise, projeto e programaçãode sistemas de software baseada na composição e interação entre diversasunidades de software chamadas de objetos.

Na programação orientada a objetos, implementa-se um conjunto declasses que definem os objetos presentes no sistema de software. Cadaclasse determina o comportamento (definido nos métodos) e estadospossíveis (atributos) de seus objetos, assim como o relacionamento comoutros objetos.

Programação Orientada a Objetos

ClassesUma classe é uma representação abstrata de objetos com característicasafins. A classe define o comportamento dos objetos através de seusmétodos, e quais estados ele é capaz de manter através de seus atributos.

Objetos/ Instâncias de classeUma classe pode criar várias instâncias de si mesma com diferentes valorespara seus atributos. Esses objetos que atuam efetivamente no sistema.

Programação Orientada a Objetos

AtributosSão características de um objeto.Basicamente a estrutura dedados que vai representar aclasse. São análogos às variáveis.

MétodosDefinem o comportamento dosobjetos. Um método em umaclasse é apenas uma definição. Aação só ocorre quando o métodoé invocado através do objeto.Dentro do programa, a utilizaçãode um método deve afetarapenas um objeto em particular.Normalmente, uma classe possuidiversos métodos. São análogosàs funções.

Programação Orientada a Objetos

Exemplocomparativo:

Programação Orientada a Objetos

Exemplo carro orientado a objeto:Car myCar; //criação do objeto

void setup() {size(300,200); myCar = new Car(); //instanciação

}

void draw() { background(255); myCar.drive(); //chamada de métodos myCar.display();

}

class Car{color c ; //atributosfloat x ;float y ;float speed ;

Car(){ //construtorc = color(0);x = width/2;y = height/2;speed = 1;

}

void drive() { //métodox = x + speed;if (x > width) {x = 0;

}}

void display() {fill(c);rect(x,y,30,10);

}}

Programação Orientada a Objetos

Método construtorO método construtor é chamado quando um objeto é instanciado, inicializando os seusatributos. Através dele é possível inicializar os atributos com diferentes valores em cadainstanciação através do comando new. O construtor não tem retorno.

Programação Orientada a Objetos

Exemplo carro com construtor:Car myCar; //criação do objeto

void setup() {size(300,200); myCar = new Car(color(255,0,0),0,50,5);

//instanciação }

void draw() { background(255); myCar.drive(); //chamada de métodos myCar.display();

}

class Car{color c ;float x ;float y ;float speed ;

Car(color col, float ex, float why, float s){c = col;x = ex;y = why;speed = s;

}

void drive() {x = x + speed;if (x > width) {x = 0;

}}

void display() {fill(c);rect(x,y,30,10);

}}

Programação Orientada a Objetos

Exemplo com array de objetos:

Car [] myCars = new Car[200]; //criação de array de objetos

void setup() {size(600,400);noStroke(); for(int i = 0; i < myCars.length; i++){myCars[i] = new Car(color(random(255), random(255)), random(width), random(height), random(1,3));

} }

void draw() { background(255); for(int i = 0; i < myCars.length; i++){myCars[i].drive(); //chamada de métodos myCars[i].display();

}

}

class Car{color c ;float x ;float y ;float speed ;

Car(color col, float ex, float why, float s){c = col;x = ex;y = why;speed = s;

}

void drive() {x = x + speed;if (x > width) {x = 0;

}}

void display() {fill(c);rect(x,y,30,10);

}

}

Programação Orientada a Objetos

Exemplo com array de objetos:

ComplexidadeEstudo de caso: movimento de particulas

Point[] ps = new Point[10];

void setup() {size(800, 600);smooth();background(255);

for (int i = 0; i < ps.length; i++) {ps[i] = new Point(width/2, height/2, 2, color(i),

cos(i),sin(i));}

}

void draw() {for (int i = 0; i < ps.length; i++) {ps[i].display();ps[i].update();

}}

class Point {

float x, y;float vx, vy;float d;float v;color c;

Point(float ex, float why, float di, color col, float v1, float v2) {

x = ex;y = why;d = di;c = col;vx = v1;vy = v2;

}

void display() {

fill(c);noStroke();ellipse(x, y, d, d);

}

void update() {x += vx;y += vy;

if(x >= width || x <= 0){vx *= -1;}if(y >= height || y <= 0){vy *= -1;}

}}

Complexidade

A função randomGera números aleatórios. Cada vez que a função random () é chamada, ela retorna um valor inesperado dentro do intervalo especificado.

//Sintaxe//

random(high); random(low, high);

ComplexidadeEstudo de caso: movimento browniano

Point[] ps = new Point[1000];float big_d = 200;

void setup() {size(800, 600);smooth();background(255);

for (int i = 0; i < ps.length; i++) {ps[i] = new Point(width/2, height/2, 1,

color(random(255)), random(5),random(5));}

}

void draw() {//background(255);for (int i = 0; i < ps.length; i++) {ps[i].display();ps[i].update();

}}

class Point {

float x, y;float vx, vy;float d;

float vxc,vyc;color c;

Point(float ex, float why, float di, color col, float v1, float v2) {

x = ex;y = why;d = di;c = col;vxc = v1;vyc = v2;vx = random(-1,1)*vxc;vy = random(-1,1)*vyc;

}

void display() {

fill(c);noStroke();ellipse(x, y, d, d);

}

void update() {x += vx;y += vy;vx = random(-1,1)*vxc;vy = random(-1,1)*vyc;

}}

ComplexidadeEstudo de caso: movimento browniano

Complexidade

Estudo de caso: conexões de partículas

Point[] ps = new Point[50];float big_d = 200;

void setup() {size(800, 600);smooth();background(255);

for (int i = 0; i < ps.length; i++) {ps[i] = new Point(random(width),

random(height), 20, color(0), random(-1, 1)*2, random(-1, 1)*2, 50);}

}

void draw() {background(255);for (int i = 0; i < ps.length; i++) {ps[i].display();ps[i].update();

}}

class Point {

float x, y;float vx, vy;float d;color c;float rad;

Point(float ex, float why, float di, color col, float v1, float v2, float cr) {

x = ex;y = why;d = di;c = col;vx = v1;vy = v2;rad = cr;

}

void display() {

fill(c);noStroke();ellipse(x, y, d, d);stroke(0);strokeWeight(3);traceLines();

}

void update() {x += vx;y += vy;

if (x >= width || x <= 0) {vx *= -1;

}if (y >= height || y <= 0) {vy *= -1;

}}

void traceLines() {

for (int i = 0; i < ps.length; i++) { //percorre um array de partículas, testando se elas se tocam

float distance = dist(x, y, ps[i].x, ps[i].y);

//se a soma dos raios de duas partículas for maior que a distancia entre seus centros, elas se tocam

if (ps[i].rad + rad >= distance) { line(x, y, ps[i].x, ps[i].y);

}}

}}

Complexidade

Estudo de caso: conexões de partículas

Bibliotecas

Estendem Processing para além de gráficos e imagens, permitindo trabalhar comáudio, vídeo e comunicação com outros dispositivos. As seguintes bibliotecasestão incluídas com o software de Processing. Para incluir uma biblioteca,selecione o nome dela através da opção “Import Library“ no menu Sketch. Essasbibliotecas são de código aberto; o código é distribuído com o Processing.

VideoLê imagens de uma camera, reproduz e cria arquivos de filme.DXF ExportCria arquivos DXF para exportar geometrias para outros programas. Funciona com gráficosbaseados em triângulos, incluindo polígonos, caixas e esferas.SerialEnvia dados entre Processing e um hardware externo através da comunicação serial (RS-232).PDF ExportCria arquivos PDF vetorizados, que podem ser escalados para qualquer tamanho eimpressos em alta resolução.NetworkEnvia e recebe dados pela Internet através de clientes e servidores.MinimUsa JavaSound para provir uma biblioteca de áudio de fácil uso, ao mesmo tempo quepermite flexibilidade para usuários avançados.