Processing Fundamentos

7/23/2019 Processing Fundamentos

1/52

Algumas relaesentre arte e cdigos

http://www.emohr.com/ - Manfred Mohr (Alemanha)

htt

p://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)

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

htt

p://www.miguel-chevalier.com/fr/index.html MiguelChevalier (Mxico)

http://lab-au.com/ - Lab (AU) coletivo, Blgica

http://www.electronicshadow.com/ Eletronic Shawdow(Frana)htt

p://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0160.shtml - Feng Mengbo (China)

Ver tambm: http://thecreatorsproject.vice.com/gallery
http://www.emohr.com/http://freeartbureau.org/fab_activity/lecture-frieder-nake/http://freeartbureau.org/fab_activity/lecture-frieder-nake/http://0100101110101101.org/http://marknapier.com/http://art.teleportacia.org/olia.htmlhttp://wwwwwwwww.jodi.org/http://www.miguel-chevalier.com/fr/index.htmlhttp://www.miguel-chevalier.com/fr/index.htmlhttp://lab-au.com/http://www.electronicshadow.com/http://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0160.shtmlhttp://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0160.shtmlhttp://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0160.shtmlhttp://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0160.shtmlhttp://thecreatorsproject.vice.com/galleryhttp://thecreatorsproject.vice.com/galleryhttp://chambersfineart.com/artists/Feng_Mengbo/FMB_Shot_0160.shtmlhttp://www.electronicshadow.com/http://lab-au.com/http://www.miguel-chevalier.com/fr/index.htmlhttp://wwwwwwwww.jodi.org/http://art.teleportacia.org/olia.htmlhttp://marknapier.com/http://0100101110101101.org/http://freeartbureau.org/fab_activity/lecture-frieder-nake/http://www.emohr.com/


2/52

Sobre o Processing:

- Concebido no MIT (2001), deriva do JAVA-Linguagem de Programao Open Source-Imagem, Animao, Interatividade

-algoritmo (conjunto de regras) criam formasgrficas .Transformando dados em imagens, sons,formas, textos.-Diferente dos softwares mais complexos, oProcessing traz uma linguagem mais fcil paradesigners e artistas- interface de um bloco de notas, mas com um altopotencial de interatividade. (com mouse, teclado,cmera...)- Libraries extenses para outras funcionalidades,como dados on-line, apps, som,

arduno...(exemplos:http://www.sojamo.de/libraries/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.
http://www.sojamo.de/libraries/controlP5/http://www.sojamo.de/libraries/controlP5/http://www.sojamo.de/libraries/controlP5/http://www.sojamo.de/libraries/controlP5/http://processing.org/reference/libraries/serial/http://hexler.net/software/touchoschttp://hexler.net/software/touchoschttp://processing.org/reference/libraries/serial/http://www.sojamo.de/libraries/controlP5/


3/52

primeiros

passos


4/52

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

- Instalar- Descompactar
http://www.openprocessing.org/http://www.openprocessing.org/


5/52

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

Espao para msgs de erros

Espao para edio - programao

Botes de ao

S aparece quando executamosRun = play = Crtl+R


6/52

Sketchbook(pasta dedocumentos do

processing)


7/52

Preferences- Configurando oprograma.-Ajustando areserva de

memria para aexecuo doProcessing- Alterandoconfiguraes

sobre arquivos e

memria.


8/52

Dimensessize (n,n);

;cdigo

finalizador decomando

* Caso voc no digite otamanho o prprio programa

cria 100x100 pixels (padro)


9/52

Barra queexibe os erros


10/52

VariveisX,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).


11/52

VariveisX,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);

}


12/52

Definindo a cor do fundobackground (podemos usar RGB, separados por vrgula)


13/52

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


14/52

Utilizando formas bsicasellipse (elipse) rect (retngulo) line (linha)

Sempre coordenados pelos nmeros dentro dos parnteses primeiro onde ela vai serdesenhada dentro do X,Y, depois seu tamanho


15/52

Utilizando formas bsicasellipse (elipse) rect (retngulo) line (linha) - triangle (lembrar que tem mais um lado)

Sempre coordenados pelos nmeros dentro dos parnteses primeiro onde ela vai serdesenhada dentro do X,Y, depois seu tamanho


16/52

Suavizando a aparnciasmooth() - suavizar

Para suavizar os pixels utilizar sempre a palavra smooth entre colchetes no incio doscdigos


17/52

Alterando cores e contornos(noFill()) sem preenchimento ou (Fill())

(stroke(R, G,B)) cor do contorno ou (noStroke())

(strokeWeight(n)) espessura do contorno

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

visibilidade.

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();

}


18/52

void setup (){

}

void draw (){}

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

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 frameinteratividades diferenciadas


19/52

void setup(){

size(500,500);}void draw (){

background (20,60,90);fill(255,255,255);triangle (50,50,200,20,mouseY,200);}


20/52

void setup(){

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

}


21/52

void setup(){

size (300,300);background (240,50,90);

}void draw(){

triangle (100,100,70,90,mouseX,mouseY);noFill();stroke(60,90,180);smooth();

}


22/52

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();}

Exemplos


23/52

Exemplo mais complexo s para ter uma noo!

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


24/52

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;}

rotateX(-ymag);rotateY(-xmag);

scale(90);beginShape(QUADS);

fill(0, 1, 1); vertex(-1, 1, 1);fill(1, 1, 1); vertex( 1, 1, 1);fill(1, 0, 1); vertex( 1, -1, 1);fill(0, 0, 1); vertex(-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, 1, -1);fill(1, 1, 0); vertex( 1, 1, -1);fill(1, 1, 1); vertex( 1, 1, 1);fill(0, 1, 1); vertex(-1, 1, 1);

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();}


25/52

Utilizando a condicional IF(if) + variveis

* Sempre utilizar () para alterar as hierarquias sempre abrir e fechar para que o comando

funcione.* No tem transparncia no background

void setup() {

size(640, 360);background(200,100,100);

}

void draw() {stroke(10,10,10);if(mousePressed == true) {

line(mouseX, mouseY, pmouseX,pmouseY);

}}


26/52

void setup() {

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

void draw() {

if (mousePressed){

ellipse(mouseX, mouseY, 100, 100);}

}

Utilizando a condicional IF(if) + variveis


27/52

float dir=1; //direction of change

float tinto=0; //black

void setup(){

size(450,400); //size of the page

background(248,247,247); //background colorframeRate(20); //how fastnoStroke(); //there are no linessmooth();

}

void draw(){

ellipse(220,220,150,150); //circle 1ellipse(155,140,100,100); //circle 2ellipse(290,130,100,100); //circle 3tinto=tinto+dir*3; //set new color

if(tinto64){ //set to 64

dir=-1;

}

fill(0,tinto,0); //set of the color}

// mais de uma condio

fl


28/52

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();}


29/52

Utilizando o teclado como interface


30/52

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 = 'a' && key


31/52

Adicionando

textos


32/52

* 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.


33/52

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 fontetextSize() - Tamanho daFonte em pixels


34/52

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

}


35/52

VariveisAs variveis podem representar a posio, cor, alteraesPara 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.

FloatIndicado para armazenar nmeros decimais.float x=10.20;

Boolean

Variveis booleanas podem assumir apenas 2 valores: true (verdadeiro)

oufalse (falso).

Color

Este um tipo especial de varivel encontrado no Processing. Com ele podemosarmazenar cdigos de cores e atribui-los a nomes arbitrrios.

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


36/52


37/52

int eye1x;

int eye1y;

float angle1;

int eye2x;

int eye2y;

float angle2;

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();

}

void draw() {background(260,180,100);ellipseMode(CENTER);fill(255,255-redEye,255-redEye);ellipse(eye1x,eye1y,100,100);ellipse(eye2x,eye2y,100,100);

angle1 = atan2(mouseY-eye1y, mouseX-eye1x)+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);

angle2 = atan2(mouseY-eye2y, mouseX-eye2x)+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);

}}

}

Exemplo mais complexo para ter uma noo!


38/52

AleatoriedadeDentro 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));}

}


39/52

void setup() {size (500,500);strokeWeight(8);

stroke(255);smooth();noCursor();

frameRate(10);}

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


40/52

void setup() {

size (500,500);background(0);

strokeWeight(8);stroke(255);smooth();noCursor();

frameRate(10);

}

void draw() {background(0);

line (mouseX,mouseY,pmouseX,pmouseY);}


41/52

void setup() {

size (500,500);background(0);smooth();noStroke();noCursor();

}

void draw() {float diam=abs(pmouseX-mouseX);ellipse(mouseX,mouseY,diam,diam);

}


42/52

imagens


43/52

Trabalhando com imagensPImage img; (atribuir um nome qualquer a imagem)/ loadImage

*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

void setup(){

size(900,900);background(0);PImage img;

img = loadImage("abutres.jpg");image (img,0,0);

}


44/52

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);}


45/52

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;


46/52

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

}


47/52

Colorindo as imagenstint()

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

}


48/52

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.brhttp://www.brunocampagnolo.com/2010_1/processing/desenho/indexJavaScript.htmlhttp://www.processing.org/learning/http://www.caligraffiti.com.br/introducao-ao-processing/http://forum.processing.orghttp://www.openprocessing.org
http://www.processing.org/learning/topics/tree.htmlhttp://navax.net.br/http://www.brunocampagnolo.com/2010_1/processing/desenho/indexJavaScript.htmlhttp://www.processing.org/learning/http://www.caligraffiti.com.br/introducao-ao-processing/http://www.caligraffiti.com.br/introducao-ao-processing/http://forum.processing.org/http://www.openprocessing.org/http://www.openprocessing.org/http://forum.processing.org/http://www.caligraffiti.com.br/introducao-ao-processing/http://www.processing.org/learning/http://www.brunocampagnolo.com/2010_1/processing/desenho/indexJavaScript.htmlhttp://navax.net.br/http://www.processing.org/learning/topics/tree.html


49/52

salvando para

imprimir


50/52

- Os grficos feitos no Processingpodem ser salvos em PDF, tiff, jpegou 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 bibliotecasespeciais) para salvar em tempo real.
http://navax.net.br/blog/?p=841http://navax.net.br/blog/?p=841


51/52

salvando como

vdeo


52/52

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 MovieMakerDentro do setup definimos o

parmetrolargura, altura, nome do filme, framespor segundo (fps), codec paraquicktime, qualidade e keyframeRate.

Processing Fundamentos

Documents

Transcript of Processing Fundamentos