Intro Processing

Workshop Processing: Visualização de Dados e
Interatividade
Introdução ao Processing
Claudio Esperança
Programa de Engenharia de Sistemas e Computação

COPPE / UFRJ
Escola de Belas Artes
Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 1 / 68

Sumário
1 Introdução ao Processing
2 Ambiente
3 Tutorial via exemplos
Desenho simples
Atributos de traçado
Variáveis e comandos de controle
Exibição contínua
Interação
Orientação a objetos
4 Desenhando com Processing
Primitivas simples
Curvas Bézier
Propriedades de traçado
Cor

O que é?
O nome “Processing” refere-se tanto a uma linguagem quanto a um

ambiente de programação (IDE)
Objetivos
Ferramenta educacional para o aprendizado de programação
Construção de software gráfico
Atraente para público não técnico
Permitir o uso na web
Desenvolvimento através de experimentação (sketches)
Fácil migração para ambientes profissionais (Java)

Por que processing?
Ambiente razoavelmente amigável

Curva de aprendizado relativamente pouco inclinada
Permite fazer gráficos simples com poucas linhas de código
Adequada para aplicações web "client-side"
Existe inclusive uma versão de processing em JavaScript
É Java, essencialmente
Já conhecido por muitos profissionais
Multiplataforma
Desempenho razoável

Por que não?
É Java, essencialmente
Desempenho pode ser insuficiente para algumas aplicações
Nível de abstração sofrível
Escreve-se muito para fazer pouco
Não é totalmente orientada a objetos

Onde começar?
O ambiente Processing pode ser baixado diretamente do site

http://www.processing.org
Multiplataforma
Instalação auto-contida
O site tem diversos recursos para aprendizado e uma relação de livros
Esta apresentação pressupõe conhecimento rudimentar de
programação
Recomenda-se
Comprar um ou mais livros
Ler os tutoriais do site
Praticar a programação com processing

O ambiente Processing

O ambiente Processing - janela de exibição

O ambiente Processing
Interface segue IDE tradicional com menus, uma barra de

ferramentas, um editor de textos com abas, painéis para mensagens e
para saída textual
Na documentação, o ambiente é chamado de PDE (Processing
Development Environment)
Programas feitos com Processing são chamados de sketches e podem
ser compostos de diversos arquivos de código e outros recursos como
imagens, fontes, bibliotecas, etc
Os sketches são guardados como subdiretórios de uma pasta chamada
sketchbook
Ao executar um sketch, este é compilado (caso seja necessário) e uma
janela com o resultado é exibida
O ambiente já vem com diversos exemplos incluidos que podem ser
carregados e visualizados usando o menu File > Examples

A barra de ferramentas
Run: Compila se necessário e executa o sketch corrente. Se a

tecla shift estiver apertada, a exibição será em tela cheia
Stop: Termina a execução do sketch
New: Cria um novo sketch na janela atual. Para criar outra
janela, usar File > New
Open: Abre outro sketch na mesma janela. Para abrir em outra
janela usar File > Open
Save: Salva o sketch no diretório default. Para usar outro
nome, usar File > Save As
Export: Exporta o sketch como um applet (ou aplicação, se
shift estiver apertado) Java embutido num arquivo html. Cli-
que no arquivo index.html da pasta criada para carregar o
programa num navegador

Um primeiro exemplo - código
line (10, 80, 30, 40); // Linha esquerda

line (20, 80, 40, 40);
line (30, 80, 50, 40); // Linha central
line (40, 80, 60, 40);

Um primeiro exemplo - resultado

Um primeiro exemplo - detalhes
// indica que o restante da linha é comentário

A função line() possui como parâmetros as coordenadas x e y das
extremidades do segmento de reta a ser desenhado
Sistema de coordenadas têm origem no canto superior esquerdo da
janela
Coordenadas são dadas por default em pixels
Janela default tem 100 × 100 pixels

Atributos de traçado - código
background (0); // Limpa a tela com cor de fundo

stroke (255); // Cor de traçado
strokeWeight (5); // Largura do traço
smooth (); // Arestas mais suaves

line (20, 80, 40, 40);
line (30, 80, 50, 40); // Linha central
line (40, 80, 60, 40);

Atributos de traçado - resultado

Atributos de traçado - detalhes
background() seleciona a cor de fundo e limpa a tela

stroke() especifica a cor de traçado de linhas
Cores quando especificadas por 1 número de 0 a 255 indicam tons de
cinza entre preto e branco
Cores podem também ser especificadas por 3 números de 0 a 255
relativas a um sistema de cores (RGB / HSB)
strokeWeight() dá a largura do traço em pixels
smooth() indica que técnicas antiserrilhado devem ser usadas para
suavizar o traço
O inverso é especificado com noSmooth()

Variáveis e comandos de controle - código
background (0); // Cor de fundo

// Desenha cinco retas inclinadas

int x0 = 10;
int y0 = 80;
for (int i = 0; i < 5; i++) {
int x = x0 + i*10;
line(x, y0 , x+20 , y0 -40);
}

Variáveis e comandos de controle - detalhes
Variáveis têm que ser declaradas precedidas de seu tipo antes de

serem usadas
Tipos primitivos incluem int, float e String
Tipos podem ser classes definidas no programa ou em bibliotecas
Expressões aritméticas usam operadores como +, -, * e /
Comandos de repetição incluem for, while e do while
Repetição pode ser interrompida com o comando break
Laço corrente pode ser interrompido com o comando continue
Comandos condicionais incluem if e switch

Exibição contínua - código
int x0 = 10;
int y0 = 80;
void setup () {
size (200 ,200); // Tamanho da janela
}
void draw () {
background (0);
for (int i = 0; i < 5; i++) {
int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}
x0 += 1; // Move desenho para a direita

if (x0 >=200) x0 = 0;
}
Exibição contínua - resultado

Exibição contínua - detalhes
A definição das funções setup() e draw() faz a aplicação funcionar

em modo de exibição contínua
Permite que o desenho mude com o tempo
Animações e interação
setup() é executada automaticamente uma única vez para inicializar
a janela e outras variáveis de estado
A função size() especifica largura e altura da janela de exibição
size() tem que ser a primeira função a ser chamada
As variáveis screen.width e screen.height contêm a largura e
altura total da tela do computador
Podem ser usadas para estabelecer janelas de tamanho proporcional à
resolução da tela do computador

Exibição contínua - detalhes (cont.)
draw() é chamada continuamente para desenhar outro quadro da

animação
Chamada 60× por segundo por default (use frameRate() para alterar)
Se o quadro todo tem que ser redesenhado (numa animação), comece
chamando background()
A largura e altura da tela podem ser consultadas através das variáveis
de sistema width e height

Interação 1 - código
void setup () {
}
void draw () {
background (0);
int x0 = mouseX ; // Posição inicial a partir

int y0 = mouseY ; // ... da posição do mouse
for (int i = 0; i < 5; i++) {

int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}
}

Interação 1 - resultado

Interação 1 - detalhes
O acesso ao estado de dispositivos de entrada é feito através de

variáveis do sistema (variáveis globais) ou de rotinas callback
As variáveis mouseX e mouseY dão a posição corrente do sistema
A variável mousePressed tem valor true ou false e diz se há algum
botão do mouse pressionado
A variável mouseButton tem valor LEFT, RIGHT, ou CENTER e diz
qual botão está pressionado

Interação 2 - código (parte 1)
int [] x = new int [256];

int [] y = new int [256];
int n = 0;
void mousePressed () {
n = 1;
x[0] = mouseX ; y[0] = mouseY ;
}
void mouseDragged () {
if (n <256) {
x[n] = mouseX ; y[n] = mouseY ;
n++;
}
}
void mouseReleased () {
n = 0;
}

Interação 2 - código (parte 2)
void setup () {
}
void diagonais (int x0 , int y0) {

for (int i = 0; i < 3; i++) {
int x = x0 + i*10;
line(x, y0 , x+20, y0 -40);
}
}
void draw () {
background (0);
for (int i = 0; i < n; i++) {
stroke (256+i-n); // Cor progressivamente mais branca
diagonais (x[i],y[i]);
}
}
Interação 2 - resultado

Interação 2 - detalhes
As funções mousePressed(), mouseReleased() e

mouseDragged(), se definidas num sketch, são chamadas
automaticamente na ocorrência de um evento
mousePressed() é chamada sempre que algum botão do mouse for
pressionado
mouseReleased() é chamada sempre que algum botão do mouse for
largado
mouseDragged() é chamada sempre que o mouse for movimentado
com algum botão pressionado

Classes - código (parte 1)
class LinhaPoligonal {
int [] x = new int [256];
int [] y = new int [256];
int n = 0;
void adiciona (int x, int y) {

// adiciona um ponto à linha poligonal
if (n == 256) return ;
this.x[n] = x; this.y[n] = y;
n++;
}
void desenha () {
for (int i = 0; i < n -1; i++) {
line (x[i], y[i], x[i+1], y[i+1]);
}
}
}

LinhaPoligonal l[] = new LinhaPoligonal [100];
int nl = 0;
if ( mouseButton == LEFT) {
// Cria mais um traço
if (nl < 100) {
l [nl] = new LinhaPoligonal ();
l [nl ]. adiciona (mouseX , mouseY );
nl ++;
}
} else if ( mouseButton == RIGHT) {
// Apaga todos os traços
nl = 0;
}
}
void mouseDragged () {
// Estende a linha poligonal corrente
l [nl -1]. adiciona (mouseX , mouseY );
}
void setup () {
stroke (255); // Traço em branco
}
void draw () {
background (0);
for (int i = 0; i < nl; i++) {
l [i]. desenha ();
}
}

Classes - resultado

Classes - detalhes
Bibliotecas de código são frequentemente estruturadas em classes

Classes encapsulam estruturas de dados e algoritmos
Classes são fábricas de objetos que possuem funcionalidades em
comum
Objetos são instâncias de classes (criados com new classe)
Elementos (funções ou variáveis) associados a objetos são chamados
de membros
Funções associadas a objetos são chamadas de métodos
Variáveis associadas a objetos são chamadas de atributos
Um membro de um objeto é referido por objeto.membro
Dentro da classe, membros podem ser referidos por this.membro

Funções para desenho de primitivas simples
point (x , y ) Ponto
line (x1 , y1 , x2 , y2 ) Segmento de reta
triangle (x1 , y1 , x2 , y2 , x3 , y3 ) Triângulo
quad (x1 , y1 , x2 , y2 , x3 , y3 , x4 , y4 ) Quadrilátero
rect (x , y , width, height) Retângulo alinhado
com os eixos
ellipse (x , y , width, height) Elipse alinhada com os
eixos

Primitivas simples - exemplo
void setup () {
size (300 ,300);
}
void draw () {
int d = 40;
for (int x = 0; x < 300; x+=d) {
int y = d; point (x, y);
y+=d; line (x, y, x+d, y-d/2);
y+=d; ellipse (x,y,d*0.7 ,d *0.5);
y+=d; triangle (x,y,x+d/2,y-d, x+d, y);
y+=d; quad (x, y, x+d/2, y-d/2, x+d, y, x+d/2, y+d/2);
y+=d; rect (x, y, d/2, d/2);
}
}

Primitivas simples - resultado

Curvas Bézier cúbicas
Curvas Bézier cúbicas podem ser traçadas usando a função

bezier(x1 , y1 , x2 , y2 , x3 , y3 , x4 , y4 )
O primeiro e o último ponto definem o início e o final da curva

O segundo e o terceiro ponto definem as tangentes com relação ao
primeiro e o último ponto, respectivamente

Curvas Bézier cúbicas - exemplo
int x[] = new int [4]; int y[] = new int [4];
int n = 0;
void setup () { size (300 ,300); }
if (n==4) n = 0;
x[n] = mouseX ; y[n] = mouseY ; n++;
}
void draw () {
background (200);
if (n==4) {
bezier (x[0] ,y[0],x[1],y[1],x[2],y[2],x[3],y[3]);
line (x[0] ,y[0],x[1],y[1]);
line (x[2] ,y[2],x[3],y[3]);
ellipse (x[1] ,y[1] ,4 ,4);
ellipse (x[2] ,y[2] ,4 ,4);
}
}
Curvas Bézier cúbicas - resultado

Propriedades de linhas
stroke (color ) Cor da linha

noStroke () Linha não é traçada
strokeWeight (thickness) Largura da linha
strokeCap (style) Estilo de terminação da linha (ROUND,
SQUARE, ou PROJECT)
strokeJoin (style) Estilo de junção de linhas (BEVEL,
MITER, ou ROUND)
smooth () Liga antialiasing
noSmooth () Desliga antialiasing

Propriedades de linhas - exemplo 1
size (200 ,200);

smooth ();
line (40 , 40, 160 , 40); // Linha default
strokeWeight (6);
line (40 , 80, 160 , 80); // Linha mais larga
strokeWeight (18);
line (40 , 140 , 160 , 140); // Linha super - larga

size (200 ,200);

smooth ();
strokeWeight (16);
strokeCap ( ROUND );
line (40 , 40, 160 , 40);
strokeCap ( SQUARE );
line (40 , 90, 160 , 90);
strokeCap ( PROJECT );
line (40 , 140 , 160 , 140);

size (200 ,200);

smooth ();
strokeWeight (16);
strokeJoin ( BEVEL );
rect (24 , 66, 30, 66); // Esquerda
strokeJoin ( MITER );
rect (82 , 66, 30, 66); // Meio
strokeJoin ( ROUND );
rect (144 , 66, 30, 66); // Direita

Propriedades de preenchimento
A função fill (cor ) especifica a cor para preenchimento de figuras

com área (ellipse, rect, quad, bezier, etc)
A função noFill inibe o preenchimento
rect (10 , 10, 50, 50);

fill (204); // Cinza claro
rect (20 , 20, 50, 50);
fill (153); // Cinza médio
rect (30 , 30, 50, 50);
fill (102); // Cinza escuro
rect (40 , 40, 50, 50);

Transparência
Tanto stroke() quanto fill() admitem um segundo parâmetro

que controla a transparência da cor
Transparência 0 significa totalmente transparente e 255 totalmente
opaco
O atributo ‘transparência’ também é conhecido como ‘canal alfa’
simplesmente ‘alfa’
size (200 ,200);

fill (0);
rect (0, 80, 200 , 40);
fill (255 , 51); // Bastante transparente
rect (0, 40, 66, 120);
fill (255 , 127); // Transparência média
rect (66 , 40, 66, 120);
fill (255 , 204); // Bastante opaco
rect (132 , 40, 66, 120);

Modos de especificação de formas
O significado dos parâmetros das funções rect() e ellipse()

podem ser alterados pelas funções rectMode(modo) e
ellipseMode(modo), onde modo pode ser
CENTER x e y do centro, largura e altura (default para ellipse)

RADIUS x e y do centro, largura/2 e altura/2
CORNER x e y do canto superior esquerdo, largura e altura
(default para rect)
CORNERS x e y do canto superior esquerdo, x e y do canto
inferior direito

Modos de especificação de formas - exemplo 1
size (200 ,200);

smooth ();
noStroke ();
ellipseMode ( RADIUS );
fill (80);
ellipse (66 , 66, 120 , 120); // Elipse cinza escuro
ellipseMode ( CENTER );
fill (160);
ellipse (66 , 66, 120 , 120); // Elipse cinza claro
fill (255);
ellipseMode ( CORNER );
ellipse (66 , 66, 120 , 120); // Elipse branca
fill (0);
ellipseMode ( CORNERS );
ellipse (66 , 66, 120 , 120); // Elipse preta

Modos de especificação de formas - exemplo 2
size (200 ,200);

smooth ();
noStroke ();
rectMode ( RADIUS );
fill (80);
rect (66 , 66, 120 , 120); // retângulo cinza escuro
rectMode ( CENTER );
fill (160);
rect (66 , 66, 120 , 120); // retângulo cinza claro
fill (255);
rectMode ( CORNER );
rect (66 , 66, 120 , 120); // retângulo branco
fill (0);
rectMode ( CORNERS );
rect (66 , 66, 120 , 120); // retângulo preto

Cor
As funções fill(), stroke() e background() podem especificar

cores através de três números
O significado desses 3 números depende do sistema de cores vigente
Por default, o sistema adotado é o RGB (Red, Green, Blue)
Os 3 números entre 0 e 255 indicam a proporção de vermelho, verde e
azul presentes na cor
Por exemplo, stroke(255,255,0) significa que a cor do traço é
amarela (100% de vermelho + 100% de verde)
fill() e stroke() também suportam um quarto parâmetro
indicando transparência

Especificando cor - exemplo
size (200 ,200);

background (255 ,255 ,0); // Amarelo
fill (0 ,0 ,128); // Azul escuro
strokeWeight (10);
stroke (255 ,128 ,128); // Rosa
rect (50 , 50, 100 , 100);
stroke (0 ,0 ,0 ,128); // Preto transparente
line (0 ,0 ,200 ,200);

Efeito da transparência
Como o uso de transparência é cumulativo, o efeito depende da

ordem de desenho
size (200 ,200);

background (255);
smooth ();
noStroke ();
// circulos coloridos da esquerda para a direita
fill (255 ,128 ,0 , 128); ellipse (50 ,50 ,100 ,100);
fill (128 ,0 ,255 , 128); ellipse (100 ,50 ,100 ,100);
fill (0 ,255 ,128 , 128); ellipse (150 ,50 ,100 ,100);
// circulos coloridos da direita para a esquerda
fill (0 ,255 ,128 , 128); ellipse (150 ,150 ,100 ,100);
fill (128 ,0 ,255 , 128); ellipse (100 ,150 ,100 ,100);
fill (255 ,128 ,0 , 128); ellipse (50 ,150 ,100 ,100);

Cores em hexadecimal
A notação hexadecimal (base 16) também pode ser usada para

especificar cores
Método popular com web designers
Usado em HTML e CSS
Constante hexadecimal especificada com símbolo # seguido de 6
dígitos hexadecimais (0-9, A-F), sendo 2 dígitos para cada
componente. Por exemplo:
RGB Hex
255, 255, 255 #FFFFFF
0, 0, 0 #000000
102, 153, 204 #6699CC
195, 244, 59 #C3F43B
116, 206, 206 #74CECE

O tipo color
Variáveis do tipo color podem ser usadas para armazenar informação

de cor
A função color () constrói valores do tipo color usando uma
sintaxe similar à das funções stroke () e fill()
Exemplo:
color c1 = color (51); // Cinza
color c2 = color (51 ,204); // Cinza transparente
color c3 = color (51 ,102 ,153); // Azul
color c4 = color (51 ,102 ,153 ,51); // Azul transparente
stroke (c1);
fill(c4);

Sistemas de cores
O sistema RGB é bastante próximo da maneira pela qual cores são

processadas e exibidas por um computador, mas é pouco intuitivo
A especificação de cores com o sistema HSB (Hue, Saturation and
Brightness), também conhecido como HSV (Value), permite uma
melhor abstração
Sistemas como o HSB são conhecidos como sistemas de interface

Alterando o sistema de cores
Para alterar como o Processing interpreta especificações de cores

pode-se usar uma das seguintes formas
colorMode(mode)
colorMode(mode, range)
colorMode(mode, range, range, range)
onde mode pode ser RGB ou HSB e range é um número que especifica
o valor máximo que cada coordenada de cor pode assumir
Uma especificação bastante útil é colorMode(HSB, 360, 100,
100) já que a coordenada Hue corresponde a um ângulo

O sistema HSB (HSV)
Sólido de cor é uma pirâmide hexagonal

invertida
Coordenadas correspondem ao matiz,
saturação e valor
Hexágono correspondente a V = 1 é
uma projeção do cubo RGB
Hue (matiz) corresponde a um ângulo
ao redor do eixo do cone
Saturação é o afastamento em relação
ao eixo da pirâmide
Valor é a altura com relação ao ápice
(preto)

O sistema HSB - exemplo
size (360 ,300);

colorMode (HSB ,360 ,1.0 ,1.0);
for (int i = 0; i < 360; i++) {
stroke (i, 1, 1); // Matiz i
line(i, 0, i, 100);
for (float j = 0.0; j <= 1; j +=0.01) {
stroke (i,j ,1); // Saturação j
point (i ,100+100* j);
stroke (i,1,j); // Valor j
point (i ,200+100* j);
}
}

Intro Processing

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Intro Processing

Enviado por

Direitos autorais:

Formatos disponíveis

Workshop Processing: Visualização de Dados e

Programa de Engenharia de Sistemas e Computação

Escola de Belas Artes

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 1 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 2 / 68

O nome “Processing” refere-se tanto a uma linguagem quanto a um

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 3 / 68

Ambiente razoavelmente amigável

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 4 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 5 / 68

O ambiente Processing pode ser baixado diretamente do site

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 6 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 7 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 8 / 68

Interface segue IDE tradicional com menus, uma barra de

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 9 / 68

Run: Compila se necessário e executa o sketch corrente. Se a

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 10 / 68

line (10, 80, 30, 40); // Linha esquerda

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 12 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 13 / 68

// indica que o restante da linha é comentário

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 14 / 68

background (0); // Limpa a tela com cor de fundo

line (10, 80, 30, 40); // Linha esquerda

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 16 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 17 / 68

background() seleciona a cor de fundo e limpa a tela

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 18 / 68

background (0); // Cor de fundo

// Desenha cinco retas inclinadas

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 20 / 68

Variáveis têm que ser declaradas precedidas de seu tipo antes de

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 21 / 68

x0 += 1; // Move desenho para a direita

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 24 / 68

A definição das funções setup() e draw() faz a aplicação funcionar

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 25 / 68

draw() é chamada continuamente para desenhar outro quadro da

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 26 / 68

int x0 = mouseX ; // Posição inicial a partir

for (int i = 0; i < 5; i++) {

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 28 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 29 / 68

O acesso ao estado de dispositivos de entrada é feito através de

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 30 / 68

int [] x = new int [256];

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 31 / 68

void diagonais (int x0 , int y0) {

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 33 / 68

As funções mousePressed(), mouseReleased() e

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 34 / 68

void adiciona (int x, int y) {

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 36 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 38 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 39 / 68

Bibliotecas de código são frequentemente estruturadas em classes

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 40 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 42 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 43 / 68

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 45 / 68

Curvas Bézier cúbicas podem ser traçadas usando a função

O primeiro e o último ponto definem o início e o final da curva

Claudio Esperança (PESC/COPPE/UFRJ) Intro 2010 46 / 68