Inaulab #1! Code, Processing intro!

Inaulab #1! Code, Processing intro! Helder Dias! helvis@netcabo.pt! 7 de Julho 2012, 9:30-13:00!

- anológico vs. digital! - programação, código e algoritmia! - Processing IDE! - variáveis, ciclos, condições e funções! - libs! - breve introdução à programação orientada a objectos! - criação de máquinas gráficas algorítmicas!

anológico vs. digital!

Analógico-Digital! A digitalização faz-se através de um analog-to-digital converter (ADC). Um fluxo sensível produz variações eléctricas que por sua vez são convertidas em valores numéricos. A uma sampling rate maior (mais amostragens) corresponde um registo mais fiel do sinal e uma melhor reprodução posterior.! fonte: http://www.indiana.edu/~emusic/etext/digital_audio/chapter5_sample.shtml http://omusicista.blogspot.pt/2011/04/vozes-do-passado.html!

Analógico-Digital! Exemplo: sensor de temperatura! Temp in C = [(Vout in mv) 500] / 10 Temperature range: 0.1V ( 40 C) to 150 C but accuracy decreases ader 125 C fonte: http://www.ladyada.net/learn/sensors/tmp36.html http://pt.wikipedia.org/wiki/arduino

programação, código e! algoritmia!

Linguagens de programação! High level Language (Lingo) if sprite 5 is visible then go to the frame 100 Assembly Language MOV r0, #0C ;load base address of string into r0 LOAD: MOV r1,(r0) ;load contents into r1 CALL PRINT ; call a print rouvne to print the character in r1 Machine Language : Jumping to the address 1024: [ op target address ] 2 1024 decimal 000010 00000 00000 00000 10000 000000 binary fonte: http://www.webopedia.com/term/m/machine_language.html!

Algoritmo! Programar pode ser entendido de uma forma geral como a escrita de algoritmos. Um conjunto de instruções (receita) que conduz à resolução de um determinado problema num número finito de passos. O algoritmo conduz a computação. Existem algoritmos mais eficientes do que outros.! D. Knuth (1968, 1973) has given a list of five properties that are widely accepted as requirements for an algorithm:! Finiteness: "An algorithm must always terminate after a finite number of steps"! Definiteness: "Each step of an algorithm must be precisely defined; the actions to be carried out must be rigorously and unambiguously specified for each case"! Input: "...quantities which are given to it initially before the algorithm begins. These inputs are taken from specified sets of objects"! Output: "...quantities which have a specified relation to the inputs"! Effectiveness: "... all of the operations to be performed in the algorithm must be sufficiently basic that they can in principle be done exactly and in a finite length of time by a man using paper and pencil"! fonte: http://www.scriptol.com/programming/algorithm-definition.php!

Linguagens de programação - JAVA! fonte: http://viralpatel.net/blogs/java-virtual-machine-an-inside-story/!

Linguagens de programação Processing! "Processing refere-se ao IDE (integrated development environment) e à linguagem de programação. Projecto iniciado em 2001 por Casey Reas e Ben Fry no MIT Media Lab.! ferramenta para criadores sem bases de computer science! open source - http://code.google.com/p/processing/source/checkout! tem como base o Java! comunidade muito activa (disponibilizam código, libs, tutoriais, etc.)! vários livros publicados sobre este tema (Daniel Shiffman, Casey Reas & Ben Fry, Kostas Terzidis, etc.)! vários projectos relacionados:! "Arduino (physical computing)! "Processing.js (javascript / canvas HTML5 para render)! "iprocessing (IOS)! "!

Linguagens de programação Processing! Outras possibilidades:! "OpenFrameworks (C++)! "Cinder (C++)! "NodeBox (Python)! "Max/Msp! "PD! "Isadora! "...! Prós e contras. Nenhuma linguagem é melhor do que outra, apenas mais adequada! linguagem interpretada vs linguagem compilada a primeira permite um debugging mais fácil a segunda é mais rápida!

Processing IDE!

0 - Instalação do Processing?! http://processing.org/download/! (1.5.1 OSX, WINDOWS, Linux)!! 1- Criar uma pasta para as libs! Processing > Preferências (obtemos a localização do Sketchbook)! Dentro do Sketchbook criamos uma pasta denominada libraries (na qual, no futuro, colocaremos as libs a utilizar)!

Ambiente Processing! fonte: http://processing.org/learning/gettingstarted/!

Export Processing! fonte: http://processing.org/learning/gettingstarted/!

variáveis, ciclos,! condições e funções!

Reference > Find in reference! http://processing.org/reference/! função (parâmetro 1, parâmetro 2,...) ;! size (largura, altura);! Exercício 0:! Abrir o Processing > Run! Stop > size(400,400); >Run! fonte: http://processing.org/reference/size_.html

Debugging! print ( Hello World ); // print na console sem parágrafo! println ( Hello World ); // print na console com parágrafo!

Debugging! size (200, 200); // altera o tamanho da janela para 200 de largura por 200 de altura! /*! line(50,50,120,200);! line(50,150,120,200);! line(50,250,320,200);! */ permite comentar várias linhas seguidas!

Sistema de Coordenadas! fonte: http://processing.org/learning/drawing/!

Shapes primitivas 2d point (), line(), rectangle(), ellipse() rectmode();! fonte: http://processing.org/reference/point_.html

Cor fill(), nofill(), stroke(), nostroke() background(); colormode()! Exercício 1:! File > New! Criar um monstro recorrendo às shapes primitivas e à possibilidade de alterar a cor.! fonte: http://processing.org/reference/fill_.html

O código dentro da função setup() é executado uma vez quando o programa começa.! void setup (){!...! O código dentro da função draw() é executado até que o programa seja encerrado. Permite criar animações.! void draw(){!...! fonte: http://processing.org/reference/fill_.html

O código dentro da função setup() é executado uma vez quando o programa começa.! void setup (){! size(300,300);! O código dentro da função draw() é executado até que o programa seja encerrado.! void draw(){! rect (0,0,100,random(100));! 60FPS (ou o mais próximo disso que seja possível) caso não existe um framerate() a condicionar.! fonte: http://processing.org/reference/fill_.html

Variáveis! Como guardar na memória um valor que possa ser relembrado. Variáveis:...a named pointer to a locations in the computer s memory where the data is stored. Daniel Shiffman Learning Processing! Declarar uma variável:! int contador; // tipo nome (declarar a variável)! contador =10; // (inicializar a variável)! ou! int contador=10; // o = é um assignment e não um = comum!

Variáveis! Primitive types! boolean true ou false! char um character a, b, c! byte -128 a 127 (8 bits 256 possibilidades)! short -32768 a 32767 (16 bits)! int -2147483648 a 2147483647! long - inteiros com um intervalo ainda maior!! float vírgula flutuante! double vírgula flutuante, com muito mais casas decimais (programas avançados que requeiram uma precisão matemática extrema)! string some text! O próprio sistema já tem variáveis enunciadas como width ou height. E.g. println (width);! Cor azul. Faz o print da largura do stage.!

Variáveis! Casting! float f = 65.0;! int i = int(f);! println(i); // Prints 65!

Exercício 2:! Tirando partido desta estrutura:! void setup (){!...! void draw(){!...! Criar um código que produza um output visual recorrendo às primitivas (point(), line(), rect()...), que tire partido do background(), do fill(), e do stroke() (não esquecer a possibilidade de mudar o alfa), que utilize o random() e, por último, que recorra a algum tipo de variável. Quem quiser, também pode alterar o framerate().!

Variáveis Scope local vs. Global! Globais variáveis que estão existem ao longo de toda a vida do programa.! Locais existem apenas num determinado momento, num determinado bloco de código setup(), draw(), mousepressed(), keypressed(), if, while, for...! int zen=0;! void setup(){! "size(400,400);! void draw(){! "zen++;! void setup(){! "size(400,400);! void draw(){! "int zen=0;! "zen=++;!

Condicionais! Como produzir diferentes outputs de acordo com as circunstâncias? A base da interactividade. Se isto acontecer, então...! 15 é maior do que 20? FALSO! 15>10 FALSO! Operadores relacionais:! > maior! < menor! >= maior ou igual! <= menor ou igual! == igual!!= difrente! Operadores lógicos:! && and! or!! not!

Variáveis Booleanas! Uma sintaxe interessante:! boolean helvis=true;! if (helvis){! "helvis=!helvis;! "println(helvis);! Qual é o print?!

Condicionais! if (condição){! acção! acção!...! if (mousex>width/2){! println( ladob );!

Condicionais! if (condição){! acção A! }else{! acção B! if (mousex>width/2){! println( ladob );! }else{! println( ladoa );!

Condicionais nested ifs! if (condição booleana nº1){! acção A! }else if (condição booleana nº2) {! acção B! } else{! acção C! if (mousex>width/2){! "println("ladob");! }else if (mousex>width/2-120) {! "println("ladoc");! } else {! "println("ladoa");!

Exercício 3:! Tirando partido desta estrutura:! void setup (){!...! void draw(){!...! Criar um linha vertical que percorra o stage da esquerda para a direita e vice-versa. Variáveis e if (para verificar se atingiu um dos extremos 0 ou width).! Ajuda: o valor que adiciono para produzir o movimento pode ser uma variável que é multiplicada por -1 para inverter o sentido.!

Exercício 3 (resposta):! int linha=0;! int desloca=1;! void setup() {! " size(480, 320);! void draw() {! "background(255);! "fill(0);! "line (linha,0,linha,320);! "linha=linha+desloca;! if (linha>width linha<0){! "desloca=-desloca;!

Ciclos! Como repetir uma acção n vezes? Iteracção.! Atenção aos infinite loops!!! Os ciclos devem ser quebrados.!...! line (0,0,0,100);! line(10,0,10,100);! line(20,0,20,100);! line(30,0,30,100);! line(40,0,40,100);! line(50,0,50,100);!...! void setup() {! size(250,250);! void draw() {! background(0);! int f = 0;! while (f < width) {! nostroke();! fill (f);! rect(f,0,10,height);! f += 10;! while (boolean test){! "acção 1;! "acção2;!

Ciclos! Operadores de incremento/decremento:! y + + equivalente a y=y+1! z - - equivalente a z=z-1! x+=2 igual a x=x+2! s*=3 igual a s=s*3! for loop! for (inicialização; teste booleano; incremento)! for (int x=0; x<10;x++){! acção...;!

Ciclos! Posso utilizar a variável do loop para outras coisas:! for (int x=0; x<250;x++){! " stroke(x);! "line(x,0,x,150);!

Funções! Para já temos utilizado funções já definidas no Processing mas podemos criar as nossas.vantagens: modularidade e reutilização.! Exemplo de uma função void setup().! Como criar uma?! returntype functionname (arguments){! "//code body of function! void setup(){! size(200, 200);! void draw(){! println(soma(4, 3));! int soma(int x, int y){! int z=x+y;! return z;!

Exercício 4.0:! Criar uma função que desenhe um determinado elemento gráfico e chamá-la várias vezes com diferentes parâmetros.!

Input! Mouse e teclado! void setup(){! size(200, 200);! void draw(){! void mousepressed(){ // quando o utilizador pressionar o mouse, o código que estiver aqui dentro é chamado! void keypressed(){ // quando o utilizador pressionar uma tecla, o código que estiver aqui dentro é chamado.! "if( key >= 'A ) {! "! "

Input! Mouse e teclado! void setup(){! size(200, 200);! void draw(){! void mousepressed(){ // quando o utilizador pressionar o mouse, o código que estiver aqui dentro é chamado! void keypressed(){ // quando o utilizador pressionar uma tecla, o código que estiver aqui dentro é chamado.! "if( key >= 'A ) {! "! " Exercício 4.1:! Tornar o exercício anterior reactivo ao teclado.!

libs!

Libs internas! O Processing já inclui um conjunto de libs que ampliam o seu leque de aplicações. Permitem um desenvolvimento mais modular.! http://processing.org/reference/libraries/! e.g. Minim! http://code.compartmental.net/tools/minim/! Abrir o exemplo > Minim > Get Line In! Exercício 5:! Criar um sketch que reaja graficamente ao som captado.! Ajuda: line (in.left.get(i+1)*150,0,in.right.get(i+1)*150,200);! O importante aqui são as expressões in.left.get(i+1) e in.right.get(i+1) através delas podemos aceder dados resultantes da análise do buffer sonoro e utilizá-los para outra função.!

Libs externas! Fazer o download >copiar para a pasta libraries! e. g. http://hg.postspectacular.com/toxiclibs/downloads/! Algumas não estão actualizadas para a última versão do processing mas não deixa de ser um dos melhores packs disponíveis.!

breve introdução à! programação orientada! a objectos!

fonte: http://processing.org/learning/objects/

// Step 1. Declare an object.! Car mycar;! void setup() {! "// Step 2. Initialize object.! "mycar = new Car();! }! void draw() {! " background(255);! "// Step 3. Call methods on the object.! "mycar.drive();! "mycar.display();! }! fonte: http://processing.org/learning/objects/

criação de máquinas! gráficas algorítmicas!

Exercício 6:! Criar um máquinas gráficas algorítmicas que produzam resultados diferentes a cada actualização. (hora, data, random(), noise(), mousex, mousey, millis(), etc.).!

Obrigado! helvis@netcabo.pt!