Inaulab #1! Code, Processing intro!

Transcrição

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

2 - 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!

3

4 anológico vs. digital!

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

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

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

8 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 ] decimal binary fonte:

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

10 Linguagens de programação - JAVA! fonte:

11 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 - 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)! "!

12 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!

13 Processing IDE!

14 0 - Instalação do Processing?! (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)!

15 Ambiente Processing! fonte:

16 Export Processing! fonte:

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

18 Reference > Find in 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:

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

20 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!

21 Sistema de Coordenadas! fonte:

22 Shapes primitivas 2d point (), line(), rectangle(), ellipse() rectmode();! fonte:

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

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

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

26 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!

27 Variáveis! Primitive types! boolean true ou false! char um character a, b, c! byte -128 a 127 (8 bits 256 possibilidades)! short a (16 bits)! int a ! 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.!

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

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

30 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=++;!

31 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!

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

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

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

35 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");!

36 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.!

37 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;!

38 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;!

39 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...;!

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

41 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;!

42 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.!

43 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 ) {! "! "

44 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.!

45 libs!

46 Libs internas! O Processing já inclui um conjunto de libs que ampliam o seu leque de aplicações. Permitem um desenvolvimento mais modular.! e.g. 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.!

47 Libs externas! Fazer o download >copiar para a pasta libraries! e. g. 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.!

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

49 fonte:

50 // 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:

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

52 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.).!

53 Obrigado!