http://www.emohr.

com/ - Manfred Mohr (Alemanha)

http://freeartbureau.org/fab_activity/lecture-frieder-nake/ Frieder Nake (Alemanha) http://0100101110101101.org/ - Eva e Franco Mattes (Itlia) http://marknapier.com/ - Mark Napier (EUA) http://art.teleportacia.org/olia.html - Olia Lialina (Rssia)

Algumas relaes entre arte e cdigos

http://wwwwwwwww.jodi.org coletivo (Europa)

http://www.miguel-chevalier.com/fr/index.html Miguel Chevalier (Mxico) http://lab-au.com/ - Lab (AU) coletivo, Blgica http://www.electronicshadow.com/ Eletronic Shawdow (Frana) http://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0 160.shtml - Feng Mengbo (China) Ver tambm: http://thecreatorsproject.vice.com/gallery

Sobre o Processing:

- Concebido no MIT (2001), deriva do JAVA -Linguagem de Programao Open Source -Imagem, Animao, Interatividade -algoritmo (conjunto de regras) criam formas grficas .Transformando dados em imagens, sons, formas, textos. -Diferente dos softwares mais complexos, o Processing traz uma linguagem mais fcil para designers e artistas - interface de um bloco de notas, mas com um alto potencial de interatividade. (com mouse, teclado, cmera...) - Libraries extenses para outras funcionalidades, como dados on-line, apps, som, arduno...(exemplos:http://www.sojamo.de/librarie s/controlP5/#installation; http://processing.org/reference/libraries/serial/ ; http://hexler.net/software/touchosc) - preciso praticar e desvendar seus potenciais tem uma srie de tutoriais e fruns on-line para isto.

primeiros

passos

Primeiros passos:
- Baixar conforme o sistema operacional: http://www.openprocessing.org/ - Instalar - Descompactar

2 janelas (janela de edio e janela de visualizao - renderizao)

S aparece quando executamos Run = play = Crtl+R

Botes de ao

Espao para edio - programao

Espao para msgs de erros

Sketchbook (pasta de documentos do processing)

Preferences
- Configurando o programa. -Ajustando a reserva de memria para a execuo do Processing - Alterando configuraes sobre arquivos e memria.

Dimenses
size (n,n);

;
cdigo finalizador de comando

* Caso voc no digite o tamanho o prprio programa cria 100x100 pixels (padro)

Barra que exibe os erros

Variveis
X,Y sistema de coordenadas cartesianas *No Processing a origem, o 0 est no canto superior esquerdo (0,0) Width (largura)/ Height (altura) pautados pelo Size (tamanho).

Variveis
X,Y sistema de coordenadas cartesianas *No Processing a origem, o 0 est no canto superior esquerdo (0,0) Width (largura)/ Height (altura) pautados pelo Size (tamanho).

void setup(){ size(500,500); background (200,200,200); ellipse(width/2,height/2,100,100); }

Definindo a cor do fundo

background (podemos usar RGB, separados por vrgula)

* Podemos usar muitas referncias do Photoshop fica mais fcil de visualizar

Utilizando formas bsicas

ellipse (elipse) rect (retngulo) line (linha) Sempre coordenados pelos nmeros dentro dos parnteses primeiro onde ela vai ser desenhada dentro do X,Y, depois seu tamanho

Utilizando formas bsicas

ellipse (elipse) rect (retngulo) line (linha) - triangle (lembrar que tem mais um lado) Sempre coordenados pelos nmeros dentro dos parnteses primeiro onde ela vai ser desenhada dentro do X,Y, depois seu tamanho

Suavizando a aparncia
smooth() - suavizar Para suavizar os pixels utilizar sempre a palavra smooth entre colchetes no incio dos cdigos

Alterando cores e contornos

(noFill()) sem preenchimento ou (Fill()) (stroke(R, G,B)) cor do contorno ou (noStroke()) (strokeWeight(n)) espessura do contorno void setup(){ size(500,500); background(255,30,100); rect(200,200,180,180); noFill(); stroke(100,100,200); smooth(); line(100,100,50,50); fill(100,200,30); noStroke(); }

* Sempre utilizar () para alterar as hierarquias sempre abrir e fechar para que o comando funcione. * No tem transparncia no background As linhas seguem uma hierarquia de visibilidade.

Instrues para blocos de cdigos

Setup() Rodar uma nica vez Usado para funes fixas fundo, tela... { escreve a funo } Draw() Rodar em sequencia continuamente Varivel a cada frame interatividades diferenciadas

void setup (){ } void draw (){ }

* As variveis sempre podem ter valores alterados. * O Processing funciona a 60 quadros por segundo

void setup(){ size(500,500); } void draw (){ background (20,60,90); fill(255,255,255); triangle (50,50,200,20,mouseY,200); }

void setup(){ size(500,500); } void draw (){ background (20,60,90); fill(255,255,255); triangle (50,50,200,20,mouseY,mouseX); }

void setup(){ size (300,300); background (240,50,90); } void draw(){ triangle (100,100,70,90,mouseX,mouseY); noFill(); stroke(60,90,180); smooth(); }

Exemplos

void setup(){ size(500,500); background(125,200,255); rect(200,200,180,180); noFill(); stroke(100,100,200); }

void draw(){ ellipse(mouseX,mouseY,20,20); fill(40,30,50); noStroke(); }

Exemplo mais complexo s para ter uma noo!

http://www.processing.org/learning/topics/rgbcube.html

float xmag, ymag = 0; float newXmag, newYmag = 0;

void setup() { size(640, 360, P3D); noStroke(); colorMode(RGB, 1); }

void draw() { background(0.5); pushMatrix(); translate(width/2, height/2, -30); newXmag = mouseX/float(width) * TWO_PI; newYmag = mouseY/float(height) * TWO_PI; float diff = xmag-newXmag; if (abs(diff) > 0.01) { xmag -= diff/4.0; } diff = ymag-newYmag; if (abs(diff) > 0.01) { ymag -= diff/4.0; }

fill(0, 1, 1); vertex(-1, 1, fill(1, 1, 1); vertex( 1, 1, fill(1, 0, 1); vertex( 1, -1, fill(0, 0, 1); vertex(-1, -1,

1); 1); 1); 1);

fill(1, 1, 1); vertex( 1, 1, 1); fill(1, 1, 0); vertex( 1, 1, -1); fill(1, 0, 0); vertex( 1, -1, -1); fill(1, 0, 1); vertex( 1, -1, 1); fill(1, 1, 0); vertex( 1, 1, -1); fill(0, 1, 0); vertex(-1, 1, -1); fill(0, 0, 0); vertex(-1, -1, -1); fill(1, 0, 0); vertex( 1, -1, -1); fill(0, 1, 0); vertex(-1, 1, -1); fill(0, 1, 1); vertex(-1, 1, 1); fill(0, 0, 1); vertex(-1, -1, 1); fill(0, 0, 0); vertex(-1, -1, -1); fill(0, 1, 0); vertex(-1, fill(1, 1, 0); vertex( 1, fill(1, 1, 1); vertex( 1, fill(0, 1, 1); vertex(-1, 1, -1); 1, -1); 1, 1); 1, 1);

rotateX(-ymag); rotateY(-xmag);
scale(90); beginShape(QUADS);

fill(0, 0, 0); vertex(-1, -1, -1); fill(1, 0, 0); vertex( 1, -1, -1); fill(1, 0, 1); vertex( 1, -1, 1); fill(0, 0, 1); vertex(-1, -1, 1); endShape(); popMatrix();

Utilizando a condicional IF
(if) + variveis

void setup() { size(640, 360); background(200,100,100); }

void draw() { stroke(10,10,10); if (mousePressed == true) { line(mouseX, mouseY, pmouseX, pmouseY); } }

* Sempre utilizar () para alterar as hierarquias sempre abrir e fechar para que o comando funcione. * No tem transparncia no background

Utilizando a condicional IF
(if) + variveis

void setup() { smooth(); size(510, 510); background(30,200,100); noFill(); stroke(0); }

void draw() { if (mousePressed){ ellipse(mouseX, mouseY, 100, 100); } }

float dir=1; //direction of change float tinto=0; //black

void setup(){ size(450,400); //size of the page background(248,247,247); //background color frameRate(20); //how fast noStroke(); //there are no lines smooth(); } void draw(){ ellipse(220,220,150,150); //circle 1 ellipse(155,140,100,100); //circle 2 ellipse(290,130,100,100); //circle 3 tinto=tinto+dir*3; //set new color if(tinto<0){ //set to 0 dir=1; } if(tinto>64){ //set to 64 dir=-1; } fill(0,tinto,0); //set of the color }

// mais de uma condio

float x = 100; float y = 100; float angle1 = 0.0; float segLength = 50;
void setup() { size(640, 360); strokeWeight(20.0); stroke(255, 100); } void draw() { background(0); float dx = mouseX - x; float dy = mouseY - y; angle1 = atan2(dy, dx); x = mouseX - (cos(angle1) * segLength); y = mouseY - (sin(angle1) * segLength); segment(x, y, angle1); ellipse(x, y, 20, 20); } void segment(float x, float y, float a) { pushMatrix(); translate(x, y); rotate(a); line(0, 0, segLength, 0); popMatrix(); }

Utilizando o teclado como interface

int rectWidth;

void setup() { size(640, 360); noStroke(); background(0); rectWidth = width/4; }

void draw() { // keep draw() here to continue looping while waiting for keys } void keyPressed() { int keyIndex = -1; if (key >= 'A' && key <= 'Z') { keyIndex = key - 'A'; } else if (key >= 'a' && key <= 'z') { keyIndex = key - 'a'; } if (keyIndex == -1) { // If it's not a letter key, clear the screen background(0); } else { // It's a letter key, fill a rectangle fill(millis() % 255); float x = map(keyIndex, 0, 25, 0, width - rectWidth); rect(x, 0, rectWidth, height); } }

Adicionando

textos

* preciso converter a fonte para a extenso do Processing vlw * Crtl+K para ver se a fonte est na pasta Data copia o nome da fonte.

void setup(){ size (300,300); background( 100,200,200); PFont fonte; fonte=loadFont("Majoram-48.vlw"); textFont(fonte); fill(0); text("Bom dia",200,200,150,150); }

loaFont - carregar a fonte textSize() - Tamanho da Fonte em pixels

PFont font; void setup(){ size(800, 800); font = loadFont ("JandaManateeBubble-48.vlw"); textFont (font); }

void draw(){ background(40, 105, 10); fill(115, 131, 90); text("Segunda-feira, 15 de abril de 2012. Acorda!!!", 80, 150, mouseX, 500); }

Variveis
As variveis podem representar a posio, cor, alteraes Para criar uma varivel necessrio atribuir-lhe um nome e um valor
int largura; Ou seja, apenas nmeros inteiros TIPO DE VARIVEL SEMPRE ANTES DO NOME
largura=30; Quando usamos = significa que cada vez que usarmos a palavra largura o programa a substitui por 30.

Float Indicado para armazenar nmeros decimais. float x=10.20;

Boolean Variveis booleanas podem assumir apenas 2 valores: true (verdadeiro) ou false (falso). Color Este um tipo especial de varivel encontrado no Processing. Com ele podemos armazenar cdigos de cores e atribui-los a nomes arbitrrios.

http://navax.net.br/blog/?p=481

Exemplo mais complexo para ter uma noo!

int eye1x; int eye1y; float angle1; int eye2x; int eye2y; float angle2; void draw() { background(260,180,100); ellipseMode(CENTER); fill(255,255-redEye,255-redEye); ellipse(eye1x,eye1y,100,100); ellipse(eye2x,eye2y,100,100); angle2 = atan2(mouseY-eye2y, mouseXeye2x)+angle2plus; float newEye2x = eye2x + (cos(angle2)*25); float newEye2y = eye2y + (sin(angle2)*25); fill(0,100,100); ellipse(newEye2x,newEye2y,50,50); float newEye2xSmall = newEye2x + (cos(angle2)*10); float newEye2ySmall = newEye2y + (sin(angle2)*10); fill(0); ellipse(newEye2xSmall,newEye2ySmall,10,10); if (mousePressed == true) { if (mouseButton == RIGHT) { angle1plus += 0.2; angle2plus -= 0.2; redEye = constrain(redEye - 1,0,255); } else if (mouseButton == LEFT) { angle1plus -= 0.2; angle2plus += 0.2; redEye = constrain(redEye + 1,0,255); } } }

float angle1plus; float angle2plus; int redEye = 0;

void setup() { size(350, 250); noStroke(); eye1x = 120; eye1y = 120; angle1 = 0.0; eye2x = 225; eye2y = 120; angle2 = 0.0; smooth(); }

angle1 = atan2(mouseY-eye1y, mouseXeye1x)+angle1plus; float newEye1x = eye1x + (cos(angle1)*25); float newEye1y = eye1y + (sin(angle1)*25); fill(0,100,100); ellipse(newEye1x,newEye1y,50,50);
float newEye1xSmall = newEye1x + (cos(angle1)*10); float newEye1ySmall = newEye1y + (sin(angle1)*10); fill(0); ellipse(newEye1xSmall,newEye1ySmall,10,10);

Aleatoriedade
Dentro de Draw acrescentar (stroke ) e (random)

void setup() { smooth(); size(510, 510); background(#333333); noFill(); } void draw() { if (mousePressed) { stroke(mouseX/2); ellipse(mouseX, mouseY, random(20,80), random(20,80)); } }

void setup() { size (500,500); strokeWeight(8); stroke(255); smooth(); noCursor(); frameRate(10); }

void draw() { line (mouseX,mouseY,pmouseX,pmouseY); }

void setup() { size (500,500); background(0); strokeWeight(8); stroke(255); smooth(); noCursor(); frameRate(10); }
void draw() { background(0); line (mouseX,mouseY,pmouseX,pmouseY); }

void setup() { size (500,500); background(0); smooth(); noStroke(); noCursor(); } void draw() { float diam=abs(pmouseX-mouseX); ellipse(mouseX,mouseY,diam,diam); }

imagens

Trabalhando com imagens

PImage img; (atribuir um nome qualquer a imagem)/ loadImage

void setup(){ size(900,900); background(0); PImage img; img = loadImage("abutres.jpg"); image (img,0,0); }

*Os arquivos de imagem devem estar salvos em Sketch pasta Data * import = arrastar os arquivos para a janela de edio ou Add File open * Aceita arquivos de imagem JPEG, PNG ou GIF

Transparncia

PImage img; float offset = 0; float easing = 0.05; void setup() { size(900, 500); img = loadImage("abutres.jpg"); // Load an image into the program }

void draw() { image(img, 0, 0); // Display at full opacity float dx = (mouseX-img.width/2) - offset; offset += dx * easing; tint(255, 126); // Display at half opacity image(img, offset, 0); }

PImage abutre; PImage solo;

void setup(){ size(900,900); }

void draw(){ background(0); abutre=loadImage("img.jpg"); image(abutre,0,0); solo=loadImage("solos.gif"); image (solo,mouseX,mouseY,pmouseX,pmouseY); }

PImage abutre; PImage solo; void setup(){ size(900,900); } void draw(){ background(0); abutre=loadImage("img.jpg"); image(abutre,0,0); solo=loadImage("solos.gif"); image (solo,mouseX,mouseY); }

PImage abutre; PImage solo; void setup(){ size(900,900); }

void draw(){ background(0); abutre=loadImage("img.jpg"); image(abutre,0,0); solo=loadImage("solos.gif"); image (solo,mouseX, mouseY, random(20,80), random(20,80)); }

Colorindo as imagens
tint() void setup(){ size(1024,960); background (0); PImage pepe; pepe=loadImage ("noble.jpg"); image (pepe,0,0); tint(74,200,79); image(pepe,900,50,500,500); tint(50,49,49); image(pepe,900,400,200,213);
}

VER OUTROS EXEMPLOS DE DENTRO DO PROGRAMA E NO SITE http://www.processing.org/learning/topics/tree.html

Fontes consultadas para a elaborao deste material: http://navax.net.br http://www.brunocampagnolo.com/2010_1/processing/desenho/indexJavaScript.html http://www.processing.org/learning/ http://www.caligraffiti.com.br/introducao-ao-processing/ http://forum.processing.org http://www.openprocessing.org

salvando para

imprimir

- Os grficos feitos no Processing podem ser salvos em PDF, tiff, jpeg ou PNG. - A qualidade da imagem est relacionada ao size(). - import processing.pdf.*; - importar a biblioteca (processing.pdf). ver processo na ntegra em: http://navax.net.br/blog/?p=841

O mesmo ocorre para vdeo ( preciso importar as bibliotecas especiais) para salvar em tempo real.

salvando como

vdeo

import processing.video.*; MovieMaker mm; void setup() { size(640, 480); mm = new MovieMaker(this, width, height, drawing.mov,30,MovieMaker.MOTION_JPEG_A, MovieMaker.BEST,1); background(204); } void draw() { ellipse(mouseX, mouseY, 20, 20); mm.addFrame(); } void keyPressed() { if (key == ) { mm.finish(); } }

varivel (mm) do tipo MovieMaker Dentro do setup definimos o parmetro largura, altura, nome do filme, frames por segundo (fps), codec para quicktime, qualidade e keyframeRate.