Processing 02

Introduo Programao Grfica
com Processing
Notas para a Formao @ Audincia Zero
Pedro Amado
Porto, 2008-03-22
Este trabalho est licenciado sob uma Licena Creative Commons Atribuio-Uso No-ComercialPartilha nos termos da mesma Licena 2.5 Portugal. Para ver uma cpia desta licena, visite http://
creativecommons.org/licenses/by-nc-sa/2.5/pt/ ou envie uma carta para Creative Commons, 559
Nathan Abbott Way, Stanford, California 94305, USA.
2 / 45
Qualquer correco ou sugesto:

pedamado@gmail.com
Para mais informaes e slides da sesso:
http://pedamado.googlepages.com
http://pedamado.wordpress.com/2008/03/22/processingaudiencia-zero/
Manual da formao original disponvel aqui:
http://www.box.net/shared/n3ew1kqskc
Ficheiros e Exemplos:
http://www.box.net/shared/f0rhr90ws8
Pedro Amado, 2008-03-18
Notas para a Formao de Introduo Programao com Processing
3 / 45
Resumo
As presentes notas servem de apoio s sesses (2) de
formao em Introduo programao Grfica com
Processing na Audincia Zero.
Esta no uma sesso de aprendizagem em programao!
A formao consiste:
Elementos fundamentais de programao,
Exposio de exemplos de artistas conceituados
Desafios para criar aplicaes interactivas com um grau
sucessivo de independncia
Uma aplicao grfica interactiva
4 / 45
Dia 1
Apresentao
Pedro Amado
Mestre em Arte Multimdia (2007)
Licenciatura em Design de Comunicao (2002).
Assistente Convidado no Departamento de Arte e
Comunicao (DeCA) da Universidade de Aveiro (UA) onde
lecciona Multimdia.
Tcnico Superior de Design na Faculdade de Belas Artes da
Universidade do Porto (FBAUP 2003-2007)
5 / 45
Introduo
Pblico-Alvo
Alunos de Design de Comunicao (Designers);
Alunos de Artes Plsticas (Artistas);
Pessoas interessadas em Multimdia Digital (Toda a gente).
Requisitos?
Curiosidade!
Porqu programar?
Um programa um jogo de algoritmos construdos para
resolver ou simplificar um problema.
Because an artist is expected to understand his/her medium.
Because this is true digital design.
6 / 45
Porqu o Processing?
1. Open Source
2. Verso Beta (ainda) o que o torna ideal
3. Multi-plataforma. MacOS, Win, Unix.
4. Poder do JAVA
a. Simples*
b. Adequa-se ao processo de ensino*
c. Faz uma boa transio entre linguagens de baixo
nvel e scripting de muito alto nvel;
d. Documentao extensa.
H diversos websites dedicados programao,
especialmente em JAVA e muitos dedicados ao
Processing ver a seco de links;
e. (muito) Extensvel
5. Exporta Executveis e Applets para a Web
6. Comunidade
7 / 45
Como obter e usar: Download & Install
Site:
http://www.processing.org/
Download:
http://www.processing.org/download/index.html
Documentao:
http://www.processing.org/reference/index.html
Aprendizagem:
http://www.processing.org/learning/index.html
8 / 45
IDE(PDE)
App01, Hello World!
9 / 45
Do Algoritmo arte (conceptual) e vice-versa. O desenho

como um processo racional
Concept art is a form of illustration where the main goal is to
convey a visual representation of a design, idea, and/or mood
for use in movies, video games, or comic books before it is put
into the final product.
The idea becomes a machine that makes the art. Sol LeWitt,
Paragraphs on Conceptual Art, Art Forum, 1967.
10 / 45
Exemplos
Ben Fry
Anemone, 2005
Valence, 1999
Casey Reas
Ti, 2004
Process 4, 2005
Articulate, 2004
Martin Wattenberg
Thinking Machines 4, 2001-04
11 / 45
Alternativas ao Processing
Flash
http://www.adobe.com/
NodeBox
http://nodebox.net/code/index.php/Home
Scriptographer
http://www.scriptographer.com/
Max/MSP
http://www.cycling74.com/products/maxmsp
PureData
http://puredata.info/
12 / 45
SmallTalk / Squeak
http://www.squeak.org/
Flex
http://flex.org/ | http://labs.adobe.com/technologies/flex/
MS Silverlight
http://silverlight.net/
JAVA
http://java.sun.com/
OpenFrameworks
http://openframeworks.cc/
( C++ http://www.cplusplus.com/ )
13 / 45
Conceitos Gerais de Programao

Algoritmia
Um algoritmo pode ser descrito usando vrias linguagens
ou lnguas:
Portugus;
Pseudo-cdigo, uma linguagem entre a linguagem
natural e uma linguagem de programao;
Fluxogramas, descrio grfica de um algoritmo;
Linguagem de Programao
14 / 45
Lgica e Sintaxe
Um programa pode ser analisado segundo duas
perspectivas:
Sintaxe: o cdigo est de acordo com as regras gramaticais
da linguagem de programao utilizada?
Lgica: o cdigo executa aquilo que ns pretendemos?
Um programa pode estar sintacticamente correcto (regra
geral o compilador detecta estes erros), mas logicamente
estar errado.
Nvel de detalhe...
15 / 45
Comentrios e Documentao
Sintaxe introduzida: //, /* */
App02, Comentrios
Expresses, instrues e terminadores

Sintaxe introduzida: ;
16 / 45
Sensibilidade caixa (Mm)

O Processing sensvel ao uso de maisculas e de
minusculas. Escrever minsculas NO a mesma coisa
que escrever MINUSCULAS.
Espao em branco
O Processing insensvel ao espao em branco entre
funes, expresses e/ou literais.
Funes e callbacks
Sintaxe introduzida: () {}
Conceitos introduzidos: Funo, Parmetros, ndice de
acesso, Bloco de cdigo
17 / 45
Consola e mensagens
Sintaxe introduzida: print(), println();
Conceitos introduzidos: Consola, Debug, Funo, Mensagem
App04, Print
Dados/Literais
(Inserir diagrama dos elementos do cdigo)
18 / 45
Coordenadas
Sintaxe introduzida: size();
Processing uses a Cartesian coordinate
system with the origin in the upperleft corner. If your program is 320 pixels
wide and 240 pixels high, coordinate [0,
0] is the upper-left pixel and coordinate
[320, 240] is in the lower-right. The
last visible pixel in the lower-right corner of the screen is at
position [319, 239] because pixels are drawn to the right and
below the coordinate.
19 / 45
Primitivas
Sintaxe introduzida:
point(), line(), rect(), ellipse(), bezier()
App05, Primitivas
Sintaxe Extra:
quad(),curve(), rectMode(), ellipseMode(),
curveVertex(), bezierVertex();
App06, Bezier
20 / 45
Cor
background(), fill(), stroke(), noFill(),
noStroke()
Sintaxe Extra:
color()
Conceitos: RGB+A (Alpha)
App07, Cor
21 / 45
Atributos/Modos de Desenho
smooth(), strokeWeight(), strokeCap(),
Sintaxe Extra:
ellipseMode(), rectMode()
App08, Atributos
22 / 45
Variveis e Tipos de Dados

Todos os dados armazenados em memoria e ou
manipulados pelo computador tem uma natureza
especfica.
Os valores/variveis utilizadas nas operaes tm de ser
compatveis Tm de ser do mesmo tipo
Simples
Tipos simples so tipos cujos valores so atmicos, i.e.,
no podem ser decompostos
Numrico
- Inteiro
- Real
23 / 45
Alfanumrico (cadeia de caracteres ou string)

1 (string) diferente de 1 (nmero)
Lgico (verdadeiro ou falso - boolean)
Compostos(Complexos)*
Tipos complexos so tipos compostos por vrios
elementos simples:
Vector (Array em ingls no confundir com a palavra
inglesa vector): uma lista de elementos do mesmo tipo
que podem ser acedidos via um ndice.
Matriz: vector multi-dimensional;
Estrutura (Struct): agregao de vrios tipos de dados;
24 / 45
Tipos de variveis
int, float, boolean, char, String*
App09, Variaveis
Declarar e inicializar (Strict Typing)

Sintaxe introduzida: = //atribuir
Visibilidade (Scope)*
Conceitos introduzidos: Global e Local
Variveis do Processing*
Sintaxe introduzida: width, height
25 / 45
Converso de dados*
boolean(), byte(), char(), int(), float(),
str()
(Inserir App aqui?)
Operadores
Aritmticos
Sintaxe introduzida: +, -, *, /, %
App10, Operadores Aritmticos
26 / 45
Precedncia
Sintaxe introduzida: ()
Abreviaes*
++,--,+=, -=, *=, /=, App11, Abreviaes
Restries*
ceil(), floor(), round(), min(), max()
App12, Restries
27 / 45
Operadores Relacionais
>, <, >=, <=, ==, !=
App13, Operadores Relacionais
Operadores Condicionais*
If, else, {}
App14, Operadores Condicionais
Operadores Lgicos
||, &&, !
App15, Operadores Lgicos
28 / 45
Estrutura de um programa
Modo Simples (Bsico)
This mode is used drawing static images and learning

fundamentals of programming. Simple lines of code have a
direct representation on the screen.
Modo Contnuo
setup(), draw(), frameRate(), frameCount(),
loop(), noLoop(), redraw()
Conceitos introduzidos: Bloco de Cdigo, Callbacks, Funes,
Visibilidade das variveis
29 / 45
This mode provides a setup() structure that is run once when

the program begins and a draw() structure which by default
continually loops through the code inside. This
additional structure allows writing custom
functions and classes and using keyboard and
mouse events.
App16, Modo Contnuo
Condies (e blocos de cdigo)

if(), else(), {}, switch()*, case*
App17, Condies
30 / 45
Ciclos ou Iteraes (e Nested Iterations)

for()
App18, Iteraes
31 / 45
Tarde
Prtica I Pong
App19, Pong Simples

App20, Pong
32 / 45
Sintaxe UI
mouseX, mouseY, pmouseX, pmouseY,
mousePressed, mouseButton, cursor(),
noCursor(), key, keyPressed, keyCode,
switch()*, case*
App21, SintaxeUI
33 / 45
Dia 2
Manh
Conceitos Gerais de Programao
34 / 45
Matemtica
constrain(), dist(),random()
Sintaxe extra:
abs(), sqrt(), pow(), norm(), lerp(), map()
App22, Matemtica
35 / 45
Trigonometria
PI, sin(), cos(), radians()
Sintaxe extra:
atan2(), degrees()
App23, Trigonometria
36 / 45
Transformao
translate(), rotate()
Sintaxe extra:
scale(), pushMatrix(), popMatrix();
App24, Transformaes
App24b, Transformaes
37 / 45
Aces, Gatilhos e Eventos*

mousePressed, mouseReleased, mouseMoved,
mouseDragged, keyPressed, keyReleased
App25, Aces Gatilhos e Eventos
38 / 45
Dados complexos*
Vectores e Matrizes
Array, [], new, Array.length, expand()
Sintaxe extra:
append(), shorten(),arraycopy()
App26, Vectores
App26b, Vectores
39 / 45
Funes e Mtodos (Parmetros)

void, return
Conceitos Introduzidos: Bloco de Cdigo, Parmetros e
Retorno
App27, Funes e Parmetros
Classes e Objectos
class, Object, . //String.length
App28, Classes e Objectos
40 / 45
Texto e Tipografia
PFont, loadFont(), textFont(), text(),
textSize(), textLeading(), textAlign(),
textWidth()
App29, Texto
41 / 45
Imagens e Pixels
PImage, loadImage(), image(), tint(),
noTint(), get(), set(), save(), saveImage()
App30, Imagens
42 / 45
Exerccio
Clculo de mdia de Idades
App31, Mdia Consola

App32, Mdia Primitivas
App33, Mdia Grfico
43 / 45
Pong I Pontuao e/ou imagens

Bibliotecas: Quicktime, controlP5, OpenGL*
Pratica II Field of Flowers I

Bibliotecas: PDF, OpenGL
44 / 45
Tarde
Pratica III Field of Flowers II
Interactivo Bibliotecas: Oscilator, jTablet
Pong II Wii Connect

Interactivo Bibliotecas: WiiMote
Pong III Computer Vision

Interactivo jMyron
45 / 45
Bibliografia e Referncias
Processing: A Programming Handbook
for Visual Designers and Artists
Casey Reas and Ben Fry (Foreword by John Maeda).
Published 24 August 2007, MIT Press. 736 pages.
Hardcover.
CARDOSO, Jorge Sebenta de Programao Multimdia [Em
linha]. UCP: Porto, 2006. 16 Fev 2006 Disponvel na WWW: URL:
http://teaching.jotgecardoso.org/pm.
MENDES, Antnio Jos; MARCELINO, Maria Jos Fundamentos
de Programao em Java 2. FCA: Lisboa, [s.d.]. ISBN 972-722-423-7
Manual original da Formao + Links

Processing 02

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Processing 02

Transféré par

Droits d'auteur :

Formats disponibles

Introduo Programao Grfica

Qualquer correco ou sugesto:

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Notas para a Formao de Introduo Programao com Processing

Como obter e usar: Download & Install

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

App01, Hello World!

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Do Algoritmo arte (conceptual) e vice-versa. O desenho

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Notas para a Formao de Introduo Programao com Processing

Notas para a Formao de Introduo Programao com Processing

Conceitos Gerais de Programao

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Expresses, instrues e terminadores

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Sensibilidade caixa (Mm)

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Variveis e Tipos de Dados

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Alfanumrico (cadeia de caracteres ou string)

Notas para a Formao de Introduo Programao com Processing

Declarar e inicializar (Strict Typing)

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

Notas para a Formao de Introduo Programao com Processing

This mode is used drawing static images and learning

Pedro Amado, 2008-03-18

Notas para a Formao de Introduo Programao com Processing

This mode provides a setup() structure that is run once when

Condies (e blocos de cdigo)

Pedro Amado, 2008-03-18