Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Processing, Programação para Artistas

ARTECH 2012 - PRE-CONFERENCE WORKSHOP José Coelho, Universidade Aberta, Faro
by

José Coelho

on 21 October 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Processing, Programação para Artistas

Processing,
Programação para Artistas

José Coelho, Universidade Aberta
1.Introdução e instalação do Processing;
2.Conceitos básicos de programação;
3.Construção de imagens;
4.Criação de um artefacto digital.

Introdução e Instalação
O que é o Processing?
O que é um programa?
Instalação do Processing
Documentação e Suporte

Conceitos básicos de programação:
Condicionais

http://www.processing.org/download/
Descarregar a versão estável
Descompactar para uma directoria
Colocar atalho para o programa
Escrever o programa "Olá mundo!"
Conceitos básicos de programação:
Variáveis

Conceitos e Exercícios de Programação, José Coelho (http://hdl.handle.net/10400.2/1779)
Exemplos e Tutoriais no site do processing (www.processing.org)
P.|L.|Instr. |Resultado|
1| 6|int .. | |x=3, y=7
2| 9|x=x+y; | |x=10,y=7
3|10|y=x-y; | |x=10,y=3
4|11|x=x-y; | |x=7, y=3
5|14|print.. |x: 7, y: 3 |x=7, y=3
P.|L.|Instr. |Resultado |
1| 6|int x=3; | |x=3
2| 7|int x=7; | |x=3, y=7
3| 8|int aux; | |x=3, y=7, aux=?
4|11|aux=x; | |x=3, y=7, aux=3
5|12|x=y; | |x=7, y=7, aux=3
6|13|y=aux; | |x=7, y=3, aux=3
7|16|print.. |x: 7, y: 3 |x=7, y=3, aux=3
Conceitos básicos de programação:
Ciclos
A e B são expressões lógicas:
A||B » A ou B
A&&B » A e B
! A » não A
A e B expressões numéricas:
A==B » A igual a B
A!= B » A diferente de B
A>B » A maior que B
A>=B » A maior ou igual a B
A<B » A menor que B
A<=B » A menor ou igual a B
Nas expressões numéricas:
A+B » A mais B
A-B » A menos B
A*B » A vezes B
A/B » A a dividir por B
A%B » resto da divisão de A por B
Expressões lógicas e numéricas
P.|L.|Instr. |Resultado |
1| 5|int .. | |soma=0
2| 6|soma=.. | |soma=0+1*1=1
3| 7|soma=.. | |soma=1+2*2=5
4| 8|soma=.. | |soma=5+3*3=14
5| 9|soma=.. | |soma=14+4*4=30
6|10|print.. |Soma dos..|soma=30
P.|L.|Instr. |Resultado |
1| 5|int .. | |soma=0, i=1
2| 6|while.. |1<=4 V |soma=0, i=1
3| 8|soma+=..| |soma+=1*1=1, i=1
4| 9|i++; | |soma=1, i=2
5| 6|while.. |2<=4 V |soma=1, i=2
6| 8|soma+=..| |soma+=2*2=5, i=2
7| 9|i++; | |soma=5, i=3
8| 6|while.. |3<=4 V |soma=5, i=3
9| 8|soma+=..| |soma+=3*3=14, i=3
10| 9|i++; | |soma=14,i=4
11| 6|while.. |4<=4 V |soma=14,i=4
12| 8|soma+=..| |soma+=4*4=30, i=4
13| 9|i++; | |soma=30,i=5
14| 6|while.. |5<=4 F |soma=30,i=5
15|10|print.. |Soma .. |soma=30,i=5
P.|L.|Instr. |Resultado |
1| 5|char .. | |c='a' (97)
2| 6|while.. |'a'<='z' V |c='a' (97)
3| 8|printf.. |Letra a=97|c='a' (97)
4| 9|c++; | |c='b' (98)
5| 6|while.. |'b'<='z' V |c='b' (98)
6| 8|print.. |Letra b=98|c='b' (98)
7| 9|c++; | |c='c' (99)
...
Conceitos de programação:
Vectores e Funções

// abre o ficheiro fich.txt e carrega todas as linhas num vector,
// cada posição do vector tem uma string correspondendo à linha no ficheiro
String [] lines=loadStrings("fich.txt");

// junta todas as linhas separadas numa só linha separadas por espaços
String allText=join(lines, " ");

// separa todas as palavras que estejam limitadas por espaços ou sinais de pontuação
String [] tokens=splitTokens(allText, " ,.;?!");
http://www.processing.org/learning/basics/random.html
http://www.processing.org/learning/basics/array2d.html
Movimento e Eventos
http://www.processing.org/learning/basics/setupdraw.html
http://www.processing.org/learning/basics/noloop.html
http://www.processing.org/learning/basics/loop.html
http://www.processing.org/learning/basics/redraw.html
http://www.processing.org/learning/basics/charactersstrings.html
http://www.processing.org/learning/basics/incrementdecrement.html
http://www.processing.org/learning/basics/functions.html
http://www.processing.org/learning/basics/recursion.html
http://www.processing.org/learning/basics/translate.html
http://www.processing.org/learning/basics/scale.html
http://www.processing.org/learning/basics/rotate.html
http://www.processing.org/learning/basics/words.html
http://www.processing.org/learning/basics/keyboard.html
http://www.processing.org/learning/basics/keyboardfunctions.html
http://www.processing.org/learning/basics/milliseconds.html
http://www.processing.org/learning/basics/clock.html
http://www.processing.org/learning/basics/noise1d.html
http://www.processing.org/learning/basics/noisewave.html
http://www.processing.org/learning/basics/mouse1d.html
http://www.processing.org/learning/basics/mouse2d.html
http://www.processing.org/learning/basics/mousepress.html
http://www.processing.org/learning/basics/easing.html
http://www.processing.org/learning/basics/storinginput.html
http://www.processing.org/learning/basics/mousefunctions.html
http://www.processing.org/learning/basics/distance2d.html
•draw/setup/frameRate() - arquitectura do ciclo de movimento (variável frameCount tem o número da frame)
•Loop/noLoop/redraw() - inicia/pára o ciclo de movimento
•mouseX/mouseY/pmouseX/pmouseY/mousePressed - variáveis do rato
•cursor/noCursor() - ativar/ocultar rato
•keyPressed/key/keyCode - evento teclado e variáveis com tecla utilizada
•mousePressed/mouseReleased/mouseMoved/keyPressed/keyReleased() - eventos intersectáveis
•second/minute/hour/millis/day/month/year() - tempo
•save/saveFrame() - grava imagens
Mais exemplos:
Título, texturas, serpentes, bolas, vídeo.
Criação de um artefacto digital
Ideia
Reutilização
Implementação
Teste

Setup/Draw
Aleatoriedade
Eventos de rato e teclado
Translate / Scale / Rotate
Palavras, Funções e Recursão
Outros exemplos
// The size function is a statement that tells the computer
// how large to make the window.
// Each function statement has zero or more parameters.
// Parameters are data passed into the function
// and are used as values for telling the computer what to do.
size(640, 360);

// The background function is a statement that tells the computer
// which color (or gray value) to make the background of the display window
background(204, 153, 0);
Processing
http://www.processing.org/learning/basics/statementscomments.html
int d = 70;
int p1 = d;
int p2 = p1+d;
int p3 = p2+d;
int p4 = p3+d;

size(640, 360);
background(0);

// Draw gray box
stroke(153);
line(p3, p3, p2, p3);
line(p2, p3, p2, p2);
line(p2, p2, p3, p2);
line(p3, p2, p3, p3);

// Draw white points
stroke(255);
point(p1, p1);
point(p1, p3);
point(p2, p4);
point(p3, p1);
point(p4, p2);
point(p4, p4);
Processing
http://www.processing.org/learning/basics/pointslines.html
size(800, 800);
noStroke();
background(51, 0, 0);

color interior = color(204, 102, 0);
color intermedio = color(204, 153, 0);
color exterior = color(153, 51, 0);

int segundo=second(), minuto=minute();
int grande=100, medio=50, pequeno=25;

if(segundo>30)
{
grande*=2;
medio*=2;
pequeno*=2;
}

fill(exterior);
rect(segundo*10,minuto*10,grande,grande);
fill(intermedio);
rect(segundo*10+medio/2,minuto*10+medio/2,medio,medio);
fill(interior);
rect(segundo*10+medio/2+pequeno/2,minuto*10+medio/2+pequeno/2,pequeno,pequeno);
Processing
http://www.processing.org/learning/basics/creating.html
size(640, 360);
background(0);
noStroke();

int passos=10;

for(int i=0;i<passos;i++)
{
fill(204-i*10);
triangle(18, 18, 18, 360, 120-i*4, 360);
}

for(int i=0;i<passos;i++)
{
fill(102+i*10);
rect(81, 81, 63, 63-i*4);
}

for(int i=0;i<passos;i++)
{
fill(204-i*10);
quad(189, 18, 216, 18, 216-i*2, 360-i*4, 144, 360);
}

for(int i=0;i<passos;i++)
{
fill(255-i*10);
ellipse(252, 144, 72, 72-i*4);
}

for(int i=0;i<passos;i++)
{
fill(255-i*10);
arc(479, 300, 280, 280-i*4, PI, TWO_PI);
}
Processing
http://www.processing.org/learning/basics/shapeprimitives.html
float diameter;
int[] angles = { 30, 10, 45, 35, 60, 38, 75, 67 };
float lastAngle = 0;

size(640, 360);
background(100);
noStroke();
diameter = min(width, height) * 0.75;

for (int i = 0; i < angles.length; i++) {
fill(angles[i] * 3.0);
arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(angles[i]));
lastAngle += radians(angles[i]);
}
Processing
http://www.processing.org/learning/basics/piechart.html
void drawCircle(int x, int raio, int level)
{
float tt = 126 * level/4.0;
fill(tt);
ellipse(x, height/2, raio*2, raio*2);
if(level > 1)
{
level = level - 1;
drawCircle(x - raio/2, raio/2, level);
drawCircle(x + raio/2, raio/2, level);
}
}

void setup()
{
size(640, 360);
noStroke();
drawCircle(width/2, 280, 6);
}
http://www.processing.org/learning/basics/recursion.html
Processing
size(600, 600);
background(0);
strokeWeight(10);

int comprimento=100, x=width/2,y=height/2,incx,incy;
int passo=50;
color cor=color(random(255),random(255),random(255));

for (int i = 0; i < comprimento; i++)
{
cor=color(red(cor)+int(random(32)-16),
green(cor)+int(random(32)-16),
blue(cor)+int(random(32)-16));
incx=int(random(passo))-passo/2;
incy=int(random(passo))-passo/2;
stroke(cor);
line(x, y, x+incx, y+incy);
x+=incx;
y+=incy;
}
Processing
http://www.processing.org/learning/basics/random.html
Ideias de Artefactos
Full transcript