Introdução à programação visual com Processing

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

*/

Olá Processing
Agenda

Introdução

Processing

Hello World

Formas Primitivas

Cores

Primeiro Projeto


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


Processing
Links

http://openprocessing.org

http://sketchpad.cc

Exemplos no sketchpad:
http://bit.ly/oP2010

http://www.learningprocessing.com

http://www.thenatureofcode.com


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


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


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


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


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°)


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);



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);


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);


RGBA = 4 bytes > mais um argumento para transparência
Alpha >> 0 = 100% opaco e 255 = 100%transparente


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. */


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/


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


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


Introdução à programação visual com Processing

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (11)

Semelhante a Introdução à programação visual com Processing

Semelhante a Introdução à programação visual com Processing (20)

Introdução à programação visual com Processing