Guilherme Ranoya

Design | UFPE

DESIGNGENERATIVO.RANOYA.COM

DESIGN 

GENERATIVO

2azj7bf

TURMA /CLASSROOM

TECNOLOGIA

EIXO

FUNDAMENTAL

NÍVEL

Designers e artistas deveriam aprender a programar?

Designers e artistas deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

Criar suas próprias ferramentas usadas para projetar;

1

Porquê, então?

DESIGN 

GENERATIVO

DESIGNGENERATIVO.RANOYA.COM

Designers e artistas deveriam aprender a programar?

Resposta rápida:
Sim! Mas não para se tornarem
desenvolvedores de software.

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

Porquê, então?

Criar suas próprias ferramentas usadas para projetar;

1

PROFESSOR

PROGRAMA

CALENDÁRIO

BIBLIOGRAFIA

REFERÊNCIAS

DESIGN 

GENERATIVO

DESIGNGENERATIVO.RANOYA.COM

Resposta rápida:
sim! Mas não para se tornarem
desenvolvedores de software.

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Porquê, então?

Criar suas próprias ferramentas usadas para projetar;

1

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

PROFESSOR

PROGRAMA

BIBLIOGRAFIA

REFERÊNCIAS

DESIGN 

DESIGNGENERATIVO.RANOYA.COM

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

Porquê, então?

2

Construir elementos e aspectos do artefato que são muito complicadas para se fazer manualmente, mais simples para um computador resolver;

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

Porquê, então?

2

3

Entender melhor o material que tece a mídia digital, para que seus projetos sejam melhores (mais adequados e efetivos);

4

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

FUNDAMENTOS

ESTUDO DOS MATERIAIS
UTILIZADOS NO PROJETO DE
DESIGN DO PORVIR

CÓDIGOS

HTML + CSS

FUNDAMENTOS

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

Porquê, então?

4

CÓDIGOS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

FUNDAMENTOS

Entender as técnicas e os processos de construção da mídia digital, para que suas soluções sejam factíveis.

Porquê, então?

4

CÓDIGOS

MATERIAL

OS TIPOS DE
CÓDIGOS COMPUTACIONAIS

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

O código computacional é apenas um conjunto de informações que instruem um computador o que ele deve fazer.

É uma linguagem, por que é a forma como explicamos para ele o que queremos.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

Atualmente, um computador pode fazer bem mais do que desenhar na tela.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

Podemos gerar material impresso com variações programadas;

Atualmente, um computador pode fazer bem mais do que desenhar na tela.

Infelizmente, diferente de nós, um computador não é capaz realmente de interpretar a linguagem. Ele segue as instruções de forma literal.

Podemos gerar material impresso com variações programadas;

Gerar desenhos programados para serem usadas em materiais gráficos diversos;

Atualmente, um computador pode fazer bem mais do que desenhar na tela.

Podemos gerar material impresso com variações programadas;

Gerar desenhos programados para serem usados em materiais gráficos diversos;

Ou programar componentes para dar comportamento à produtos físicos.

Atualmente, um computador pode fazer bem mais do que desenhar na tela.

Podemos gerar material impresso com variações programadas;

Gerar desenhos programados para serem usados em materiais gráficos diversos;

Ou programar componentes para dar comportamento à produtos físicos.

LOGO

BASIC

JAVASCRIPT

PROCESSING

Linguagens de
programação
introdutórias

1970

1980

1990

2000

2010

Gerar desenhos programados para serem usados em materiais gráficos diversos;

Ou programar componentes para dar comportamento à produtos físicos.

LOGO

BASIC

JAVASCRIPT

PROCESSING

1970

1980

1990

2000

2010

Linguagens de
programação
introdutórias

Todas as linguagens de programação modernas possuem sintaxes e facilidades diferentes, mas sempre os mesmos elementos básicos da programação

Ou programar componentes para dar comportamento à produtos físicos.

LOGO

BASIC

JAVASCRIPT

PROCESSING

1970

1980

1990

2000

2010

Linguagens de
programação
introdutórias

Todas as linguagens de programação modernas possuem sintaxes e facilidades diferentes, mas sempre os mesmos elementos básicos da programação

O aprendizado dos fundametnos de uma linguagem de programação ajudará no aprendizado de qualquer outra

2020

2030

Ou programar componentes para dar comportamento à produtos físicos.

LOGO

BASIC

JAVASCRIPT

PROCESSING

1970

1980

1990

2000

2010

Linguagens de
programação
introdutórias

Todas as linguagens de programação modernas possuem sintaxes e facilidades diferentes, mas sempre os mesmos elementos básicos da programação

O aprendizado dos fundamentos de uma linguagem de programação ajudará no aprendizado de qualquer outra

2020

2030

Variáveis

Operadores
Lógicos

Operadores
Aritméticos

Funções

Matrizes

Sintaxe

Objetos

Variáveis

Operadores
Lógicos

Operadores
Aritméticos

Funções

Matrizes

Objetos

Sintaxe

O aprendizado dos fundamentos de uma linguagem de programação ajudará no aprendizado de qualquer outra

Todas as linguagens de programação modernas possuem sintaxes e facilidades diferentes, mas sempre os mesmos elementos básicos da programação

1990

2000

2010

2020

2030

Linguagens
voltadas para tecnologias criativas

PROCESSING

LOGO

BASIC

JAVASCRIPT

P..

PROCESSING

SINTAXE

SINTAXE

P5

SINTAXE

line(10,20,80,50);

Linguagens
voltadas para tecnologias criativas

P5

SINTAXE

line(10,20,80,50);

instrução

desenha uma linha na tela

P5

SINTAXE

line(10,20,80,50);

dados da instrução (entrada)

informações que uma instrução precisa receber para realizar sua tarefa

P5

SINTAXE

line(10,20,80,50);

término da linha

informa que a instrução termina ali. É sempre necessário informar o final de cada linha para que o interpretador não se confunda

SINTAXE

line(10,20,80,50);
x
y
10
20
80
50

SINTAXE

line(10,20,80,50);
x
y
10
20
80
50

SINTAXE

line(10,20,80,50);
x
y
10
20
80
50

P5

SINTAXE

line(10,20,80,50);
rect(100,10,300,90);
ellipse(80,120,20,20);

P5

SINTAXE

line(10,20,80,50);
rect(100,10,300,90);
ellipse(80,120,20,20);

ordem de execução

as tarefas são realizadas na ordem em que são declaradas no código, uma após a outra

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
}

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
}

declaração de função

esta é uma declaração de nova função. você verá mais sobre funções em breve

todo elemento que recebe dados com ( ) é uma função, inclusive ellipse, rect ou line

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
}

bloco

isto é um bloco. tudo que está entre { } é parte de um conjunto de instruções que pertencem a alguém (uma condicional, uma função, um objeto, etc.)

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
      int x = 10;
}

bloco

os dados que pertencem a um bloco não são acessíveis por outro bloco de programação

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
      int x = 10;
}

espaços em branco são ignorados no código e não interferem na programação

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
      int x = 10;
}

declaração de variáveis

esta é uma declaração de nova variável. você verá mais sobre variáveis e as operações com elas em breve

toda atribuição de valor
= precisa ser recebida por uma variável

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
      frameRate(30);
}

um programa em Processing possui sempre duas funções básicas em todos os códigos: setup e draw

void draw() {
      line(0,0,600,400);
}

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
      frameRate(30);
}
void draw() {
      line(0,0,600,400);
}

setup configura a tela (output) para o código

SINTAXE

void setup() {
      size(600,400);
      stroke(255);
      frameRate(30);
}
void draw() {
      line(0,0,600,400);
}

draw desenha na tela repetidamente sem parar, na quantidade de quadros por segundo definidos pela função frameRate em setup

SINTAXE

/*
Este código desenha
uma linha
*/

line(0,0,20,40); // linha


SINTAXE

/*
Este código desenha
uma linha
*/

line(0,0,20,40); // linha


tudo que for incluído entre
/* e */ será ignorado no código

comentário em bloco

tudo que for incluído depois de  // na linha, será ignorado no código

comentário em linha

SINTAXE

VARIÁVEIS

SINTAXE

VARIÁVEIS

variáveis servem para armazenar valores e dados que são utilizados ao longo do código

praticamente tudo é guardado em variáveis ao longo de um programa

para que servem variáveis?

void setup() { }

int x = 10;

float y = 10.5;

String nome = "Design";

SINTAXE

VARIÁVEIS

void setup() { }

int x = 10;

float y = 10.5;

String nome = "Design";

void, int, float e String são tipos de dados

todas as variáveis ou funções, quando declaradas, precisam especificar que tipo de dados guardam ou produzem

tipos de dados

int
valores numéricos inteiros

float
valores numéricos com frações

boolean
valores binários (true ou false)

 

String
letras, palavras ou texto


void
vazio, sem valor guardado ou retornado

SINTAXE

VARIÁVEIS

tipos de dados

int
valores numéricos inteiros

float
valores numéricos com frações

boolean
valores binários (true ou false)

 

String
letras, palavras ou texto


void
vazio, sem valor guardado ou retornado

int k = 10;
float z = 5.325;
boolean rt = false;
String nome = "João";
void xpto() { }

SINTAXE

VARIÁVEIS

tipos de dados

int
valores numéricos inteiros

float
valores numéricos com frações

boolean
valores binários (true ou false)


String
letras, palavras ou texto


void
vazio, sem valor guardado ou retornado

int k = 10;
float z = 5.325;
boolean rt = false;
String nome = "João";
void xpto() { }

SINTAXE

VARIÁVEIS

int x = 10;

x = 20;

declaração (inicialização) e uso

na primeira vez que uma variável é apresentada no código, é necessário informar seu tipo (declaração ou inicialização da variável)

todas as outras vezes, seja para fazer operações, ou apenas mudar seu valor, seu tipo não deve mais ser declarado

SINTAXE

VARIÁVEIS

uso

usamos variáveis para praticamente tudo em um código

SINTAXE

VARIÁVEIS

int a = 15;
int b1 = 50;
int b2 = 80;

line(a,a,b1,b2);

b2 = 30;

line(a,a,b1,b2);
z[5] = 20;

k[3][2] = "Ricardo";


arrays ou matrizes

estas variáveis são matrizes. tudo que é seguido por [ ] é uma matriz

elas guardam mais de um valor ao mesmo tempo

você verá mais sobre matrizes/arrays
posteriormente

SINTAXE

VARIÁVEIS

xpto.z = 10;

instancia.nome = "Pedro";


variáveis de objetos

estas variáveis pertencem à objetos. toda vez que um elemento é seguido por . trata-se de um dado ou função interna de um objeto

você verá mais sobre objetos
posteriormente

SINTAXE

VARIÁVEIS

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

muito do que você fará em qualquer tipo de programação é alguma forma de cálculo

Estas operações permitem modificar os dados armazenados em variáveis

operações aritméticas?

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

as somas são realizadas pelo sinal + nas operações

soma

int x;

x = 5 + 20;

x = (10 + 5) + 40;
x = 25

x = 55

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

as somas podem utilizar outras variáveis, e a cada linha do código, seus valores vão sendo modificados e interferindo em outras operações

soma

int x = 5;
int z = 10;
int k = 20;

k = x + z;

z = (x + 5) + k;
x = 25

x = 55
k = 15

z = 25

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

variáveis podem ter seus valores somados aos seus próprios valores antes da soma

soma

int x = 5;

x = x + 10;



x = x + 20;

x = 25

x = 55
k = 15

z = 25
x = 15



x = 35
5
15
15
35

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

o atalho ++ faz uma soma de um valor unitário (1) à uma variável

o atalho += significa o valor da própria variável somado ao que está depois do operador

soma

int x = 5;

x++;

x += 10;

x = 25

x = 55
k = 15

z = 25
x = 15



x = 35
x = 6
x = 16

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

tudo que vale para a soma, também vale para a subtração, utilizando o símbolo -

subtração

int x = 5;
int y = 10;

x = y - 20;

x = x - 10;

x--;

x = y + (x - 5);


x = 6
x = -10

x = -20

x = -21

x = -17

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

na computação utilizamos o símbolo * para indicar multiplicações

não existe operador ** em Processing

multiplicação

int x = 2;
int y = 5;

x = y * 10;

x = x * 10;

x = y * (x - 5);

y *= 2;
x = 6
x = -10

x = -20

x = -21

x = -17
x = 20

x = 200

x = 975
y = 10

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

na computação utilizamos o símbolo / para indicar divisões

 

não esqueça que usamos // para criar comentários em linha

divisão

int x = 2;
int y = 5;
int z;

x /= 2;
z = x / y;
x = 20

x = 200

x = 975

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

esta operação resultará em um erro, pois seu resultado é uma fração, e não um valor inteiro.

 

O programa não rodará.

divisão

int x = 2;
int y = 5;
int z;

x /= 2;
z = x / y;
erro

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

para corrigir o problema, o tipo da variável z precisará ser alterado para float, e assim ela poderá comportar o valor fracionado resultante da operação de divisão

divisão

int x = 2;
int y = 5;
float z;

x /= 2;
z = x / y;
erro
z = 0.2

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

se não houver problema com a tipologia do dado, você pode lidar com a divisão da mesma forma que com as outras operações

divisão

int x = 2;
int y = 5;
float z;

z = x / y;

z = z / 2;

z = z / (x * 5);



 

erro
z = 0.2
z = 0.4

z = 0.2

z = 0.01

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

as operações com dados do tipo float são mais lentas e mais dispendiosas que com dados int

tentamos, sempre que possível, poupar o processamento computacional para que nosso programa seja mais rápido e mais eficiente

e porquê não usamos somente float?

não! operações aritméticas também são possíveis com boolean e String

e só podemos usar float e int?

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

as operações com dados do tipo float são mais lentas e mais dispendiosas que com dados int

tentamos, sempre que possível, poupar o processamento computacional para que nosso programa seja mais rápido e mais eficiente

e porquê não usamos somente float?

não! operações aritméticas também são possíveis com boolean e String

e só podemos usar float e int?

boolean a = true;
boolean b = false;
String c = "Um";
String d = "Dois";
boolean e;
String f;

e = a + b;

f = c + d;

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

as operações com dados do tipo float são mais lentas e mais dispendiosas que com dados int

tentamos, sempre que possível, poupar o processamento computacional para que nosso programa seja mais rápido e mais eficiente

e porquê não usamos somente float?

não! operações aritméticas também são possíveis com boolean e String

e só podemos usar float e int?

boolean a = true;
boolean b = false;
String c = "Um";
String d = "Dois";
boolean e;
String f;

e = a + b;

f = c + d;
e = true

f = "UmDois"

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

alguns dados são intercambiáveis

e só podemos usar float e int?

boolean a = true;
int b;
int c = 10;
float d;

b = a;
d = c;

e = true

f = "UmDois"
b = 1
d = 10.00

e outros não

String e = "1";
int f;
String g = "true"
boolean h;

f = e;
h = g;
erro
erro

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

operações lógicas envolvem processos de decisão e fluxo do código computacional. São feitas através de operações de atribuição, comparação, condicionais e loops

operações lógicas?

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

essa é uma operação de atribuição, que você, sem perceber, já conhece

atribuição

int x = 5;

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

false

e essa é uma operação de comparação

comparação

int x = 5;

boolean k = (x == 6);

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

false

e essa é uma operação de comparação

comparação

int x = 5;

boolean k = (x == 6);
x < 6
x > 6
x <= 6
x >= 6
x == 6
x != 6

comparações são feitas com os seguintes operadores:

true
false
true
false
false
true

 

menor que
maior que
menor ou igual a
maior ou igual a
igual a
diferente de

toda comparação resulta em um valor do tipo boolean

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

false

e essa é uma operação de comparação

comparação

int x = 5;

boolean k = (x == 6);
x < 6
x > 6
x <= 6
x >= 6
x == 6
x != 6

comparações são feitas com os seguintes operadores:

true
false
true
false
false
true

 

menor que
maior que
menor ou igual a
maior ou igual a
igual a
diferente de

toda comparação resulta em um valor do tipo boolean

comparações podem ser concatenadas em operações conhecidas como operações booleanas

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

false

comparação

int x = 5;

boolean k = (x == 6);
x < 6
x > 6
x <= 6
x >= 6
x == 6
x != 6

true
false
true
false
false
true

 

menor que
maior que
menor ou igual a
maior ou igual a
igual a
diferente de

toda comparação resulta em um valor do tipo boolean

comparações podem ser concatenadas em operações conhecidas como operações booleanas

&&
||
!
e
ou
(x < 6 && x != 5)
false
não

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

false

condicionais

int x = 5;

boolean k = (x == 6);

toda comparação resulta em um valor do tipo boolean

as instruções condicionais definem o que o código deve fazer caso uma condição data seja satisfeita (true)

if (x < 6 && x != 2) {




}

true
código que deve ser executado caso a condição seja verdadeira (true)

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

false

condicionais

int x = 5;

boolean k = (x == 6);

toda comparação resulta em um valor do tipo boolean

as instruções condicionais definem o que o código deve fazer caso uma condição data seja satisfeita (true)
ou não (false)

if (x < 6 && x != 2) {




}

true
código que deve ser executado caso a condição seja verdadeira (true)
  else {




}

código que deve ser executado caso a condição seja falsa (false)

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

loops podem ser construídos através da instrução for, ou da instrução while

ambas funcionam da mesma forma, mas while costuma ser mais perigosa para programadores inexperientes, pois não usa uma variável como contador das interações, podendo ficar presa em um loop infinito (e travar o computador)

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

loops podem ser construídos através da instrução for, ou da instrução while

ambas funcionam da mesma forma, mas while costuma ser mais perigosa para programadores inexperientes, pois não usa uma variável como contador das interações, podendo ficar presa em um loop infinito (e travar o computador)

int x = 5;
while (x < 8 && x != 2) {
  println(x);
  x = x + 1;
}

true
5
true
6
true
7
false

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

true
5
true
6
true
7
false
for (int k = 5; k < 8; k = k + 1) {
  println(k);
}

true
5
true
6
true
7
false
int x = 5;
while (x < 8 && x != 2) {
  println(x);
  x = x + 1;
}

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

int x = 5;
while (x < 8 && x != 2) {
  console.log(x);
  x = x + 1;
}
true
5
true
6
true
7
false
for (int k = 5; k < 8; k = k + 1) 






{
  println(k);
}

variável utilizada para contar as iterações do loop

variável contador

true
5
true
6
true
7
false

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

while (x < 8 && x != 2) {
  console.log(x);
  x = x + 1;
}

true
5
true
6
true
7
false
for (int k = 5; k < 8; k = k + 1) 






{
  println(k);
}

true
5
true
6
true
7
false

variável utilizada para contar as iterações do loop

variável contador

enquanto for true, o loop continua rodando

condição

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

loops são instruções que são realizadas até que uma condição deixe de ser satisfeita (false)

while (x < 8 && x != 2) {
  console.log(x);
  x = x + 1;
}

true
5
true
6
true
7
false
for (int k = 5; k < 8; k = k + 1) 






{
  println(k);
}

true
5
true
6
true
7
false

variável utilizada para contar as iterações do loop

variável contador

enquanto for true, o loop continua rodando

condição

ao término de cada loop, que operação é realizada sobre o contador?

o que acontece com o contador

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

loops

5
6
7

velocidade

loops são muito mais rápidos do que um frame da função draw(), mesmo se o frameRate for exageradamente alto.

à cada frame de draw(), o loop será executado do começo ao fim.

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

funções são conjuntos de instruções e procedimentos executados repetidamente ao longo de um código, que podem receber parâmetros para ajustar sua ação

line(), ou rect(), são funções, e você pode criar as suas próprias também.

funções

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

void xpto(int z) {
  
   line(0,z,z,100);

}

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

void xpto(int z) {
  





   line(0,z,z,100);




}

você é que escolhe
o nome que quer dar

nome da função

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

void xpto(int z) {
  





   line(0,z,z,100);




}

você escolhe que parâmetros são passados para a função para serem usados nela

parâmetros

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

void xpto(int z) {
  





   line(0,z,z,100);




}

tipo de dado retornado pela função (falaremos disso depois)

retorno

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

void xpto(int z) {
  





   line(0,z,z,100);




}

o que a função faz

procedimentos

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

void xpto(int z) {
  
   line(0,z,z,100);
}
xpto(20);
xpto(50);
x
y
20
20
50
50

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

funções podem realizar procedimentos e devolverem valores ou dados para alguma variável

se for este o caso, a função precisará especificar qual é o tipo de dado que ela retornará, para que seja compatível com um tipo específico de variável

retorno

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

float angulo(float rad) {
  
   float k = 0;
   k = (rad * 360) / (2 * PI);

   return k;

}

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

float angulo(float rad) {
  
   float k = 0;
   k = (rad * 360) / (2 * PI);

   return k;

}

o tipo do dado retornado pela função (instrução return) precisa constar na sua declaração

tipo

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

float angulo(float rad) {
  
   float k = 0;
   k = (rad * 360) / (2 * PI);

   return k;

}

float alfa = 0;

alfa = angulo(3.1428);


180.00

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

int angulo(float rad) {
  
   float k = 0;
   k = (rad * 360) / (2 * PI);

   return int(k);

}

int alfa = 0;

alfa = angulo(3.1428);


180

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

int angulo(int a, int b, int c) {
  
   return (a * b) - c;

}

int z = angulo(10,5,3);


Você pode incluir quantos parâmetros desejar como entrada da função, separando cada um deles com vírgula

parâmetros

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

int azar() {
  
   return 13;

}

int z = azar();


Você pode incluir quantos parâmetros desejar como entrada da função, separando cada um deles com vírgula

parâmetros

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

arrays são variáveis indexadas, que possuem diversos valores armazenados nelas, cada valor organizado e recuperável através de um índice ou posição da variável

matrizes ou arrays

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

arrays são variáveis indexadas, que possuem diversos valores armazenados nelas, cada valor organizado e recuperável através de um índice ou posição da variável

matrizes ou arrays

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

a[0]

10

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

arrays são variáveis indexadas, que possuem diversos valores armazenados nelas, cada valor organizado e recuperável através de um índice ou posição da variável

matrizes ou arrays

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

a[0]

10

a[1]

2

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

arrays são variáveis indexadas, que possuem diversos valores armazenados nelas, cada valor organizado e recuperável através de um índice ou posição da variável

matrizes ou arrays

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

a[0]

10

a[1]

2

a[4]

0

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

arrays são variáveis indexadas, que possuem diversos valores armazenados nelas, cada valor organizado e recuperável através de um índice ou posição da variável

matrizes ou arrays

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

a[0]

10

a[1]

2

a[4]

0

a[2]

23

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

arrays são variáveis indexadas, que possuem diversos valores armazenados nelas, cada valor organizado e recuperável através de um índice ou posição da variável

matrizes ou arrays

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

a[0]

10

a[1]

2

a[4]

0

a[2]

23

a[2] + a[6]

73

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

int[] a = new int[8];

o tipo de dado é um array de dados inteiros

tipo array de int

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

int[] a = new int[8];

o conteúdo é uma nova estrutura de matriz de valores inteiros com até 8 índices

conteúdo

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

int[] a = new int[8];

8 elementos

a matriz nunca pode passar de 8 elementos, pois a memória reservada para esta estrutura se resume a isso

conteúdo

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

int[] a = new int[8];

8 elementos

a = {10,2,23,4,0,32};
a[6] = 50;
a[4] = 4;

os valores podem ser atribuídos através de um conjunto sequêncial

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

a

0  1  2  3 

10  2  23  4  0  32  50  4  

4  5  6 

7  

int[] a = new int[8];

8 elementos

a = {10,2,23,4,0,32};
a[6] = 50;
a[4] = 4;

ou podem ser atribuídos individualmente, índice a índice

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

uma forma bastante comum de se atribuir valores a arrays é através de loops

int[] k = new int[5];

for (int i=0; i<5; i++) {
   
    k[i] = i * 10;

}
k[0]
0
k[1]
10
k[2]
20
k[3]
30
k[4]
40

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

você pode criar matrizes com outros tipos de dados

float[] c = new float[100];
c[42] = 0.35;

String[] nomes = new String[30];
nomes[4] = "Ricardo";

e matrizes / arrays multidimensionais

int[][] v = new int[10][10];
v[4][2] = 50;

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos são como esquemas ou mecanismos praticamente independentes, que possuem seus próprios dados e suas próprias funções, e que podem ser copiados e reutilizados muitas vezes em um código

objetos

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos

a programação orientada à objetos é uma técnica bastante sofisticada, e que muitas vezes pode ser até mais trabalhosa do que a maneira tradicional (procedimental) de se trabalhar, mas que trás vantagens à longo prazo com o reaproveitamento ou reutilização daquilo que se constrói, em outros códigos

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos

considere, por exemplo, que criemos um objeto de programação cujo papel seja resolver tudo que se refere a uma bola na tela

o objeto bola poderá possuir as seguintes características:

bola.tamanho = 20;

bola.cor = 128;

bola.peso = 50;

variáveis do objeto bola

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos

considere, por exemplo, que criemos um objeto de programação cujo papel seja resolver tudo que se refere a uma bola na tela

o objeto bola também poderá possuir as seguintes ações:

bola.pula(50);

bola.explode();

bola.gira(false);

funções do objeto bola

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos

o mais relevante aqui é perceber que se você só tiver uma única bola agindo na tela em seu código, não faz muito sentido construir algo com programação orientada à objetos

contudo, se você tiver 1000 bolas na tela, cada uma com um tamanho ou peso diferente, mas com características e comportamentos comuns, fará todo o sentido construir um objeto, e copiá-lo 1000 vezes

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos e instâncias

no Processing criamos objetos através da diretriz

class
new

e criamos cópias dos objetos (instâncias) através da diretriz

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos e instâncias

class Bola {
   color cor;
   int tamanho;
   int peso;
}

Bola bola1 = new Bola();
Bola bola2 = new Bola();

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

objetos e instâncias

class Bola {
   color cor;
   int tam = 50;
   int peso;
   int mx = 20;
   int my = 20;

   void se_desenha() {
      fill(cor);
      ellipse(mx,my,tam,tam);
   }
}

Bola bola1 = new Bola();
Bola bola2 = new Bola();

bola2.se_desenha();


SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

função construtora

a função construtora de um objeto é uma função especial que receberá parâmetros na criação da instância, e os registrará nas variáveis daquela instância, como uma forma de inicializar os dados daquele elemento

SINTAXE

VARIÁVEIS

OPERADORES
ARITMÉTICOS

OPERADORES
LÓGICOS

FUNÇÕES

MATRIZES

OBJETOS

função construtora

class Bola {
   int tam;
   int mx;
   int my;

   Bola(int px, int py, int t) {
      
      mx = px;
      my = py;
      tam = t;
   }
}



Bola mB = new Bola(10,10,50);



a função construtora possui o mesmo nome da classe, e não possui tipo (void, int, etc.)

COPYRIGHT © 2017
GUILHERME RANOYA

DGEN Audio

By Guilherme Ranoya

DGEN Audio

Material de aula versão storytelling da disciplina de Design Generativo do departamento de Design da Universidade Federal de Pernambuco

  • 1,849