Processing 02

Introduo Programao Grfica com ProcessingNotas para a Formao @ Audincia Zero

Pedro Amado Porto, 2008-03-22

Este trabalho est licenciado sob uma Licena Creative Commons Atribuio-Uso No-Comercial-Partilha 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.

http://creativecommons.org/licenses/by-nc-sa/2.5/pt/http://creativecommons.org/licenses/by-nc-sa/2.5/pt/

2 / 45

Pedro Amado, 2008-03-18 Notas para a Formao de Introduo Programao com Processing

Qualquer correco ou sugesto:[email protected]

Para mais informaes e slides da sesso:http://pedamado.googlepages.comhttp://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/

Manual da formao original disponvel aqui:http://www.box.net/shared/n3ew1kqskc

Ficheiros e Exemplos:http://www.box.net/shared/f0rhr90ws8

http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/mailto:[email protected]://pedamado.googlepages.comhttp://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/http://www.box.net/shared/n3ew1kqskchttp://www.box.net/shared/f0rhr90ws8

3 / 45


ResumoAs 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 independnciaUma aplicao grfica interactiva

http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/

4 / 45


Dia 1Apresentao

Pedro AmadoMestre 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


IntroduoPblico-AlvoAlunos 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?Open Source1. Verso Beta (ainda) o que o torna ideal 2. Multi-plataforma. MacOS, Win, Unix.3. Poder do JAVA4.

Simples*a. Adequa-se ao processo de ensino*b. Faz uma boa transio entre linguagens de baixo c.

nvel e scripting de muito alto nvel;Documentao extensa. d.

H diversos websites dedicados programao, especialmente em JAVA e muitos dedicados ao Processing ver a seco de links;

(muito) Extensvele. Exporta Executveis e Applets para a Web5. Comunidade6.


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

http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/http://www.processing.org/http://www.processing.org/download/index.htmlhttp://www.processing.org/reference/index.htmlhttp://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 racionalConcept 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


ExemplosBen FryAnemone, 2005

Valence, 1999

Casey ReasTi, 2004

Process 4, 2005

Articulate, 2004

Martin WattenbergThinking Machines 4, 2001-04


11 / 45


Alternativas ao ProcessingFlash http://www.adobe.com/

NodeBoxhttp://nodebox.net/code/index.php/Home

Scriptographerhttp://www.scriptographer.com/

Max/MSPhttp://www.cycling74.com/products/maxmsp

PureDatahttp://puredata.info/

http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/http://www.adobe.com/products/flash/?ogn=EN_US-gntray_prod_flash_homehttp://nodebox.net/code/index.php/Homehttp://www.scriptographer.com/http://www.cycling74.com/products/maxmsphttp://puredata.info/

12 / 45


SmallTalk / Squeakhttp://www.squeak.org/

Flexhttp://flex.org/ | http://labs.adobe.com/technologies/flex/

MS Silverlighthttp://silverlight.net/

JAVAhttp://java.sun.com/

OpenFrameworkshttp://openframeworks.cc/

( C++ http://www.cplusplus.com/ )

http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/http://www.squeak.org/http://flex.org/http://labs.adobe.com/technologies/flex/http://silverlight.net/http://java.sun.com/http://openframeworks.cc/http://www.cplusplus.com/

13 / 45


Conceitos Gerais de Programao

AlgoritmiaUm 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 SintaxeUm 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 DocumentaoSintaxe 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 brancoO 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 mensagensSintaxe introduzida: print(), println();Conceitos introduzidos: Consola, Debug, Funo, Mensagem

App04, Print

Dados/Literais

(Inserir diagrama dos elementos do cdigo)


18 / 45


CoordenadasSintaxe introduzida: size();

Processing uses a Cartesian coordinate system with the origin in the upper-left 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


PrimitivasSintaxe introduzida: point(), line(), rect(), ellipse(), bezier()

App05, Primitivas

Sintaxe Extra: quad(),curve(), rectMode(), ellipseMode(), curveVertex(), bezierVertex();

App06, Bezier


20 / 45


CorSintaxe introduzida: background(), fill(), stroke(), noFill(), noStroke() Sintaxe Extra: color()

Conceitos: RGB+A (Alpha)

App07, Cor


21 / 45


Atributos/Modos de DesenhoSintaxe introduzida: smooth(), strokeWeight(), strokeCap(), Sintaxe Extra: ellipseMode(), rectMode()

App08, Atributos


22 / 45


Variveis e Tipos de DadosTodos 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

SimplesTipos simples so tipos cujos valores so atmicos, i.e., no podem ser decompostos

NumricoInteiro- 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 variveisSintaxe introduzida: 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*Sintaxe introduzida: boolean(), byte(), char(), int(), float(), str()

(Inserir App aqui?)

OperadoresAritmticosSintaxe introduzida: +, -, *, /, %

App10, Operadores Aritmticos


26 / 45


PrecednciaSintaxe introduzida: ()

Abreviaes*++,--,+=, -=, *=, /=, -

App11, Abreviaes

Restries*Sintaxe introduzida: ceil(), floor(), round(), min(), max()

App12, Restries


27 / 45


Operadores RelacionaisSintaxe introduzida: >, =,

28 / 45


Estrutura de um programaModo 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 ContnuoSintaxe introduzida: 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)Sintaxe introduzida: if(), else(), {}, switch()*, case*

App17, Condies


30 / 45


Ciclos ou Iteraes (e Nested Iterations)Sintaxe introduzida: for()

App18, Iteraes


31 / 45


TardePrtica I Pong

App19, Pong Simples

App20, Pong


32 / 45


Sintaxe UISintaxe introduzida: mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton, cursor(), noCursor(), key, keyPressed, keyCode, switch()*, case*

App21, SintaxeUI


33 / 45


Dia 2

ManhConceitos Gerais de Programao


34 / 45


MatemticaSintaxe introduzida: constrain(), dist(),random()

Sintaxe extra: abs(), sqrt(), pow(), norm(), lerp(), map()

App22, Matemtica


35 / 45


Trigonometria Sintaxe introduzida: PI, sin(), cos(), radians()

Sintaxe extra: atan2(), degrees()

App23, Trigonometria


36 / 45


TransformaoSintaxe introduzida: translate(), rotate()

Sintaxe extra: scale(), pushMatrix(), popMatrix();

App24, Transformaes

App24b, Transformaes


37 / 45


Aces, Gatilhos e Eventos*Sintaxe introduzida: mousePressed, mouseReleased, mouseMoved, mouseDragged, keyPressed, keyReleased

App25, Aces Gatilhos e Eventos


38 / 45


Dados complexos*Vectores e Matrizes

Sintaxe introduzida: Array, [], new, Array.length, expand()

Sintaxe extra:append(), shorten(),arraycopy()

App26, Vectores

App26b, Vectores


39 / 45


Funes e Mtodos (Parmetros)Sintaxe introduzida: void, return

Conceitos Introduzidos: Bloco de Cdigo, Parmetros e Retorno

App27, Funes e Parmetros

Classes e ObjectosSintaxe introduzida: class, Object, . //String.length

App28, Classes e Objectos


40 / 45


Texto e TipografiaSintaxe introduzida: PFont, loadFont(), textFont(), text(), textSize(), textLeading(), textAlign(), textWidth()

App29, Texto


41 / 45


Imagens e PixelsSintaxe introduzida: 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 imagensBibliotecas: Quicktime, controlP5, OpenGL*

Pratica II Field of Flowers IBibliotecas: PDF, OpenGL


44 / 45


Tarde

Pratica III Field of Flowers IIInteractivo Bibliotecas: Oscilator, jTablet

Pong II Wii Connect Interactivo Bibliotecas: WiiMote

Pong III Computer Vision Interactivo jMyron


45 / 45


Bibliografia e RefernciasProcessing: A Programming Handbookfor Visual Designers and ArtistsCasey 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

http://pedamado.wordpress.com/2008/03/22/processing-audiencia-zero/http://teaching.jotgecardoso.org/pmhttp://www.box.net/shared/hyvm3g1yay

Processing 02

Documents

Transcript of Processing 02