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_o27 de outubro de 2015

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

PDF (475 KB)
10 páginas
392Nú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 shown on 10 pages

baixar o documento

Esta é apenas uma pré-visualização

3 shown on 10 pages

baixar o documento

Esta é apenas uma pré-visualização

3 shown on 10 pages

baixar o documento

Esta é apenas uma pré-visualização

3 shown on 10 pages

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

comentários (0)

Até o momento nenhum comentário

Seja o primeiro a comentar!

Esta é apenas uma pré-visualização

3 shown on 10 pages

baixar o documento