Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

oficinaProcessingI

1,523 views

Published on

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

  • Be the first to comment

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

×