1. oficinaProcessing
// oficina de programação visual com Processing
/*
http://oficinaprocessing.blogspot.com
Caleb Mascarenhas
Processing foi criado por Ben Fry e Casey Reas
http://processing.org
*/
3. Processing
Criado por Ben Fry e Casey Reas no MIT em 2001
Linguagem de Programação (Roda no Java - JVM)
IDE -Integrated Development Enviroment
Comunidade online
http://processing.org
http://oficinaprocessing.blogspot.com
5. Processing
Instalação
Baixar o programa para o seu computador (escolha a versão do
seu OS, baixe a ultima versão estável)
Descompactar
Abrir a pasta e executar o arquivo Processing
(no linux pode ser necessário autorizar leitura, execução e
escrita deste arquivo)
Definir a pasta Sketchbook onde serão salvos os seus arquivos:
/home/caleb/sketchbook ou /meusdocumentos/sketchbook
http://oficinaprocessing.blogspot.com
6. Processing
Básico
File – abrir, salvar, exportar e exemplos dos sketchs
Tools/Ferramentas – seletor de fontes e cores, adiciona
bibliotecas, formata o texto(identação)
Espaço para escrever programa
Botão play/stop – executa/para programa
Sketchbook – pasta onde ficam os projetos e bibliotecas de
terceiros
http://oficinaprocessing.blogspot.com
7. Hello World
ellipse (100,100, 60, 60);
http://bit.ly/oPex01
ellipse >> função desenha elipse
100, 100 >> argumentos posição eixo X e Y
60, 60 >> argumentos largura e altura da elipse
Find in reference >>selecionar função e clicar com botão direito
do mouse, exibe explicação e exemplos das funções nativas
http://oficinaprocessing.blogspot.com
8. Hello World
Pixel
Sistema de Coordenadas do Processing
(0,0) // topo à esquerda
Sistema Cartesiano de Coordenadas
(0,0) // centro
size(200, 200); //função que define a tela com 200x200 pixels
http://oficinaprocessing.blogspot.com
9. Formas Primitivas
// point, line, rect, ellipse, triangle, quad, arc
// barra dupla são para comentários
// após as barras o programa ignora o que for escrito na linha
point (x, y); //desenha um ponto
line(x, y, x2, y2); //desenha uma linha
rect(x, y, l, a); //desenha um retângulo
ellipse(x, y, l, a); //desenha uma elipse
triangle(x1, y1, x2, y2, x3, y3); //desenha um triangulo
quad(x1, y1, x2, y2, x3, y3, x4, y4); //desenha quadrado
arc(x, y, l, a, angInicial, angFinal ); //desenha um semi circulo
//ângulo de inicial e ângulo de final em radianos
//(0 = 0° e 2*PI = 360°)
http://bit.ly/oPex02
http://oficinaprocessing.blogspot.com
10. Formas Primitivas
strokeWeigth, rectMode, ellipseMode
strokeWeight(10); // define espessura do contorno em 10px
rectMode(CENTER); // posição no modo centro do retângulo
rect(100,100,40,40);
//por default a posição do retângulo é a esquerda
//e da elipse é no centro
strokeWeight(10); // define espessura do contorno em 10px
ellipseMode(RIGHT); // posição no modo à direita do circulo
ellipse(100,100,40,40);
http://bit.ly/oPex03
http://oficinaprocessing.blogspot.com
11. Cores
bits, bytes, escala de tons de cinza,
stroke, fill, background
1 bit >>armazena 2 estados(0 ou 1)
1 byte = 8bits >>armazena 256 estados
Escala de tons de cinza = 1byte
0= preto e 255=branco
background(0); //define fundo preto
stroke(255); //define contorno branco
fill(195); //define cor da forma cinza claro
rect(80,80, 50, 50);
http://bit.ly/oPex04
http://oficinaprocessing.blogspot.com
12. Cores
Escala completa de cores > RGB e RGBA
Escala de RGB = 3bytes 1 para cada cor primitiva
size(400,400);
background(0,0,255); //fundo azul claro
stroke(0,255,0); //contorno verde claro
fill(255, 0,0); //preenche de vermelho claro
rect (150, 150, 100,75);
http://bit.ly/oPex05
RGBA = 4 bytes > mais um argumento para transparência
Alpha >> 0 = 100% opaco e 255 = 100%transparente
http://oficinaprocessing.blogspot.com
13. Cores
Bandas de cores customizadas
colorMode(RGB, 133);
ou
colorMode(RGB, 107, 121, 94, 150);
/*Limita o valor em cada cor, caso seja maior vai permanecer no
definido. */
http://oficinaprocessing.blogspot.com
14. Hello World
Crie o seu primeiro projeto
Faça o seu perfil no http://sketchpad.cc e publique o projeto
Pode ser uma criatura, objeto ou desenho
Use formas primitivas
Para se inspirar entre no site:
http://rmx.cz/monsters/
http://oficinaprocessing.blogspot.com
15. Agradecimentos
Muito obrigado!
Daniela, Gabriel, minha família, Ben Fry, Casey Reas, Daniel
Shiffman, Ira Greenberg, Karsten Schmidt, Ary Bader-Natal,
Sketchpad, comunidade Processing, Rede SESC, Equipes de
Internet Livre do SESC, Vinicius, Yara, equipe da Globalcode
( www.globalcode.com.br ) e todos os que participaram das
oficinas.
Contatos:
calebml@gmail.com
twitter: @calebml
http://oficinaprocessing.blogspot.com
16. Referências
Bibliografia indicada
Ben Fry e Casey Reas. Processing a Programming handbook for
visual designers and artists.
Ben Fry e Casey Reas. Getting Started with Processing.
Daniel Shiffman. Learning Processing. A begginers guide to
programming images, animation and interaction.
Ira Greenberg. Processing - Creative coding and computional art
* Estes livros podem ser adquiridos no site:
http://www.amazon.com
http://oficinaprocessing.blogspot.com