oficinaProcessingI

1.484 visualizações

Publicada em

Oficina de Programação Visual com Processing - Caleb Mascarenhas

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.484
No SlideShare
0
A partir de incorporações
0
Número de incorporações
781
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

oficinaProcessingI

  1. 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 */
  2. 2. Olá ProcessingAgendaIntroduçãoProcessingHello WorldFormas PrimitivasCoresPrimeiro Projetohttp://oficinaprocessing.blogspot.com
  3. 3. ProcessingCriado por Ben Fry e Casey Reas no MIT em 2001Linguagem de Programação (Roda no Java - JVM)IDE -Integrated Development EnviromentComunidade onlinehttp://processing.orghttp://oficinaprocessing.blogspot.com
  4. 4. ProcessingLinkshttp://openprocessing.orghttp://sketchpad.ccExemplos no sketchpad:http://bit.ly/oP2010http://www.learningprocessing.comhttp://www.thenatureofcode.comhttp://oficinaprocessing.blogspot.com
  5. 5. ProcessingInstalaçãoBaixar o programa para o seu computador (escolha a versão doseu OS, baixe a ultima versão estável)DescompactarAbrir a pasta e executar o arquivo Processing(no linux pode ser necessário autorizar leitura, execução eescrita deste arquivo)Definir a pasta Sketchbook onde serão salvos os seus arquivos:/home/caleb/sketchbook ou /meusdocumentos/sketchbookhttp://oficinaprocessing.blogspot.com
  6. 6. ProcessingBásicoFile – abrir, salvar, exportar e exemplos dos sketchsTools/Ferramentas – seletor de fontes e cores, adicionabibliotecas, formata o texto(identação)Espaço para escrever programaBotão play/stop – executa/para programaSketchbook – pasta onde ficam os projetos e bibliotecas deterceiroshttp://oficinaprocessing.blogspot.com
  7. 7. Hello Worldellipse (100,100, 60, 60);http://bit.ly/oPex01ellipse >> função desenha elipse100, 100 >> argumentos posição eixo X e Y60, 60 >> argumentos largura e altura da elipseFind in reference >>selecionar função e clicar com botão direitodo mouse, exibe explicação e exemplos das funções nativashttp://oficinaprocessing.blogspot.com
  8. 8. Hello WorldPixelSistema de Coordenadas do Processing(0,0) // topo à esquerdaSistema Cartesiano de Coordenadas(0,0) // centrosize(200, 200); //função que define a tela com 200x200 pixelshttp://oficinaprocessing.blogspot.com
  9. 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 linhapoint (x, y); //desenha um pontoline(x, y, x2, y2); //desenha uma linharect(x, y, l, a); //desenha um retânguloellipse(x, y, l, a); //desenha uma elipsetriangle(x1, y1, x2, y2, x3, y3); //desenha um trianguloquad(x1, y1, x2, y2, x3, y3, x4, y4); //desenha quadradoarc(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/oPex02http://oficinaprocessing.blogspot.com
  10. 10. Formas PrimitivasstrokeWeigth, rectMode, ellipseModestrokeWeight(10); // define espessura do contorno em 10pxrectMode(CENTER); // posição no modo centro do retângulorect(100,100,40,40);//por default a posição do retângulo é a esquerda//e da elipse é no centrostrokeWeight(10); // define espessura do contorno em 10pxellipseMode(RIGHT); // posição no modo à direita do circuloellipse(100,100,40,40);http://bit.ly/oPex03http://oficinaprocessing.blogspot.com
  11. 11. Coresbits, bytes, escala de tons de cinza,stroke, fill, background1 bit >>armazena 2 estados(0 ou 1)1 byte = 8bits >>armazena 256 estadosEscala de tons de cinza = 1byte0= preto e 255=brancobackground(0); //define fundo pretostroke(255); //define contorno brancofill(195); //define cor da forma cinza clarorect(80,80, 50, 50);http://bit.ly/oPex04http://oficinaprocessing.blogspot.com
  12. 12. CoresEscala completa de cores > RGB e RGBAEscala de RGB = 3bytes 1 para cada cor primitivasize(400,400);background(0,0,255); //fundo azul clarostroke(0,255,0); //contorno verde clarofill(255, 0,0); //preenche de vermelho clarorect (150, 150, 100,75);http://bit.ly/oPex05RGBA = 4 bytes > mais um argumento para transparênciaAlpha >> 0 = 100% opaco e 255 = 100%transparentehttp://oficinaprocessing.blogspot.com
  13. 13. CoresBandas de cores customizadascolorMode(RGB, 133);oucolorMode(RGB, 107, 121, 94, 150);/*Limita o valor em cada cor, caso seja maior vai permanecer nodefinido. */http://oficinaprocessing.blogspot.com
  14. 14. Hello WorldCrie o seu primeiro projetoFaça o seu perfil no http://sketchpad.cc e publique o projetoPode ser uma criatura, objeto ou desenhoUse formas primitivasPara se inspirar entre no site:http://rmx.cz/monsters/http://oficinaprocessing.blogspot.com
  15. 15. AgradecimentosMuito obrigado!Daniela, Gabriel, minha família, Ben Fry, Casey Reas, DanielShiffman, Ira Greenberg, Karsten Schmidt, Ary Bader-Natal,Sketchpad, comunidade Processing, Rede SESC, Equipes deInternet Livre do SESC, Vinicius, Yara, equipe da Globalcode( www.globalcode.com.br ) e todos os que participaram dasoficinas.Contatos:calebml@gmail.comtwitter: @calebmlhttp://oficinaprocessing.blogspot.com
  16. 16. ReferênciasBibliografia indicadaBen Fry e Casey Reas. Processing a Programming handbook forvisual designers and artists.Ben Fry e Casey Reas. Getting Started with Processing.Daniel Shiffman. Learning Processing. A begginers guide toprogramming images, animation and interaction.Ira Greenberg. Processing - Creative coding and computional art* Estes livros podem ser adquiridos no site:http://www.amazon.comhttp://oficinaprocessing.blogspot.com

×