Este documento introduz conceitos básicos de programação visual com a linguagem Processing, incluindo como definir o tamanho da janela, a cor de fundo, representar pontos, linhas, retângulos, elipses e triângulos utilizando coordenadas x e y, e como controlar a cor e transparência desses objetos com os comandos fill(), stroke() e definindo valores alpha.

1. Introdução à programação
com PROCESSING
Pontos, linhas, formas e cor.
Guilherme Martins - gmartins@artica.cc
André Almeida - aalmeida@artica.cc
http://artica.cchttp://processing.org

2. width = 600
height = 400
size define o tamanho da janela com os parâmetros de largura (width) e altura (height)

3. background define a cor do fundo
quando utilizado apenas um valor entre 0 e 255, estamos a definir a cor na gama da escala de cinzentos

4. background( , , );R G B
background define a cor do fundo
quando utilizado três valores, estamos a trabalhar no modelo de cores R, G, B.
Desta maneira podemos escolher qualquer cor desejada.
http://pt.wikipedia.org/wiki/RGB
Tools > Color Selector
Color Selector permite-nos escolher uma cor
com a tonalidade pretendida.

5. x
y
x = 100
y = 50
x = 600
y = 200
x = 200
y = 400
x = 0
y = 0
Sistema de coordenadas ou plano cartesiano:
sistema utilizado para localizar pontos num espaço definido por duas coordenadas X (horizontal) e Y (vertical)
http://pt.wikipedia.org/wiki/Sistema_de_coordenadas_cartesiano

6. R e p r e s e n t a r p o n t o s n o p r o c e s s in g :
comando point, colocar dois valores nos parâmetros:
x (coordenada horizontal) e y (coordenada vertical)
x y

7. Representar linhas no processing:
comandoline, precisamosdecolocarquatrovaloresnosparâmetros,
osdoisprimeirosvalorescorrespondemàcoordenada(x,y)doprimeiroponto
eosdoisúltimosvalorescorrespondemàcoordenada(x,y)dosegundoponto.
line (x1, y1, x2, y2);

8. x y w h
R e p r e s e n t a r r e c t â n g u lo s n o p r o c e s s in g :
comando rect, colocar quatro valores nos parâmetros:
x (coord. horizontal) , y (coord. vertical) , w (largura) , h (altura)

9. x y w h
R e p r e s e n t a r c ir c u n f e r ê n c ia s e e lip s e s n o p r o c e s s in g :
comando ellipse, colocar quatro valores nos parâmetros:
x (coord. horizontal) , y (coord. vertical) , w (largura) , h (altura)

10. um rectângulo começa a ser
desenhado pelo seu canto
superior esquerdo
uma elipse começa a ser
desenhada pelo seu centro
Diferências entre rectângulos e elipses:

11. Podemos mudar esta maneira de desenhar utilizando o comando rectMode()

12. 1
2
3
R e p r e s e n t a r t r iâ n g u lo s n o p r o c e s s in g :
Para cada vértice do triângulo é necessário definir em que coordenada (x, y) este se encontra.

13. O comando fill() serve para pintar o interior
dos objectos: rect, ellipse e triangle.
Utilizando apenas um parâmetro estamos a
pintar na escala de cinzentos, e podemos
utilizar qualquer valor entre 0 e 255.
Utilizando três parâmetros estamos a pintar na
gama de cores RGB.

14. O comando noFill() faz com que
o interior dos objectos
não seja preenchido.

15. O comando stroke() serve
para atribuir uma cor à
linha dos objectos.

19. T r a n s p a r ê n c ia s :
A transparência é conhecida em programação como alpha.
O alpha é definido por um valor entre 0 e 100, sendo o 0 para total transparência e 100 para total opacidade.
O valor da transparência é definido a seguir ao valor da cor, nos comandos stroke() e fill().
Escala de Cinzentos R, G, B