![13/10/2014
10
Processing
• Bibliotecas:
import g4p_controls.*;
GLabel lNome;
GTextField tNome;
String imagens[];
GImageButton botao;
void setup() {
frame.setTitle("Biblioteca G4P");
size (360, 180);
background(245);
lNome = new GLabel(this, 10, 20, 340, 20, "Digite o seu
nome:");
tNome = new GTextField(this, 10, 40, 340, 20);
imagens = new String[] {"botao-ok.png", "botao-ok.png",
"botao-ok-press.png" };
botao = new GImageButton(this, 10, 70, imagens);
}
Processing
• Bibliotecas:
void draw() {
}
public void handleButtonEvents(GImageButton
controle, GEvent evento) {
if (controle == botao) {
fill(0);
textFont(createFont("SansSerif",18));
text ("Olá, " + tNome.getText(), 10, 160);
}
}](https://image.slidesharecdn.com/processing-introducao-150817155555-lva1-app6892/85/Processing-introducao-10-320.jpg)
Processing-introducao
- 1. 13/10/2014 1 Processing http://www.processing.org Cláudio L. V. Oliveira prof.claudioluis@fatecjd.edu.br Outubro de 2014 • Processing é uma linguagem de programação gratuita e de código aberto construída para artes eletrônicas e projetos visuais; • Tem como principal objetivo ensinar noções básicas de programação de computador em um contexto visual; • Projeto iniciado em 2001 por Casey Reas e Ben Fry, ambos ex-membros do Grupo de Computação do MIT Media Lab. Processing
- 2. 13/10/2014 2 Processing • O IDE da Processing inclui um sketchbook, uma alternativa para organizar projetos sem adotar o padrão utilizado na maioria das IDEs. • Os sketches (programas) criados são uma subclasse do Java Papplet, classe que implementa a maioria das funcionalidades da Processing. • Ao compilar todo o código do sketch é traduzido para Java. Processing • IDE da Processing:
- 3. 13/10/2014 3 Processing • Um dos objetivos da Processing é atuar como uma ferramenta para não-programadores ou iniciantes em programação, através da satisfação imediata com um retorno visual, por exemplo: println("Olá Pessoal!"); Processing • Fácil e rápido retorno visual, por exemplo, desenho de uma elipse: size (200, 200); // Tamanho da tela ellipse (100, 100, 190, 190);
- 4. 13/10/2014 4 Processing • Definição de cores (método fill). Um único parâmetro entre 0 e 255 realizar o preenchimento em uma escala de tons de cinza: size (200, 200); fill (0); ellipse (100, 100, 190, 190); Processing • Definição de cores (método fill). Três parâmetros entre 0 e 255 realizar o preenchimento no padrão RGB: size (200, 200); fill(255, 255, 0); ellipse (100, 100, 190, 190);
- 5. 13/10/2014 5 Processing • Desenho de um retângulo: size (200, 200); rect (5, 5, 190, 190); Processing • Exibição de texto no contexto gráfico: size(200, 200); fill(0); text("Olá Pessoal!", 10, 20);
- 6. 13/10/2014 6 Processing • Estrutura básica de um sketch: void setup() { size(200, 200); noLoop(); } void draw() { fill (0); text("Olá Pessoal!", 10, 20); } Processing • Unindo os conceitos para desenvolver pequenos sketches: void setup() { size(200, 200); noLoop(); } void draw() { fill(0); rect (5, 5, 80, 20); fill (255); text("Olá Pessoal!", 10, 20); }
- 7. 13/10/2014 7 Processing • Animação simples: int i = 10; void setup() { size(200, 200); } void draw() { background(0); fill (255); text("Olá Pessoal!", 10, i); delay(150); i = i + 10; if (i > height) i = 10; } Processing • Fontes e alinhamento do texto: int i = 10; void setup() { size(200, 200); textFont(createFont("SansSerif",18)); textAlign(CENTER); } // Implementar o método draw() ...
- 8. 13/10/2014 8 Processing • Outra animação: int i = 10, p = 10; void setup() { size(200, 200); } void draw() { background(0); fill (0, 255, 0); ellipse (width/2, i, 25, 25); delay(100); i = i + p; if ((i > height) || (i < 0)) p = p * -1; } Processing • Utilização de imagens: PImage bola; int i = 10, p = 10; void setup() { size(200, 200); bola = loadImage("bola.gif"); } void draw() { background(0); fill (0, 255, 0); image (bola, width/2, i); delay(100); i = i + p; if ((i > (height - bola.height)) || (i < 0)) p = p * -1; }
- 9. 13/10/2014 9 Processing • Eventos do mouse: void setup() { frame.setTitle("UsoMouse"); size (360, 180); fill (255); // Cor branca } void draw() { if (mousePressed) { ellipse(mouseX, mouseY, 100, 100); } else { rect(mouseX, mouseY, 100, 100); } } Processing • Bibliotecas – Exemplo G4P (GUI for Processing):
- 10. 13/10/2014 10 Processing • Bibliotecas: import g4p_controls.*; GLabel lNome; GTextField tNome; String imagens[]; GImageButton botao; void setup() { frame.setTitle("Biblioteca G4P"); size (360, 180); background(245); lNome = new GLabel(this, 10, 20, 340, 20, "Digite o seu nome:"); tNome = new GTextField(this, 10, 40, 340, 20); imagens = new String[] {"botao-ok.png", "botao-ok.png", "botao-ok-press.png" }; botao = new GImageButton(this, 10, 70, imagens); } Processing • Bibliotecas: void draw() { } public void handleButtonEvents(GImageButton controle, GEvent evento) { if (controle == botao) { fill(0); textFont(createFont("SansSerif",18)); text ("Olá, " + tNome.getText(), 10, 160); } }