28 processing introducao, Manual de Análise e Design de Sistemas de Informação. Universidade Federal do Acre (UFAC)
C_cero.Juli_o
C_cero.Juli_o

28 processing introducao, Manual de Análise e Design de Sistemas de Informação. Universidade Federal do Acre (UFAC)

10 páginas
447Número de visitas
Descrição
introduçaõ ao processing
20 pontos
Pontos de download necessários para baixar
este documento
Baixar o documento
Pré-visualização3 páginas / 10
Esta é apenas uma pré-visualização
3 mostrados em 10 páginas
Baixar o documento
Esta é apenas uma pré-visualização
3 mostrados em 10 páginas
Baixar o documento
Esta é apenas uma pré-visualização
3 mostrados em 10 páginas
Baixar o documento
Esta é apenas uma pré-visualização
3 mostrados em 10 páginas
Baixar o documento
Processing

13/10/2014

1

Processing http://www.processing.org

Cláudio L. V. Oliveira

[email protected]

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

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:

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

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

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

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

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() ...

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

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

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

Até o momento nenhum comentário
Esta é apenas uma pré-visualização
3 mostrados em 10 páginas
Baixar o documento